*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root{
  /*color variables*/

  --accent-color: #f0f9ff;
  --lighter-accent-color:#F2F9FF;
  --primary-text-color: #000;
  --secondary-text-color: #fff;
  --primary-color: #6EAEE4;
  --overlay-color: rgba(0,0,0,0.2);
  --hero-img-gradients: linear-gradient(215deg, #8ACEFF 11.50%, rgba(110, 174, 228, 0) 63.50% );
  --background-diagonal-gradients: linear-gradient(238.86deg, #6EAEE4 14.38%, rgba(110, 174, 228, 0) 75.41%);
  --background-gradients: linear-gradient(180deg, #6EAEE4 14.38%, rgba(110, 174, 228, 0) 75.41%);
  --white-color: #fff;
  --nav-bar-color: linear-gradient(var(--accent-color), var(--lighter-accent-color), transparent 100%);
}

.navbar{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 5rem;
  padding: 0 10vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--nav-bar-color);
}

.links-container{
  display: flex;
  gap: 1rem;
  list-style: none;
}

.links{
  padding: .5rem 1.5rem;
  text-decoration: none;
  text-transform: capitalize;
  color: var(--primary-text-color);
}

#hover-container-h {
  display: inline-block;
  padding: 4px;
}

.breathing{
  position: relative;
  text-align: center;
  animation: breathe 4s infinite;
  cursor: pointer;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
}

.hoverable {
 
  background-color:var(--nav-bar-color);
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;

}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(235, 226, 226, 0.904) 40%, var(--primary-color) 100%);
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out, visibility 0s linear 1s;
  z-index: 4;


}

#overlay-text {
  padding: 20%;
  margin: 20%;
  line-height: 2;

}

.hidden {
  visibility: hidden;
  opacity: 0;
 
}

.overlay:not(.hidden) { 
  visibility: visible;
  opacity: 1;
  transition: opacity 1s ease-in-out, visibility 0s linear 0s;
 
}





/* Style when hovering over breathing text */
#why-raw-vis:hover + #why-raw-hover {
  display: block;
}

#heinlein-quote-vis:hover + #heinlein-quote-vis {
  display: block;
}


#hero-section{
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--lighter-accent-color);
  padding: 0 10vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  scroll-behavior: smooth;
}

.hero-info{
  position: absolute;
  width: 50px;
  min-width: 350px;

}

.hero-heading{
  font-size: 7rem;
  font-weight: 400;
  line-height: 10.5rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  flex-basis: 0%;
  flex-grow: 0;
  flex-shrink: 0;
}

.hero-heading span{
  color: var(--primary-color);
 

}

.hero-paragraph{
  line-height: 2rem;
  margin: 2rem 0 4rem;
}

.btn{
  text-decoration: none;
  padding: 1rem 2rem;
  background: #000;
  margin-right: 1rem;
  border-radius: 1rem;
  text-transform: capitalize;

}

.primary-btn{
  background: var(--primary-color);
  color: var(--secondary-text-color);


}

.secondary-btn{
  background: transparent;
  color: var(--primary-color);


}

section{
  padding: 6rem 10vw;
  position: relative;
}

.section-secondary-line{
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 6rem;
}

.socials-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.socials{
  background: var(--lighter-accent-color);
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  padding: 1rem;
}

.social-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#about-section{
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  
  


}

#about-section > p, .about-heading{
  flex-grow: 1;
  flex-basis: 50%;
  margin: 5% 0 0 5%;
  
}



section p {
  margin-bottom: 20px;
  margin-top: 20px;
}



.about-p {
  line-height: 2;
}



#project-section{
  display: flex;
  background-color: var(--lighter-accent-color);
  
}

.projects-container{
  width: 100%;
  display: flex;
  align-content: stretch;
  flex-wrap: wrap;
  padding: 0 0 0 7rem;
}
  
  


.project-card{
  margin: 20px;
  max-height: 368px;
  max-width: 368px;
  background-color: #6EAEE4;
  padding: 4px;
  border-radius: 5px;


  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  
  
}

.project-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.project-card img{
  width: 100%;
  height: 85%;
  border-radius: 5px 5px 0 0;
  
}

.invisible {
  display: none;
}






.about-heading{
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
 

}



/* media queries */

@media (max-width: 1200px) {
  html{
    font-size: 14.5px;
  }

  .link-items{
    text-wrap:nowrap;
  }
}

@media (max-width: 900px) {
  .links-container{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; 
    gap: 5px; 
    
  }

  .link-items {
    flex: 1 0 100%;
  }

  .navbar {
    min-height: 160px;
  }

  
}


@media (max-width: 800px) {

  .socials-container{
    padding: 10rem 0rem 0rem 0rem;
    visibility: hidden;
    
  }

  #overlay-text {
    margin: 10%;
    padding: 10%;
  }


}


@media(max-width: 480px) {
  html{
    font-size: 10px;
  }

  .link-items{
    text-wrap:nowrap;
  }

  #hero-section{
    padding: 0;
  }

  #about-section{
    padding: 0;
  }

  #project-section{
    padding: 0;
  }

  .navbar{
    padding: 0 5vw;
  }




}

.back-z {
  z-index: 1;
}

.mid-z {
  z-index: 2;
}

.front-z {
  z-index: 3;
}

canvas#towerCrane {
  position: relative;
  left: 0;
  top: 0;
  height: 100vh;
  width: 20vw;
  z-index: 3;
}



body {
  color: var(--primary-text-color);
  font-family: 'IBM Plex Mono', monospace;
}