@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
*{
  padding: 0px;
  margin: 0px;
  font-family: Alata, sans-serif;
  font-weight: 700;
  box-sizing: border-box;
  width: auto;
}

#header {
  padding: 20px;
  width: 100%;
  background: #FFF;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  font-size: 28;
}

#header #logo{
  font-style: italic;
  font-size: 20px;
}

#header #logo span{
  color: #42f5b3;
}
#header nav{
  color: #000;
}

#header nav a{
  font-size: 16px;
  text-decoration: none;
  padding: 10px;
  text-align: center;
  color: black;
}
#footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}
#header nav a:last-child{
  color: white;
  background: #42f5b3;
  /* Hellere bg-color: #aaf0d1   */
  padding: 10px 20px;
  margin-left: 30px;
  border-radius: 30px;
}
#header nav a:hover{
  opacity: 0.9;
}
#description button {
  margin-top: 60px;
  margin-bottom: 50px;
}

#container{
  width: 100%;
  background: #FFF;
  font-size: 100;
  margin-left: 200px;
  margin-top: 200px;
}

#description{
  padding: 20px;
  width: 100%;
  background: #FFF;
  font-size: 60;
  margin-left: 220px;
  margin-top: 0px;
}
#projects {
  margin-top: 15px;
  padding: 20px;
  width: 100%;
  background: #FFF;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  font-size: 28;
  background-color: #273036;
}
#projects h4 {
  font-size: 50px;
  text-decoration: none;
  margin-top: 100px;
  text-align: center;
}
#footer a {
  margin-right: 20px;
  margin-bottom: 10px;;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  color: #42f5b3;
}
#wave {
  margin-left: 0px;
}
.card-container {
      display: flex;
      justify-content: center;
      margin-top: 100px;
    }
    .card-width {
      width: 350px;
      margin: 50px;
      border-radius: 42px;
      box-shadow: 2px 2px 22px rgba(0, 0, 0, 0.2);
      transition: .3s box-shadow, .3s margin-top ease-in-out;
    }
    .card-width:hover {
      box-shadow: 2px 12px 32px rgba(0, 0, 0, 0.5);
      margin-top: 30px;
      cursor: pointer;
    }
    .img-one {
      /* Old picture: url('https://i.imgur.com/ajlG2NZ.jpg') */
      width: 350px
      height: 300px;
      border-radius: 42px;
      background: url('https://i.imgur.com/ajlG2NZ.jpg')  no-repeat;
      background-size: 150%;
      background-position-y: 0%;
      background-position-x: 0%;
    }
    .card-one {
      height: 500px;
      background-color: #FFE697;
    }
    .btn-base {
      display: flex;
      width: 260px;
      height: 50px;
      border-radius: 50px;
      margin: 0 auto;
      margin-top: -25px;
      font-size: 30px;
      justify-content: center;
      align-items: center;
      color: white;
    }
    .btn-one {
      background-color: #FF8A8A;
    }
    .card-two {
      height: 500px;
      background-color: #E4E4E4;
    }
    .img-two {
      width: 350px;
      height: 300px;
      border-radius: 42px;
      background: url('https://i.imgur.com/RTwoB09.jpg') no-repeat;
      background-size: 130%;
      background-position-y: 0%;
      background-position-x: 60%;
    }
    .btn-two {
      background-color: #BFBBBB;
    }
    .card-three {
      height: 500px;
      background-color: #B7E0FF;
    }
    .img-three {
      width: 350px;
      height: 300px;
      border-radius: 42px;
      background: url('https://i.imgur.com/XBAbnsC.jpg') no-repeat;
      background-size: 140%;
      background-position-y: 100%;
      background-position-x: 30%;
    }
    .btn-three {
      background-color: #31A2FA;
    }

    .content {
      padding: 15px 35px;
      font-size: 16px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    @media (max-width: 1314px) {
      .card-container {
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
      }
      .card-width {
        margin: 0 auto;
        margin-top: 25px;
      }
      .card-width:hover {
        box-shadow: 2px 12px 32px rgba(0, 0, 0, 0.5);
        cursor: pointer;
      }
    }



















.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}