:root {
  --textcolor: #000; /* #fff */
  --textcolor1: #fff; /* #000 */
  --mainbg: #fdfdfd; /* #141C25 */
  --secondarybg: #d4d7e7;
  --headerbg: #000000;
  --navbg: #000000;
  --link: #fff;
  --link1: #d4d7e7;
  --link2: #000;
  --linkhover: #000000;
  --linkbghover: #d4d7e7;
  --emphasis: #2e2e2e;
  --barcolor: #ffffff;
  --description: #0c0c0c;
  --border: #444444;
}
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--textcolor);
  background-color: var(--mainbg);
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgb(192, 192, 192) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(192, 192, 192) 1px, transparent 1px);
}



/* NAVIGATION */
header {
  background-color: var(--headerbg);
  padding: 0 5rem;
  height: 8rem;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  pointer-events: none;
}
.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding-bottom: 2rem;
}
.nav-item {
  display: flex;
  align-items: center;
  font-size: 2rem;
  list-style: none;
  text-align: center;
}
.nav-link {
  padding: 1rem;
  transition: 0.2s ease;
}
.nav-link:hover, .nav-link:focus {
  color: var(--linkhover);
  background-color: var(--linkbghover);
}
.nav-social {
  font-size: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
nav a {
  text-decoration: none;
  color: var(--link);
}
.current-page {
  color: var(--linkhover);
  background-color: var(--linkbghover);
}
  /* navigation hamburger design */
  .mobile-menu {
    display: none;
    cursor: pointer;
  }
  .bar {
    display: block;
    width: 25px;
    height: 4px;
    margin: 4px auto;
    background-color: var(--barcolor);
    transition: 0.5s ease-in-out;
  }
    /* show hamburger in mobile */
    @media only screen and (max-width: 600px) {
      .mobile-menu {
        display: block;
      }
      .mobile-menu.active .bar:nth-child(2) {
        opacity: 0;
      }
      .mobile-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
      }
      .mobile-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
      }

      .nav-menu {
        position: fixed;
        pointer-events: none;
        opacity: 0;
        top: 5rem;
        left: 0;
        width: 100%;
        padding: 2rem 4rem;
        background-color: var(--navbg);
        flex-direction: column;
        border-radius: 0 0 2rem 2rem;
        transition: 0.4s;
        z-index: -1;
      }
      .nav-link {
        width: 50vw;
      }
      .nav-menu.active {
        top: 8rem;
        opacity: 100;
        pointer-events: unset;
      }
    }



/* HOME */
main {
  padding-top: 7rem;
  margin: 7rem 4rem;
}
.wrapper-container.extra-height {
  margin: auto auto 50rem;
}
.full-height {
  margin: auto auto 30rem;
}
.person-name {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 7rem;
  text-shadow: 0.2rem 0.2rem 0.2rem gray;
}
.short-bg-info {
  margin: 1rem 0 2rem;
  font-size: 2rem;
  line-height: 2.7rem;
}
.emp {
  text-decoration: 0.4rem underline var(--emphasis);
}
.large-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.large-img {
  pointer-events: none;
  border-radius: 50%;
  border: 0.2rem solid #ffffff;
  animation: glow 2s infinite alternate;
  transition: 2s ease-in-out;
}



/* FOOTER */
footer {
  position: relative;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--navbg);
  width: 100%;
  height: 5rem;
  padding: 0 5rem;
  font-size: 1.2rem;
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.copy {
  color: var(--textcolor1);
}
.webmaster {
  padding: 0.8rem;
  border: 0.1rem solid #ffffff;
  border-radius: 1rem;
  text-decoration: none;
  color: var(--link);
  transition: 0.4s ease-in-out;
  box-shadow: inset 0 0 0 0 var(--link);
}
.webmaster:focus, .webmaster:hover {
  color: var(--linkhover);
  box-shadow: inset 400px 0 0 0 var(--link);
}



/* PROJECTS */
.page-title {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 4rem;
}
.project-intro {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  line-height: 2.4rem;
}
.project-subheading {
  color: var(--description);
  font-size: 1.4rem;
  margin: 1rem 1rem 2rem;
  letter-spacing: 0.2rem;
  line-height: 2rem;
}
.iframe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 2rem auto 7rem;
}
.iframe-tiles {
  width: fit-content;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
iframe {
  border-radius: 0.7rem;
  aspect-ratio: 16 / 9;
  width: 300px;
  height: auto;
  margin: 2rem;
}
.iframe-info {
  margin: 1rem 4rem;
}
.iframe-title {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
  text-decoration: 0.4rem underline var(--emphasis);
}
.iframe-description {
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  margin-top: 1rem;
  line-height: 2rem;
}
.testimonials {
  margin: 4rem auto 7rem;
}
.testimonials-title {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
  text-align: center;
}
.testimonials-container {
  position: relative;
  margin-top: 1rem;
}
.small-pfp {
  aspect-ratio: 1 /1;
  width: 60px;
  border-radius: 50%;
  position: absolute;
  top: -1.5rem;
  right: -2.4rem;
  box-shadow: 0 0 1rem #000000;
}
.testimonial-img {
  border-radius: 1rem;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 1rem auto;
  border: 0.2rem solid #ccc;
}
.whyme {
  margin-top: 4rem;
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
}
.whyme-description {
  color: var(--description);
  font-size: 1.4rem;
  margin: 1rem 1rem 2rem;
  letter-spacing: 0.2rem;
  line-height: 2rem;
}



/* ABOUT */
.large-sqr-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.large-sqr-img {
  pointer-events: none;
  border-radius: 10%;
  border: 0.2rem solid #ffffff;
  animation: glow 2s infinite alternate;
  transition: 2s ease-in-out;
}
.about-name {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
}
.about-description {
  color: var(--description);
  font-size: 1.4rem;
  margin: 1rem 1rem 2rem;
  letter-spacing: 0.2rem;
  line-height: 2rem;
}
.link {
  color: var(--link2);
  text-decoration: 0.2rem underline var(--emphasis);
}



/* CONTACT */
.social-list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.social-links {
  font-size: 4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.social-links a {
  text-decoration: none;
  color: var(--link2);
}





/* SCREEN SIZE: FOR TABLETS */
@media only screen and (min-width: 600px) {
  /* NAVIGATION */
  .nav-menu {
    gap: 0.7rem;
    padding-bottom: 0;
  }
  .nav-item {
    font-size: 1.4rem;
  }


  /* HOME */
  .wrapper-container {
    width: 80%;
    max-width: 80rem;
    border: 0.2rem solid var(--border);
    border-radius: 1rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
  }
  iframe {
    width: 100%;
  }
  hr {
    display: none
  }



  /* PROJECTS */
  .testimonial-img {
    border-radius: 1rem;
    aspect-ratio: 16 / 9;
    width: 500px;
    height: auto;
    margin: 1rem auto;
    border: 0.2rem solid #ccc;
  }
}










@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
@keyframes glow {
  from {
    box-shadow: 0 0 -2rem #000;
  }
  to {
    box-shadow: 0 0 2rem #000;
  }
}