/* Variables */
:root {
  --large-large_screen-font-size: 4rem;
  --medium-large_screen-font-size: 3rem;
  --small-large_screen-font-size: 1.3rem;


  --large-medium_screen-font-size: 3rem;
  --medium-medium_screen-font-size: 2rem;
  --small-medium_screen-font-size: 1.15rem;


  --large-small_screen-font-size: 2rem;
  --medium-small_screen-font-size: 1rem;
  --small-small_screen-font-size: 1rem;

  --super_small-font-size: 0.9rem;
}



/* @! Reset and Global Styles */
/* Apply box-sizing and set default font-family */
* {
  box-sizing: border-box;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Remove default margin and padding, set full height and width */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}




/* @! Layout Styles */
/* Main container with full viewport height and hidden horizontal overflow */
.main {
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
}

/* Content area with absolute positioning and auto vertical overflow */
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Wrapper for content with centered alignment and margins */
.content-wrapper {
  align-items: center;
  height: 100%;
  width: 100%;

}




/* @@ Page Content Scrollbar */
/* Custom scrollbar width */
.content::-webkit-scrollbar {
  width: 12px;
}

/* Custom scrollbar track styling */
.content::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #e7e7e7;
  border: 1px solid #cacaca;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

/* Custom scrollbar thumb styling */
.content::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #363636;
}




/* @! Backpage Styles */
/* Fullscreen backdrop with gradient animation */
.backpage {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: #e9eff0;
  overflow-y: hidden;
  background: linear-gradient(167deg, #8c6d47, #f6eae8, #c9c8cc, #c8e8e3, #f2f285);
  background-size: 1000% 1000%;
  -webkit-animation: AnimationName 16s ease infinite;
  -moz-animation: AnimationName 16s ease infinite;
  -o-animation: AnimationName 16s ease infinite;
  animation: AnimationName 16s ease infinite;
}




/* @@ Keyframes */
/* Keyframes for gradient animation */
@-webkit-keyframes AnimationName {
  0% { background-position: 49% 0%; }
  50% { background-position: 52% 100%; }
  100% { background-position: 49% 0%; }
}

@-moz-keyframes AnimationName {
  0% { background-position: 49% 0%; }
  50% { background-position: 52% 100%; }
  100% { background-position: 49% 0%; }
}

@-o-keyframes AnimationName {
  0% { background-position: 49% 0%; }
  50% { background-position: 52% 100%; }
  100% { background-position: 49% 0%; }
}

@keyframes AnimationName {
  0% { background-position: 49% 0%; }
  50% { background-position: 52% 100%; }
  100% { background-position: 49% 0%; }
}

/* Keyframes for growing line animation */
@keyframes growLine {
  from { height: 0; }
  to { height: 300px; }
}





/* @! Footer Styles */
/* Footer with centered text and padding */
footer {
  color: black;
  bottom: 0;
  width: 100vw;
  height: 20vh;
  /* position: relative; */
  font-size: var(--super_small-font-size);
}

/* Flex container for footer content */
.footer-content {
  display: flex;
  justify-content: space-between;
  margin-left: 15vw;
  margin-right: 30vw;
}

.other-links {
  display: flex;
  gap: 4vw;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.footer-column a {
    text-decoration: none;
    color: black;
}

.footer-column a:hover {
    text-decoration: underline;
}



/* @! Info Styles */
/* Large info text with transition */
.info1 {
  font-size: var(--large-large_screen-font-size);
  font-weight: normal;
  display: block;
  margin-bottom: 20px;
  position: relative;
  transform: translateY(-3px);
  transition: 0.5s ease-in;
}

/* Smaller info text with transition */
.info2 {
  font-size: var(--medium-large_screen-font-size);
  font-weight: lighter;
  display: block;
  opacity: 0;
  position: relative;
  transform: translateY(-3px);
  transition: 0.5s ease-in;
}

/* Flex container for info block */
.info-block {
  flex: 1;
}




/* @! Avatar Styles */
/* Flex container for avatar with fixed positioning */
.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 50px;
}

/* Avatar head with transition */
.avatar-head {
  position: relative;
  width: 100%;
  height: auto;
  transform-origin: center bottom;
  transition: transform 1s ease;
}

/* Avatar body with absolute positioning */
.avatar-body {
  position: absolute;
  top: 120px;
  left: 10px;
  width: 100%;
  height: auto;
  z-index: -1;
}

/* Avatar image dimensions */
.avatar-image {
  width: 500px;
  height: 600px;
  vertical-align: top;
}

/* Fixed container for avatar */
.avatar-container {
  /* position: fixed; */
  /* left: 950px; */
  right: 5vw;
  z-index: 0;
  pointer-events: none;

}




/* @! Eye Styles */
/* Eye styling with absolute positioning */
.eye {
  position: absolute;
  width: 10px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
}

/* Left eye with transition */
.left-eye {
  position: absolute;
  left: 210px;
  top: 242px;
  transition: transform 0.7s ease;
}

/* Right eye with transition */
.right-eye {
  position: absolute;
  left: 332px;
  top: 242px;
  transition: transform 0.7s ease;
}

/* Left eyebrow with transition */
.left-eyebrow {
  position: absolute;
  left: 170px;
  top: 195px;
  width: 80px;
  height: 60px;
  transition: transform 1s ease;
}

/* Right eyebrow with transition */
.right-eyebrow {
  position: absolute;
  transition: transform 1s ease;
  left: 305px;
  top: 195px;
  width: 80px;
  height: 60px;
}

/* @! Projects Page */

.projects-content{
  position: relative;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  gap: 10vh;
  margin-top: 10vh;
  margin-bottom: 10vh;
}
/*
.project-tile{
  padding: 10px;
  position: relative;
  width: 100%;
  height: 75vh;
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  box-shadow: 
  rgba(0, 0, 0, 0.03) 0px 6px 10px -2px,
  rgba(0, 0, 0, 0.02) 0px 2px 4px -1px,
  inset rgba(0, 0, 0, 0.01) 0px 1px 2px;
  align-items: center;
}

.project-card{
  position: relative;
  width: 50%;
  height: 100%;
  border-radius: 20px;
}

.project-title{
  font-size: 2rem;
  font-weight: bold;
  color: black;

}

.project-card img{
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.project-icon{
  width: 50px;
  height: 50px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0.4s, transform 0.3s ease-out 0.4s;
}

.project-icons-container{
  position: absolute;
  top: 5vh;
  z-index: 1;
}

.project-showcase {
  position: absolute;
  width: 200px;
  height: 3px;
  top: 5vh;
  left: 5vw;
  z-index: 1;
  background-color: rgba(128, 128, 128, 0.1);;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.4s ease-in, transform 0.4s ease-out;
}

.project-card:hover ~ .project-icons-container .project-icon {
  opacity: 1;
  transform: translateY(-5.5vh);
}

.project-card:hover ~ .project-showcase {
  opacity: 1;
  visibility: visible;
  transform: translateX(-4vw);
}


.card-info{
  color: black;
  max-width: 40.9vw;
  position: absolute;
  top: 0;
  left: 51%;
}
*/

.tiles-row{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 1vh auto 0;
  width: 96%;
  height: 55vh;
}

.small-tile{
  width: 40%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 3.5vw;
  display: flex;
  justify-content: space-between;
  box-shadow: 
  rgba(0, 0, 0, 0.03) 0px 6px 10px -2px,
  rgba(0, 0, 0, 0.02) 0px 2px 4px -1px,
  inset rgba(0, 0, 0, 0.01) 0px 1px 2px;
}

.large-tile{
  width: 56%;
  height: 100%;

  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 3.5vw;
  box-shadow: 
  rgba(0, 0, 0, 0.03) 0px 6px 10px -2px,
  rgba(0, 0, 0, 0.02) 0px 2px 4px -1px,
  inset rgba(0, 0, 0, 0.01) 0px 1px 2px;
}

.large-tile a{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: pink;
}

/* @! Scroll Block Styles */
/* Scroll block with margins and color */
.scroll-block {
  margin-left: 25%;
  margin-top: 180px;
  color: #8c6d47;
  height: 400px;
}

/* Scroll text with transition */
.scroll-text {
  transition: 0.1s;
}

/* Scroll line with animation */
.scroll-line {
  border-left: 1px solid #8c6d47;
  height: 0;
  margin-top: 2vh;
  margin-left: 3%;
  position: relative;
  bottom: 0;
  animation: growLine 2s forwards;
}

/* @! Info Section 1 Styles */
/* Info section with margin and height */
.info-section {
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 1vh;
  height: 500px;
}

/* Section title with margin and font size */
.section-title {
  margin-bottom: 15px;
  font-size: 3.5rem;
  font-weight: bold;
  position: sticky;
}

/* Section content with margin and font size */
.section-content {
  margin-top: 15px;
  font-size: 1.3rem;
  font-weight: normal;
  text-align: justify;
  margin-left: 0.5vw;
}

/* @! Icons Styles */
/* LinkedIn icon */
.favicon{
}

.favicon-linkedin{
  width: 60px;
  height: 55px;
}

.favicon-linkedin:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

/* GitHub icon */
.favicon-github{
  width: 55px;
  height: 55px;
}

.favicon-github:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

/* Email icon */
.favicon-email{
  width: 60px;
  height: 53px;
  margin-left: 20px;
}

.favicon-email:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

.favicon-container{
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 2vw;
}

/* @! Navigation Styles */
/* Navigation block with fixed positioning and flex layout */
.navigation-block {
  width: 100%;
  height: 60px;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

/* Navigation element with margins and transition */
.navigation-element {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 50px;
  height: 60px;
  width: 70px;
  transition: background-color 0.3s ease;
}

/* Active indicator with transition */
.active-indicator {
  margin-top: 50px;
  position: absolute;
  height: 80%;
  background-color: white;
  border-radius: 35px;
  transition: left 0.2s ease-in, width 0.2s ease-in;
  opacity: 1;
  z-index: -1;
}

/* Navigation link styling */
.navigation-link {
  font-size: var(--small-large_screen-font-size);
  text-decoration: none;
  color: inherit;
}

/* Navigation decoration with transition */
.navigation-decoration {
  margin-top: 50px;
  position: absolute;
  opacity: 0;
}



/* xxs (fonts) */
@media (min-width: 350px) {

  /* .content-wrapper {
    margin-left: 0px;
    margin-right: 0px;
  } */



  .navigation-element {
    margin-left: 18px;
    margin-right: 18px;
    width: 37px;
  }

  .navigation-link {
    font-size: var(--small-small_screen-font-size);
  }


  .info-block {
    text-align: center;
    margin-top: 30px;
  }

  .info1 {
    font-size: var(--large-small_screen-font-size);
  }

  .info2 {
    font-size: var(--medium-small_screen-font-size);
  }

  .avatar-container {
    left: 1px;
    position: relative;
    margin-inline: auto;
    max-width: fit-content;
  }

  .avatar{
    position: relative;
    top: 0px;
  }

  .avatar-image {
    width: 300px;
    height: 350px;
  }

  .avatar-body{
    top: 60px;
    position: absolute;
  }
  
  .avatar-head{
    top:0px;
  }
  
  .eye{
    width: 5px;
    height: 6px;
  }

  .left-eye{
    left: 125px;
    top: 145px;
  }

  .right-eye{
    left: 200px;
    top: 145px;
  }

  .left-eyebrow{
    left: 100px;
    top: 112px;
    width: 50px;
    height: 40px;
  }

  .right-eyebrow{
    left: 180px;
    top: 112px;
    width: 50px;
    height: 40px;
  }

  .scroll-block{
    margin-top: 75px;
    font-size: var(--small-small_screen-font-size);
  }

  .section-title{
    font-size: var(--large-small_screen-font-size);
  }

  .section-content{
    font-size: var(--small-small_screen-font-size);
  }

  .favicon{
    transform: scale(0.7);
  }

  .favicon-email{
    margin-left: 0px;
    margin-right: 0.55vw;
  }

  .projects-content{
    margin-right:0px;
 }

 .card-info{
  font-size: var(--small-small_screen-font-size);
 }
 
 .projects-content{
  gap:0vh;
 }

 .tiles-row{
  display:flex;
  flex-direction: column;
  gap: 2vh;
  margin: 2vh auto 0;
  width: 92%;
 }

.small-tile{
  width: 100%;
}

.large-tile{
  width:100%;
}

.footer-content {
  margin-left: 5vw;
  margin-right: 5vw;
  font-size: var(--super_small-font-size);

}
.other-links{
gap:0.1vw;
}

.footer-column{
  gap: 0.5rem;
  font-size: var(--super_small-font-size);
}

}

/* xs */
@media (min-width: 475px) {

}

/* sm */
@media (min-width: 640px) {

}

/* md (fonts) */
@media (min-width: 768px) {
  .navigation-element {
    margin-left: 20px;
    margin-right: 20px;
    width: 48px;
  }

  .navigation-link {
    font-size: var(--small-medium_screen-font-size);
  }

  .info1 {
    font-size: var(--large-medium_screen-font-size);
  }

  .info2 {
    font-size: var(--medium-medium_screen-font-size);
  }

  .scroll-block{
    font-size: var(--small-medium_screen-font-size);
  }

  .section-title{
    font-size: var(--large-medium_screen-font-size);
  }

  .section-content{
    font-size: var(--small-medium_screen-font-size);
  }

  .favicon{
    transform: scale(0.9);
  }

  .projects-content{
    gap: 10vh;
  }
  
  .tiles-row{
    display: flex;
    flex-direction: row;
    gap: none;
    margin: 1vh auto 0;
    width: 96%;
  }

  .small-tile{
    width: 40%;
  }

  .large-tile{
    width:56%;
  }

  .footer-content{
    margin-left: 15vw;
    margin-right: 30vw;
    font-size: var(--small-medium_screen-font-size);

  }

  .other-links{
    gap: 4vw;
  }

  .footer-column{
    gap: 1rem;
    font-size: var(--small-medium_screen-font-size);

  }

}

/* lg */
@media (min-width: 1024px) {

  /* .content-wrapper {
    margin-left: 50px;
    margin-right: 50px;
  } */

  .info-block {
    margin-top: 150px;
    margin-left: 100px;
    text-align: left;
  }

  .avatar-container {
    position: fixed;
    left: 60vw;
    margin-inline: none;
    max-width: none;
  }

  .avatar{
    position: fixed;
    top: 7vh;
    }

  .avatar-image {
    width: 380px;
    height: 460px;
  }

  .eye{
    width: 8px;
    height: 13px;
  }

  .left-eye{
    left: 158px;
    top: 185px;
  }

  .right-eye{
    left: 253px;
    top: 185px;
  }

  .left-eyebrow{
    left: 126px;
    top: 146px;
    width: 70px;
    height: 51px;
  }

  .right-eyebrow{
    left: 228px;
    top: 146px;
    width: 70px;
    height: 51px;
  }

  .scroll-block{
    margin-top: 250px;
  }

  /* .projects-content{
    width: 94vw;
  } */

  .card-info{
    font-size: var(--small-medium_screen-font-size);
  }
}

/* xl (fonts) */
@media (min-width: 1280px) {
  .navigation-element {
    margin-left: 25px;
    margin-right: 25px;
    width: 59px;
  }

  .navigation-link {
    font-size: var(--small-large_screen-font-size);
  }

  .info1 {
    font-size: var(--large-large_screen-font-size);
  }

  .info2 {
    font-size: var(--medium-large_screen-font-size);
  }

  .avatar-image {
    width: 500px;
    height: 600px;
  }

  .avatar-body{
    top: 120px;
  }
  
  .eye{
    width: 10px;
    height: 15px;
  }

  .left-eye{
    left: 210px;
    top: 242px;
  }

  .right-eye{
    left: 332px;
    top: 242px;
  }

  .left-eyebrow
  {
    left: 170px;
    top: 195px;
    width: 85px;
    height: 60px;
  }

  .right-eyebrow
  {
    left: 305px;
    top: 195px;
    width: 85px;
    height: 60px;
  }

  .scroll-block{
    margin-top: 180px;
    font-size: var(--small-large_screen-font-size);
  }
  
  .section-title{
    font-size: var(--large-large_screen-font-size);
  }

  .section-content{
    font-size: var(--small-large_screen-font-size);
  }

  .favicon{
    transform: scale(1);
  }

  .card-info{
    font-size: var(--small-large_screen-font-size);
  }
}

/* 2xl */
@media (min-width: 1536px) {
  .navigation-element {
    margin-left: 30px;
    margin-right: 30px;
    width: 70px;
  }

}