/* main section */
:root {
  --backgroundColor: #171818;
  --gradientColor1: #f2c94c;
  --gradientColor2: #f2994a;
}

body {
  background-color: var(--backgroundColor);
  margin: 0;
  padding: 0;
}

p {
  font-family: "Google Sans", monospace;
  color: white;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--backgroundColor);
  font-family: "Google Sans", monospace;
  color: white;
}
/* end main section */

/* animations section */
@keyframes fadeIn {
  from {
    transform: translateY(1.25rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes move-bg {
  to {
    background-position: var(--bgSize) 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #gradientText {
    animation: move-bg 5s linear infinite;
  }
}

/* navbar/logo section */
#navbar {
  display: flex;
  align-items: center;
  padding: 0.625rem;
}

#logo {
  border-radius: 15%;
  width: 6.25rem;
  height: 6.25rem;
  transition: all 0.25s ease-in-out;
}

#logo:hover {
  transform: scale(1.1);
}
/* end navbar/logo section */

/* intro section */
#intro {
  display: grid;
  place-items: center;
  padding-top: 30vh;
}

#introText {
  font-size: 3.25rem;
  font-weight: 700;
  margin: 0;
}

#gradientText {
  animation: move-bg 5s ease-in-out infinite;
  --bgSize: 400%;
  background: linear-gradient(
      90deg,
      var(--gradientColor1),
      var(--gradientColor2),
      var(--gradientColor1)
    )
    0 0 / var(--bgSize) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  will-change: background-position;
  font-size: 3.25rem;
  font-weight: 700;
  margin: 0;
}

#quoteText {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}
/* end intro section */

/* language section */
#languageSection {
  width: 100%;
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 24rem;
}

.languageCard {
  border: 0.063rem solid var(--gradientColor1);
  border-radius: 1.25rem;
  padding: 0.625rem;
  transition: transform 0.3s ease, border-width 0.5s ease;
}

.languageCard:hover {
  transform: scale(1.1);
}

.languageName {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  font-family: "Google Sans", monospace;
  color: white;
}

.languageImage {
  height: 9.375rem;
  width: 9.375rem;
}

.languageExperience,
.languageYears {
  font-size: 1.25rem;
  text-align: center;
  font-family: "Google Sans", monospace;
  color: white;
}
/* end language section */

/* projects section */
#projectsSection {
  width: 100%;
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 24rem;
}

.projectCard {
  border: 0.063rem solid var(--gradientColor1);
  border-radius: 1.25rem;
  height: 300px;
  width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, border-width 0.5s ease;
}

.projectCard:hover {
  transform: scale(1.1);
}

.projectName {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 1rem;
  font-family: "Google Sans", monospace;
  color: white;
}

.projectImage {
  height: 175px;
  width: 350px;
  border: 2px solid var(--gradientColor2); /* Add a border */
}

.projectDescription {
  font-family: "Google Sans", monospace;
  color: white;
}
/* end projects section */

/* misc section */
#spacer {
  height: 70vh;
  visibility: hidden;
}

.hidden {
  opacity: 0;
  transition: opacity 1.5s;
}

.show {
  opacity: 1;
}
/* end misc section */