/* General */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
   margin: 0;
   padding: 0;
}

body {
   font-family: "Poppins", sans-serif;
}

html {
   scroll-behavior: smooth;
}

.bg-img1, .bg-img2{
   display: block;
   position: fixed;
   height: 7vh;
   top: 5vh;
   left: 4vw;
}

.bg-img2 {
   opacity: 0;
}

p {
   color: rgb(85, 85, 85)
}

/* Transition */
a, .btn {
   transition: all 300ms ease;
}

/* Nav Desktop */

nav, .nav-links {
   display: flex;
}

nav {
   justify-content: space-around;
   align-items: center;
   height: 17vh;
}

.nav-links {
   gap: 2rem;
   list-style: none;
   font-size: 1.5rem;
}

a {
   color: black;
   text-decoration: none;
   text-decoration-color: white;
}

a:hover {
   color: grey;
   text-decoration: underline;
   text-underline-offset: 1rem;
   text-decoration-color: rgb(181,181,181);
}

.logo {
   font-size: 2rem;
}

.logo:hover {
   cursor: default;
}

/* Hamburger Nav */
#nav-mobile {
   display: none;
}

.hamburger-menu {
   position: relative;
   display: inline;
}

.hamburger-icon {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 24px;
   width: 30px;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
}

.hamburger-icon span{
   width: 100%;
   height: 2px;
   background-color: black;
   transition: all 0.3s ease-in-out;
}

.hamburger-links {
   position: absolute;
   top:100%;
   right: 0;
   background-color: white;
   width: fit-content;
   max-height: 0;
   overflow: hidden;
   transition: all 0.3 ease-in-out;
}

.hamburger-links a {
   display: block;
   padding: 10px;
   text-align: center;
   font-size: 1.5rem;
   color: black;
   text-decoration: none;
   transition: all 0.3 ease-in-out;
}

.hamburger-links li {
   list-style: none;
}

.hamburger-links.open {
   max-height: 300px;
}

.hamburger-icon.open{
   transform: rotate(180deg);
}

.hamburger-icon.open span:first-child{
   transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.open span:nth-child(2){
   opacity: 0;
}

.hamburger-icon.open span:last-child{
   transform: rotate(-45deg) translate(10px, -5px);
}

/* Sections */
section {
   padding-top: 4vh;
   height: 96vh;
   margin: 0 10rem;
   box-sizing: border-box;
   min-height: fit-content;
}

.section-container {
   display: flex;
}

/* Profile Section */
#profile {
   display: flex;
   justify-content: center;
   gap: 5rem;
   height: 80vh;
}

.section__pic-container {
   display: flex;
   height: 400px;
   width: 400px;
   margin: auto 0;
}

.profile-pic {
   border-radius: 50%;
}

.section__text {
   align-self: center;
   text-align: center;
}

.section__text p {
   font-weight: 600;
}

.section__text__p1 {
   text-align: center;
}

.section__text__p2 {
   font-size: 1.75rem;
   margin-bottom: 1rem;
   overflow: hidden;
}

.title {
   font-size: 3rem;
   text-align: center;
   overflow: hidden;
}

#socials-container {
   display: flex;
   justify-content: center;
   margin-top: 1rem;
   gap: 1rem;
   height: 2rem;
}

.title > span, .section__text__p2 > span {
   display: block;
   animation: 1s ease-in-out slideUp;
}

.title > span {
   animation-delay: 0s;
   animation-fill-mode: forwards;
}

.section__text__p2 > span {
   animation-delay: 0.25s;
   animation-fill-mode: both;
}

@keyframes slideUp {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   /* 50% {
      transform: translateY(50%);
      opacity: 0.5;
   } */
      
   100% {
      transform: translateY(0);
      opacity: 1;
      
   }
}

/* Icons */
.icon {
   cursor: pointer;
   height: 2rems;
}

/* Buttons */
.btn-container {
   display: flex;
   justify-content: center;
   gap: 1rem;
}

.btn {
   font-weight: 600;
   transition: all 300ms ease;
   padding: 0.75rem;
   width: 8rem;
   border-radius: 2rem;
}

.btn-color-1, .btn-color-2 {
   border: rgb(53, 53, 53) 0.1rem solid;

}

.btn-color-1:hover, .btn-color-2:hover {
   cursor: pointer;

}

.btn-color-1, .btn-color-2:hover {
  background: rgb(53, 53, 53);
  color: white;
}

.btn-color-1:hover {
  background: rgb(0, 0, 0);
}

.btn-color-2 {
  background: none;
}

.btn-color-2:hover {
  border: rgb(255, 255, 255) 0.1rem solid;
}

/* About Section */

#about {
   position: relative;
}

.about-containers {
   gap: 2rem;
   margin-bottom: 2rem;
   margin-top: 2rem;
}

.about-details-container {
   justify-content: center;
   flex-direction: column;
}

.about-containers, .about-details-container {
   display: flex;
   justify-content: center;
}

.about-pic {
   border-radius: 50%;
}

.arrow {
   position: absolute;
   right: -5rem;
   bottom: 2.5rem;
}

.details-container {
   padding: 1.5rem;
   flex: 1;
   background: white;
   border-radius: 2rem;
   border: rgb(53, 53, 53) 0.1rem solid;
   border-color: rgb(163, 163, 163);
   text-align: center;
}

.section-container {
   gap: 4rem;
   height: 80%;
}

.icon {
   height: 32px;
}

@media (prefers-reduced-motion: no-preference){
   .about-pic {
      scale: 0.8;
      opacity: 0.2;
      animation: fade-in linear;
      animation-timeline: view();
      animation-range-start: cover;
      animation-range-end: 50vh;
      animation-fill-mode: forwards;
   }

   @keyframes fade-in {
      to {scale: 100%; opacity: 100%;};
   }
}

/* Experience Section */

#experience {
   position: relative;
}

.experience-sub-title {
   color: rgb(85, 85, 85);
   font-weight: 600;
   font-size: 1.75rem;
   margin-bottom: 2rem;
}

.experience-details-container {
   display: flex;
   justify-content: center;
   flex-direction: column;
}

.article-container {
   display: flex;
   text-align: initial;
   flex-wrap: wrap;
   flex-direction: row;
   gap: 2.5rem;
   justify-content: space-around;
}

article {
   display: flex;
   width: 10rem;
   justify-content: left;
   gap: 0.5rem;
}

article .icon {
   cursor: default;
}

/* Projects Section */

#projects {
   position: relative;
}

.color-container {
   border-color: rgb(163, 163, 163);
   background: rgb(250, 250, 250);
}

.project-img {
   border-radius: 2rem;
   width: 90%;
   height: 90%;
}

.project-title {
   margin: 1rem;
   color: black;
}

.project-btn {
   color: black;
   border-color: rgb(163, 163, 163);
}

.project-description {
   margin: 1rem;
}

/* Contact Section */

#contact {
   display: flex;
   justify-content: center;
   flex-direction: column;
   height: 70vh;
}

.contact-info-upper-container {
   display: flex;
   justify-content: center;
   border-radius: 2rem;
   border: rgb(53, 53, 53) 0.1rem solid;
   border-color: rgb(163, 163, 163);
   background-color: rgb(250, 250, 250);
   margin: 2rem auto;
   padding: 0.5rem;
}

.contact-info-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   margin: 1rem;
}

.contact-info-container {
   font-size: larger;
}

.contact-icon {
   cursor: default;
   height: 2rem;
}

/* Footer */

footer {
   height: 26vh;
   margin: 0 1rem;
}

footer p {
   text-align: center;
}