:root {
  --animation: color-change 5s ease infinite;
  --primary-color: #fff;
  --background-color: #000000;
  --gray-light: #cdcdcd;
  --pale-white: #f0f0f0;
  --gray-dark: #474747;
  --bs-gradient: linear-gradient(to top, #191919 0%, black 100%);
  --accent-color: #8ef6e4;
  --accent-color-pink: #d620e3;
  --secondary-color: #9896f1;
  --pink-darker-color: #d59bf6;
  --pink-lighter-color: #edb1f1;
  --border: 2px solid white;
  --h1-size: 90px;
  --h2-size: 70px;
  --h3-size: 48px;
  --h4-size: 50px;
  --h5-size: 40px;
  --p-size: 40px;
  --link-size: 16px;
  --footer-link: 14px;
  --p-size-2: 12px;
  --satoshi: "Satoshi", sans-serif;
}

/* Define the animation */
@keyframes color-change {
  10% {
    color: #fff;
  } /* Start color */
  50% {
    color: #edb1f1;
  } /* Middle color */
  75% {
    color: #d59bf6;
  } /* Middle-2 color */
  85% {
    color: #8ef6e4;
  } /* Middle-3 color */
  95% {
    color: #d620e3;
  } /* Middle-4 color */
  100% {
    color: #edb1f1;
  } /* End color */
}
/* ANIMATION  */

body {
  font-family: var(--satoshi);
  width: 100%;
  height: 100%;
}

.img-logo {
  width: 150px;
}
header {
  text-align: center;
}
.greeting {
  font-size: var(--h2-size);
  color: var(--secondary-color);
  margin-top: 10px;
  margin-bottom: 0px;
}
.valentina-rapunzel {
  animation: var(--animation);
  font-size: var(--h1-size);
  margin-top: 10px;
  margin-bottom: 20px;
}

.graphic-designer {
  font-size: var(--h3-size);
  color: var(--pink-darker-color);
  margin-top: 20px;
  margin-bottom: 10px;
}
.main-buttons {
  display: flex;
  justify-content: center;
}
.button {
  margin: 20px 5px;

  padding: 20px 30px;
  color: var(--primary-color);
  font-weight: 700;
  background-color: var(--background-color);
  border-radius: 50px;
}
.button:hover {
  background-color: var(--accent-color-pink);
  font-weight: 900;
  color: var(--background-color);
  transition: 200ms ease-out;
}

.about-me-link,
.my-projects-link,
.contact-me-link {
  font-family: "Satoshi", sans-serif;
  text-decoration: none;
  font-size: var(--link-size);
  text-align: center;
}

footer {
  margin: 20px auto;
  text-align: center;
}
.footer-paragraph {
  font-size: var(--p-size-2);
  color: var(--gray-light);
}
.footer-links {
  color: var(--secondary-color);
  font-size: var(--footer-link);
}

/* ABOUT ME  */
/* ABOUT ME  */
/* ABOUT ME  */
/* ABOUT ME  */
/* ABOUT ME  */
/* ABOUT ME  */
/* ABOUT ME  */
/* ABOUT ME  */
/* ABOUT ME  */
/* ABOUT ME  */
/* .about-me-container {
  margin: 0px 120px 60px 120px;
} */

.go-to-homepage-section {
  text-align: center;
  margin-bottom: 0px;
}
.go-to-homepage-link {
  font-size: var(--link-size);
  color: var(--gray-light);
  font-weight: 400;
}
.go-to-homepage-link:hover {
  text-decoration: underline;
  color: var(--pale-white);
}
.about-me-title {
  text-decoration: underline;
  color: var(--pink-lighter-color);
  font-size: var(--h2-size);
  font-weight: 600;
  margin: 30px auto;
}
.from-ukraine {
  margin-bottom: 0px;
  color: var(--secondary-color);
  font-weight: 600;
  font-size: var(--h3-size);
}

.avatar {
  max-width: fit-content;
  margin-top: 60px;
}
.certificates {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.certificate {
  margin-top: 30px;
}

.text {
  color: var(--pale-white);
  font-size: var(--p-size);
  padding-left: 20px;
  padding-top: 40px;
}
.my-projects-title {
  text-decoration: underline;
  color: var(--pink-lighter-color);
  font-size: var(--h2-size);
  font-weight: 600;
  margin-bottom: 0px;
  margin: 50px auto;
}
p {
  font-size: var(--p-size-2);
  color: var(--gray-light);
}
.yogurt-app-img,
.weather-app-1-img,
.weather-app-2-img,
.weather-app-3-img {
  display: block;
  margin: 0 auto;
  margin-top: 100px;
}
.yogurt-app-img {
  padding: 20px;
  display: block;
  margin: 0 auto;
}
.yogurt-title,
.weather-app-1-title,
.weather-app-2-title,
.weather-app-3-title {
  color: var(--accent-color-pink);
  font-size: var(--h3-size);
}

.weather-app-1-text,
.weather-app-2-text,
.weather-app-3-text {
  padding: 80px 30px;
  margin-bottom: 0px;
  font-size: var(--h4-size);
}
.yogurt-text {
  font-size: var(--h4-size);
  padding: 40px 30px;
  margin-top: 20px;
  margin-bottom: 0px;
}
.launch-link {
  text-decoration: none;
}
.launch-yogurt,
.launch-weather-app-1,
.launch-weather-app-2,
.launch-weather-app-3 {
  margin: 0px auto;
  padding: 30px 50px;
  color: #000000;
  font-size: var(--h5-size);
  font-weight: 500;
  background-color: var(--pale-white);
  border-radius: 20px;
  display: block;
}
.launch-yogurt:hover,
.launch-weather-app-1:hover,
.launch-weather-app-2:hover,
.launch-weather-app-3:hover {
  background-color: var(--accent-color-pink);
}

.contact-me-section {
  text-align: center;
}
.contact-me-title {
  text-decoration: underline;
  color: var(--pink-lighter-color);
  font-size: var(--h2-size);
  font-weight: 600;
  margin-top: 150px;
  margin-bottom: 50px;
}
.link-section {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.instagram,
.github,
.behance,
.facebook,
.linkedin,
.youtube {
  color: var(--primary-color);
  opacity: 0.5;
  font-size: var(--h4-size);
  text-decoration: none;
}
.instagram:hover,
.github:hover,
.behance:hover,
.facebook:hover,
.linkedin:hover,
.youtube:hover {
  color: var(--accent-color);
  opacity: 1;
}
.email,
.phone {
  color: var(--primary-color);
  font-size: var(--h3-size);
  text-decoration: none;
}

.email:hover,
.phone:hover {
  color: var(--accent-color);
}
.icon {
  margin-top: 15px;
}
.email-row,
.phone-row,
.link-row {
  margin: 40px auto;
}
.phone-icon,
.email-icon {
  padding-bottom: 20px;
  opacity: 0.5;
}
.rights {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .img-logo {
    width: 130px;
  }
  .greeting {
    font-size: 46px;
  }
  .valentina-rapunzel {
    font-size: 62px;
  }
  .graphic-designer {
    font-size: 28px;
  }
  /* About me page  */
  .from-ukraine {
    font-size: 36px;
  }
  .avatar {
    margin: 30px auto;
  }
  .text {
    font-size: 24px;
  }
  .yogurt-title,
  .weather-app-1-title,
  .weather-app-2-title,
  .weather-app-3-title {
    font-size: 36px;
  }
  .yogurt-text,
  .weather-app-1-text,
  .weather-app-2-text,
  .weather-app-3-text {
    font-size: 24px;
  }
  .launch-yogurt,
  .launch-weather-app-1,
  .launch-weather-app-2,
  .launch-weather-app-3 {
    font-size: 18px;
    padding: 20px 30px;
  }
  .contact-me-title {
    margin-top: 40px;
    margin-bottom: 30px;
  }
  .email-row,
  .phone-row,
  .link-row {
    margin: 0 auto;
  }
  a.phone,
  a.email {
    font-size: 22px;
  }

  .icon {
    font-size: 40px;
  }
  .phone-icon,
  .email-icon {
    font-size: 20px;
  }
  .rights {
    margin-top: 20px;
  }
}