:root {
   /* Colors */  
  --primary-color: #e7e7e7;     /* 60% */
  --secondary-color: #000000e6;   /* 30% */
  --accent-color: #7e8c7e;      /* 10% */
  --personal-color: #d1a90a;

  --color-bg-alt: linear-gradient(180deg, #F0E9E9 55%, #D1A90A 100%);
  --color-bg-bw:linear-gradient(135deg, #f5f7fa 0%, #07090b 100%);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;

  /* Typography */
  --font-sans: 'Onest-Bold', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;

  /* Layout */
  --container-max: 1200px;
  --border-radius: 0.5rem;
  --border-radius-lg: 1rem;

  /* Transitions */
  --transition: all 0.3s ease;
}

@font-face {
  font-family: 'Onest-Bold';
  src: url('/font/Onest-Bold.ttf') format('truetype');
}


@keyframes sizeChange{ 
  0%{transform:scale(1.0);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1.0);}
}

@keyframes colorChange{
  0%{color:var(--primary-color);}
  100%{color: var(--accent-color);}
}

@keyframes gradientShift {
  0% { background-position: 0% }
  100% { background-position: 100% }
}

.popup{
  animation: sizeChange 1s infinite;
}

.popup-notification{
  animation: sizeChange 0.5s 1;
}



*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Onest-Bold', sans-serif;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  position: relative;
}

section{
  padding-bottom: var(--spacing-lg);
  padding-top: var(--spacing-lg);
}


header {
  background-color:var(--secondary-color);
  padding-top: 1rem;
}

.logo{
  align-self: center;
}

.logo img{
  width: 10vw;
  height: 10vw;
}

#intro {
  text-align: center;
  background-color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 3px solid var(--personal-color);
  border-radius: 20px;
  margin: 20px auto 20px;
  width: 70%;
}

.hero-subtitle{
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
  opacity: 0.95;
}

.btn{
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  background-color: var(--primary-color);
  color: var(--accent-color);
}

.btn:hover{
  background-color: var(--personal-color);
  color: var(--primary-color);
  box-shadow: 0 4px 6px rgb(226, 221, 221);
}

.viewmywork{
  background-color:var(--primary-color);
  color: var(--accent-color);
  box-shadow: 0 4px 6px rgba(168, 2, 2, 0.2);
}

.viewmywork:hover{
  background-color: var(--personal-color);
  color: var(--primary-color);
  box-shadow: 0 4px 6px rgb(226, 221, 221);
}

.section-title{
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.about-container{
  display: grid;
  margin-bottom: var(--spacing-xs);
}

.coloredtext{
  color:#d1a90a;
}

.aboutflextext{
  padding: var(--spacing-xs);
  grid-row: 2;
  text-align: center;
}

.gallery {
  display: flex;
  gap: 1rem;
  width: 80vw;
  justify-content: space-around;
  margin: 0 auto;
}

.thumbnail {
  width: 25vw;
  cursor: pointer;
  border: 2px solid #cbcbcb;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #000000,
  -5px -5px 10px #373c3f;
}

#fullbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #d1a90a80;
  justify-content: center;
  align-items: center;
}

#fullbox img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px;
}

#fullbox img :hover{
  transform: translateY(-4px);
  border: 2px solid rgb(234, 234, 161);
}

#close {
  position: absolute;
  top: 20px; right: 40px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}


#Photo{
  width: 50%;
  height: auto;
  border-radius: 10px;
  grid-row: 1;
  justify-self: center;
}

.addedforbutton{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 90vw;
  max-width: 1000px;
  background-color: var(--secondary-color);
  margin: 0 auto;
  padding: var(--spacing-md);
  border-radius: var(--font-size-xl);
  border:3px solid var(--personal-color);
}

.socialsbutton{
  background-color: var(--primary-color);
  color: var(--accent-color);
}

.socialsbutton:hover{
  background: var(--personal-color);
  color: var(--primary-color);
  box-shadow: 0 4px 6px rgb(226, 221, 221);
}

.easteregg{
  display: none;
}

.revealed{
    display: block;
    animation: colorChange 2s infinite, sizeChange 2s infinite;
}

#skill-section {
  scroll-margin-top: 350px
}


.skills-title{
  text-align: center;
  margin-bottom:var(--spacing-md)
}

#skills-text{
  color:#d1a901; 
  justify-content: center;
  display: flex;
  font-size:5vh;
}

.grid-limiter{
  width: 90vw;
  max-width: 1000px;
  margin: 0 auto;
}

.skills_gridcontainer {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 2rem;
    background-color: var(--secondary-color);
    padding: 20px 0;
  border: 3px solid var(--personal-color);
  border-radius: 20px;
}

.skill-icon{
  width: 20%;
  height: auto;
}


.skills_item {
  padding: 0.5em;
  font-weight: 700;
  color: var(--primary-color);
  text-align: center;
}


.skills_item-1{
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
}

.skills_item-2{
      grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 1;
}

.skills_item-3{
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 1;

}

.skills_item-4{
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-row-start: 4;
}

.skills_item-5{
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 4;
}

.skills_item-6{
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 4;
}

.work-grid-limiter{
  width: 90vw;
  max-width: 1000px;
  margin: var(--spacing-sm) auto;
}

.work-gridcontainer {
  display: flex;
  flex-direction: column;
}

.works_item{
  text-align: center;
  margin-bottom: var(--spacing-sm);
}
    
.works_item-1 {
    grid-row: span 3 / span 3;
}

.works_item-2 {
    grid-row: span 3 / span 3;
}

.works_item-3 {
    grid-row: span 3 / span 3;
}

.card {
    background-color: var(--secondary-color);
    border: 1px solid var(--personal-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    transition: var(--transition);
}

.card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px white;
  border: 2px solid var(--personal-color);
}

.card-content {
  padding: var(--spacing-md) 0 0;
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  text-align: left;
}

.work-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--border-radius);
  background-color: var(--color-bg-alt);
}

.project-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-weight: 500;
  background:var(--color-bg-bw);
  
}

.image1{
  background-image: url(img/project1-image.webp);
  background-size:100%;
}

.image2{
background-image: url(img/project2-image.webp);
background-size: 100%;
}

.image3{
background-image: url(img/project3-image.webp);
background-size: 100%;
}

.text-body {
  color: var(--color-text);
  text-align: left;
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: bold;
}

a:hover{
  color: var(--personal-color);
}


#hamburger {
  border: 1px solid white;
  height: 3rem;
  width: 3rem;
  margin: 1rem auto;
  margin-top: 0px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.hamline {
  width: 80%;
  height: 2px;
  margin: 4px 0;
  background-color: white;
}

#mobileMenu {
  background-color: var(--secondary-color);
  color: white;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

#desktopMenu {
  display: none;
}

.menuItem {
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  margin: 1rem 0;
  color: white;
}



.menuItem:hover{
  color: var(--personal-color);
}

#Resume-Photo{
  width: 30%;
  height: auto;
  border-radius: 10px;
  margin: 0 auto;
}

.resume-limiter{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 1000px;
  background-color: var(--secondary-color);
  margin: 0 auto;
  padding: var(--spacing-sm);
  border-radius: var(--font-size-xl);
  border:3px solid var(--personal-color);
}

.resume-container{
  display: grid;
  margin-bottom: var(--spacing-xs);
  gap: 5%;
  text-align: center;
  width:70vw;
}

.resume-text{
  background-image:linear-gradient(#eae2c2,#d1a90a);
  color: transparent;
  background-clip: text;font-size:250%;
  padding-bottom: var(--spacing-sm);
}

.textandbutton{
  display:flex;
  align-self: center;
  flex-direction:column;
  text-align: center;
}

.download-btn{
  padding: var(--spacing-sm) var(--spacing-3xl);
}

.confetti{
  display:none;
  width:20%;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-top: 8px;
}


.contact-parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 8px;
}

.contact-icon{
  width: 10%;
  height: auto;
}

.copy-number{
  cursor: pointer;
}

.copy-notification{
  font-size: var(--font-size-sm);
  display: none;
  position: absolute;
  bottom: 5%;
  right: 30px;
  width: fit-content;
  height: auto;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  box-shadow: 5px 5px 10px #000000,
  -5px -5px 10px #373c3f;
}

#footer{
  padding: 0;
}

hr 
{background-color:#d1a90a;
  height:3px;
  border: none;
}

.footerflexparent{
  display: flex;
  justify-content: center;
}

.footerflexchild{
  width: 30vw;text-align: center;
}




/* Desktop styles */
@media (min-width: 651px) {

header {
  padding-top: 0;
  width: 90%;
  margin: 0 auto;
  border:1px solid var(--personal-color);
  border-radius: 5px;
  align-self:flex-start;
}

.menuItem:nth-child(5){
  margin: 1rem 0.5% 1rem 5%;
}

#hamburger,
#mobileMenu {
    display: none;
  }

.logo{
  margin-right: auto;
  padding-left: 0.5%;
  padding-right: 1%;
  display: block;
}

.logo img{
  width: 5vw;
  height: 5vw;
}

#desktopMenu {
    display: flex;
    justify-content: space-around;
  }

.about-container{
  display: flex;
  margin-bottom: var(--spacing-xs);
}

.thumbnail{
  width: 150px;
}

.works_item{
  text-align: center;
  margin-bottom: 0;
}

.work-gridcontainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 2%;
}

#Photo{
  width: 25%;
  height: 25%;
  border-radius: 10px;
}


.aboutflextext{
  text-align: left;
}

  #intro-text:hover .easteregg{
    display: block;
    animation: colorChange 2s 5, sizeChange 2s 3;
  }



  .skill-icon:hover{
  animation: sizeChange 1s ease-in-out infinite;
}



  .menuItem {
  justify-content: center;
  font-size: 1.5rem;
  margin: 1rem 5%;
  color: white;
  align-self: center;
}

  .skill-icon{
  width: 15%;
  height: auto;
}

.works_item-1 {
    grid-row: span 3 / span 3;
}

.works_item-2 {
    grid-row: span 3 / span 3;
}

.works_item-3 {
    grid-row: span 3 / span 3;
}

#Resume-Photo{
  width: 30%;
  height: auto;
  border-radius: 10px;
}

.contact-icon{
  width: 5%;
  height: auto;
}

.copy-notification{
  bottom: 7%;
}

}