@keyframes gradientShift{

  0%{

    background-position: 0% 50%;

  }

  50%{

    background-position: 100% 50%;

  }

  100%{

    background-position: 0% 50%;

  }

}

@keyframes pulse {
  
  0%{ 

    box-shadow: 0 0 6px rgba(0,255,255,0.3); 

  }
  
  50%{ 
    
    box-shadow: 0 0 12px rgba(0,255,255,0.6); 
  
  }
  100%{ 
    
    box-shadow: 0 0 6px rgba(0,255,255,0.3); 
  
  }


}



@keyframes drift{

  0%{

    transform: translateX(-50px);

  }


  100%{

    transform: translateX(calc(100vw + 50px));

  }

}


/*_______________________________________________________________________________________________________________________*/

body{

  margin: 0;

  background-color: #a78b6d;

  padding: 0;

}

img{

  max-width: 100px;

}

*{ 
  
  box-sizing: border-box; 

}



/*_______________________________________________________________________________________________________________________*/


.navbar{

  display: flex;
  
  /*Vertical*/
  align-items: center;

  /*Horizontal*/
  justify-content: center;

  position: sticky;

  /*Keep the navbar at the top of the screen*/
  top: 0;

  /*Keep the navbar above all content*/
  z-index: 1000;

  /*Go left to right*/
  background: linear-gradient(90deg, #2b2b2b, #3a6ea5, #00e5ff);

  /*Gives the animation room to slide*/
  background-size: 300% 300%;

  animation: gradientShift 20s ease infinite;

  min-height: 150px;

  margin: 0;

}


.navbar.scrolled{

  min-height: 50px;

}


@media(max-width: 980px){

  .navbar{

    flex-direction: column;

    padding-top: 70px;

  }

}

/*_______________________________________________________________________________________________________________________*/

.status-badge{

  text-shadow: 0 0 4px rgba(0,0,0,0.6);

  color: #f5f5f5;

  padding: 5px;

  /*Anchors to navbar*/
  position: absolute;

  top: 5px;

  left: 5px;

  font-size: large;

  border: 2px solid #8fbcd4;

  border-radius: 999px;

  animation: pulse 5s ease-in-out infinite;

}

@media(max-width: 980px){

  .status-badge{

    top: 5px;

    left: 50%;

    transform: translateX(-50%);

  }

}

/*_______________________________________________________________________________________________________________________*/

.banner{

  display: flex;

  /*Vertical*/
  align-items: center;

  /*Horizontal*/
  justify-content: center;

  flex-direction: column;

  gap: 5px;

}

.banner h1{

  color: #f5f5f5;

  text-shadow: 0 0 4px rgba(0,0,0,0.6);

}

.banner span{

  color: #b7d9e8;

  text-shadow: 0 0 4px rgba(0,0,0,0.6);

  font-size: large;

}

/*_______________________________________________________________________________________________________________________*/

.drift-object{

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: -100px;

  width: 50px;

  opacity: 0.5;

  animation: drift 60s linear infinite;

  z-index: -1;

}

.obj1{

  animation-delay: 0s;

}

.obj2{

  animation-delay: 10s;

}

.obj3{

  animation-delay: 20s;

}

.obj4{

  animation-delay: 30s;

}

.obj5{

  animation-delay: 40s;

}

.obj6{

  animation-delay: 50s;

}


/*_______________________________________________________________________________________________________________________*/

.bulletin-frame{

  display: block;

  margin: 0 auto;

  padding: 5px;

  background-color: #d0d4d9;

  border: 2px solid #b0b4b8;

}


.bulletin-board{

  background-color: #c9a66b;

  
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.03) 1px,
      rgba(255,255,255,0.02) 2px,
      rgba(255,255,255,0.02) 3px
    );

  /*How big the image is*/
  background-size: 4px 4px;

  padding: 20px;

  margin: 0;

}

/*_______________________________________________________________________________________________________________________*/

/*Free-positioning heights: desktop/wide screens only*/
@media (min-width: 981px){

  .project-cards.about{

    position: relative;

    height: 300px

  }

  .project-cards.personal{

    position: relative;

    height: 500px

  }

  .project-cards.client{

    position: relative;

    height: 500px

  }


  /*Controls photos for PC*/

  .photo-wrap{

    position: absolute;

    width: 200px;

  }


  .photo-wrap.graduation{

    top: 60px;

    left: calc(50% - 400px);

  }

  .photo-wrap.headshot{

    top: 60px;

    left: calc(50% + 280px);

  }


  .photo {
    
    max-width: none;

    width: 200px;

    border: 2px solid #b08a55;

    box-shadow: 0 4px 6px rgba(0,0,0,0.25);

    border-radius: 4px;

  }

}


/*_______________________________________________________________________________________________________________________*/


.tack{

  width: 20px;

  height: 20px;

  border-radius: 50%;




  position: absolute;

  top: -10px;

  /*Banalnce to make it centered*/
  left: 50%;
  transform: translateX(-50%);

  /*30 30 means bright spot at top-left*/
  background: radial-gradient(circle at 30% 30%, #4a6cff, #001a80);

  box-shadow:0 2px 4px rgba(0,0,0,0.35), inset -2px -2px 4px rgba(0,0,0,0.45), inset 2px 2px 4px rgba(255,255,255,0.35);

}


.tack.photo{

  background: radial-gradient(circle at 30% 30%, #f47321, #a03c00);

}

.tack.title{

  background: radial-gradient(circle at 30% 30%, #b6ff00, #4a6f00);

}


/*_______________________________________________________________________________________________________________________*/

@media(max-width: 980px){

  .section-label-wrap{

    display: block;

    width: fit-content;

    margin: 10px auto;

    position: relative;

  }


  /*Controls photos for mobile*/
  .photo-wrap {

    position: relative;

    display: block;

    margin: 10px auto;

    width: 100px;

    text-align: center;

  }

}

@media(min-width: 981px){

  .section-label-wrap{

    position: relative;

    display: inline-block;

  }

}


.section-label{

  display: inline-block;

  background-color: #fdf6e3;

  padding: 5px;

  box-shadow: 0 4px 6px rgba(0,0,0,0.25);

}

.card{

  /*Used for tack*/
  position: absolute;

  background-color: #f5e6c8;

  border: 2px solid #b08a55;

  border-radius: 1px;

  padding: 0px;

  width: 300px;

  box-shadow: 0 4px 6px rgba(0,0,0,0.25);

  /*Add a 3D effect and lower numbers create a stronger effect*/
  perspective: 800px;

  cursor: pointer;
  
}


.card h3{

  text-align: center;

  margin: 0;

  padding: 10px;

  font-weight: 600;

  color: #3b2f1a;

  background: linear-gradient(to bottom, #f5e6c8 0%, #e8d4a8 100%);
  


}


.tech-stack{

  padding: 5px 10px;

  margin: 0px;

  color: #0d0a06;

  border-bottom: 1px solid #b08a55;

}


.hover-content{

  max-height: 0;

  /*Keeps content hidden*/
  overflow: hidden;

  padding: 0;

  color: #3b2f1a;

  /*Where the hinge is*/
  transform-origin: top center;

  /*Default state lay flat*/
  transform: rotateX(-90deg);

  /*How fast the card closes*/
  transition: max-height 1.5s ease, transform 2s ease;

}

.hover-content a{

  display: block;

  background-color: #f5e6c8;

  color: #3b2f1a;

  font-weight: 600;

  text-decoration: none;

  border: 2px solid #b08a55;

  border-radius: 5px;

  padding: 15px;

  margin: 10px;

}



/*Rules*/
@media (hover: hover){

  .card:hover .hover-content{

    max-height: 1000px;
    
    transform: rotateX(0deg);

    /*How fast the card opens*/
    transition: max-height 3.5s ease, transform 2s ease;

  }

}


.card.open .hover-content{

  max-height: 1000px;

  transform: rotateX(0deg);

  /*How fast the card opens*/
  transition: max-height 3.5s ease, transform 2s ease;

}




/*_______________________________________________________________________________________________________________________*/

/*Where the cards are positioned: desktop/wide screens only*/
@media (min-width: 981px){

  .section-label-wrap{

    left: 50%;
    transform: translateX(-50%);

  }


  .card.about{

    left: 50%;
    transform: translateX(-50%);

  }

  .card.job-tracker{

    top: 110px;

    left: 50%;

    /*How much offcenter*/
    transform: translateX(-150%);

  }

  .card.stock-scrubber{

    top: 90px;
    left: 50%;

    /*How much offcenter*/
    transform: translateX(50%);

  }

  .card.probation{

    top: 100px;

    left: 50%;

  }

}


/*_______________________________________________________________________________________________________________________*/

/*Mobile: fall back to normal stacked flow, centered*/
@media (max-width: 980px){

  .card{

    position: static;

    margin: 20px auto;

    width: 90%;

    max-width: 300px;

  }

  .project-cards{

    height: auto;

  }

}


/*_______________________________________________________________________________________________________________________*/

.wood-box{

  display: block;

  width: fit-content;

  background-color: #d6b37a;

  margin: 20px auto;

  padding: 10px 15px;

  background-image:
    linear-gradient(180deg,rgba(0,0,0,0.08) 0%,transparent 10%,rgba(0,0,0,0.05) 20%,transparent 30%,rgba(0,0,0,0.08) 40%,transparent 50%,rgba(0,0,0,0.05) 60%,transparent 70%,rgba(0,0,0,0.08) 80%),
    linear-gradient(180deg,rgba(255,255,255,0.10) 0%,transparent 50%,rgba(255,255,255,0.10) 100%);
  
  background-size: 50px 50px;

  /*Positioned within the boundaries*/
  position: relative;

  /*Add a 3D effect and lower numbers create a stronger effect*/
  perspective: 800px;

  border: 1px solid black;

  border-radius: 8px;

  cursor: pointer;

}


.open-top{

  /*z index to determine stacking*/
  z-index: 1;

  background-color: #a07c4a;

  box-shadow: inset 0 0 60px rgba(0,0,0,0.55), inset 0 0 12px rgba(255,255,255,0.15);

  padding: 40px 70px;

  border: 1px solid black;

  border-radius: 8px;

}

.wood-block{

  display: inline-block;

  padding: 10px 30px;

  text-decoration: none;

  margin: 10px;

}

.github{

  background-color: #d6b37a;

  color: #2b1b0f;

  border: 2px solid #b08a55;

  font-weight: 600;

}

.github:hover{

  border: 2px solid #e6c98f;

}


.linkedin{

  background-color: #a07c4a;

  color: #f8f3e7;

  border: 2px solid #7a5a33;

  font-weight: 600;

}

.linkedin:hover{

  border: 2px solid #c49b63;

}


.email{

  background-color: #6b4a2b;

  color: #fdf6e3;

  border: 2px solid #4a321d;

  font-weight: 600;

}

.email:hover{

  border: 2px solid #8a5c38;

}






.lid{

  /*z index to determine stacking*/
  z-index: 2;

  /*Make the lid float onto the box*/
  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 100%;

  border: 1px solid black;

  border-radius: 8px;

  background-color: #d6b37a;

  background-image:
    linear-gradient(180deg,rgba(0,0,0,0.08) 0%,transparent 10%,rgba(0,0,0,0.05) 20%,transparent 30%,rgba(0,0,0,0.08) 40%,transparent 50%,rgba(0,0,0,0.05) 60%,transparent 70%,rgba(0,0,0,0.08) 80%),
    linear-gradient(180deg,rgba(255,255,255,0.10) 0%,transparent 50%,rgba(255,255,255,0.10) 100%);
  
  background-size: 50px 50px;

  /*Where the hinge is*/
  transform-origin: top center;

  /*Default state lay flat*/
  transform: rotateX(0deg);

  /*How fast it takes to open the lid*/
  transition: transform 0.5s ease;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

}

/*Reason they are seperate is because on a phone if you click the hover effect will stay till you click somewhere else and this messes up the clicking*/
@media (hover: hover){

  .wood-box:hover .lid{

    transform: rotateX(-100deg);

  }

}


.wood-box.open .lid{

  transform: rotateX(-100deg);

  border: 1px solid rgb(248, 227, 152);

}

/*Mobile contact box*/
@media(max-width: 980px){

  .wood-box{

    width: 90%;

    max-width: 320px;

  }

  .open-top{

    padding: 20px 15px;

  }

  .wood-block{

    display: block;

    width: 100%;

    text-align: center;

    margin: 10px 0;

  }

}

/*_______________________________________________________________________________________________________________________*/