html,body {
    margin: 0;
    padding: 0;
    background-color: rgb(20, 23, 26);
    font-family: "Share Tech Mono", monospace;
    font-size: calc(2vh + 3vw);

  }


  canvas {
    position: fixed;
    pointer-events: none;
    z-index: -1; /* Push the canvas behind other elements */

  }

/* =============NAV & FOOTER ============== */
  
.nav{
  display:flex;
  text-align: center;
  /* padding: 14px 16px; */
  text-decoration: none;
  overflow:hidden;
  width: 100%;
  justify-content: center;
  z-index: 3;
  position: fixed;
  left:0;
  top:0;
  border-bottom: solid white 0.001rem;

}

.nav, #footer{ 
font-size: 0.45rem;
color: white;
background-color: rgb(0, 0, 0);
}


/* Links inside the navbar */
.nav a {
float: right;
text-align: center;
text-decoration: none;
color:inherit;
/* margin:0.25rem; */
padding:0.25rem;
border:solid; 
border-width: 0.0025rem;
border-color:white;

}

.nav a:hover, .dropdown:hover .dropbtn {
background-color: white;
color:black;
}

#home { 
position:absolute;
left:0;

color: white;
border:none;
}

#home:hover { 
background-color: inherit;
color: white; 
/* border-color: white; */
}

#footer { 
  /* margin-top: 4rem; */
  text-align: center;
  background: black;  
  /* padding: 0.25rem; */
  flex-direction: row;
}
#footer p { 
  font-size: inherit;
  margin: 0;

}
#footer .links { 
  width: 100%;
  margin: auto;
} 
#footer img {
  vertical-align: middle;

  width: 0.5rem;
  height: auto;
  margin: 0.25rem;

}
/* =================================== */

 




  
    .content {
      position: absolute;
      color: #9E5D23;
      /* background:black; */
      width:100%;
      display:flex;
      flex-direction: column;
      justify-content:center;
      /* background:#77803f; */
      margin-top: 1rem;



  }

  .landing {
    position:relative;

    display:flex;
    flex-direction: row;
    justify-content:center;
    margin-top: 0rem;

  

    /* align-items:center; */
    padding:1rem;



}



  /* INDEX.HTML  */
.textContainer {
  flex-direction: column;
  margin-right: 1vw;
  z-index: 1;
  font-size: 350%;
  display:flex;
  align-items: center;
  text-align:center;


  
}
.header { 
 

  border-radius: 0.09em;


  /* background-color:rgba(20, 23, 26, 0.674); */
  padding:0.5rem;
  /* -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px); */
  /* box-shadow: rgba(0, 0, 0, 0.3) 0px 54px 55px, rgba(0, 0, 0, 0.52) 0px -12px 30px, rgba(0, 0, 0, 0.52) 0px 4px 6px, rgba(0, 0, 0, 0.57) 0px 12px 13px, rgba(0, 0, 0, 0.29) 0px -3px 5px; */
  
}
.GUIcontainer {
  position:relative;
   /* top: 5vh;
   right:0vw; */
  /*
  top:2vh; */
  font-size: 0px;  /* prevents alt text */
  /* background-color:black; */
  
}

.GUIcontainer img {
  z-index: 1;
  /* width: 100px; */
  width:10rem;
  height: auto; 
  box-shadow: rgba(0, 0, 0, 0.3) 0px 54px 55px, rgba(0, 0, 0, 0.52) 0px -12px 30px, rgba(0, 0, 0, 0.52) 0px 4px 6px, rgba(0, 0, 0, 0.57) 0px 12px 13px, rgba(0, 0, 0, 0.29) 0px -3px 5px;

  }
  .description {
    font-size: 20%;
    color: #77803f;

  }
  .textContainer  p{
    font-size: 50%;

  }
  
  .buyButton {
    margin:1rem;
    /* opacity: 0.8; */
    width: 100%;



    /* -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
    box-shadow: rgba(0, 0, 0, 0.3) 0px 54px 55px, rgba(0, 0, 0, 0.52) 0px -12px 30px, rgba(0, 0, 0, 0.52) 0px 4px 6px, rgba(0, 0, 0, 0.57) 0px 12px 13px, rgba(0, 0, 0, 0.29) 0px -3px 5px;
    background-color: #9E5D23;

    border-radius: 0.1em;

    color:#14171A;
    text-decoration: none;
    transition : color 0.4s ease-in-out;

    transition : opacity 0.1s ease-in-out;



    font-family: inherit;
    font-size:1.5rem;




    border-radius: 0.2rem;
    padding: 0.01em;
    cursor: pointer;
    text-align: center;
    will-change: color;
    will-change: background-color;


  }



  .buyButton:hover {
    opacity: 0.8;


  } 


  .info { 



    /* -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);  */
    box-shadow: rgba(0, 0, 0, 0.3) 0px 54px 55px, rgba(0, 0, 0, 0.52) 0px -12px 30px, rgba(0, 0, 0, 0.52) 0px 4px 6px, rgba(0, 0, 0, 0.57) 0px 12px 13px, rgba(0, 0, 0, 0.29) 0px -3px 5px;

    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items:center;
    background-color: rgba(20, 23, 26, 0.82);


    /* margin:0.5rem; */
    padding: 0.1rem;




  }

  .info h1 { 

    font-size: 0.8rem;
    text-align:center;
  }
  .info h1 i { 
    font-size: 0.6rem;
    color: #9e5c23a7  }



  .leftText, .rightText { 
    font-size: 0.8rem;

    /* background: green; */
    /* width: 100%; */

    padding: 0.5rem;
    /* border:solid black 0.1rem; */
    align-items:center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.236);
    margin: 0.1rem;
    
  }

  .leftText span { 

    margin-left: 0.5rem;
    float: left;
    text-align: right;
    border-right: 0.05rem solid rgba(255, 255, 255, 0.384);
    padding-right: 0.3rem;

  }

  .rightText span { 
    /* background-color: red; */
    margin-right: 0.8rem;
    float: right;
    text-align: left;
    border-left: 0.05rem solid rgba(255, 255, 255, 0.384);
    padding-left: 0.3rem;


  }
  .leftText span p, .rightText span p { 
    font-size: 0.5rem;
    /* color: #77803f; */
    color: #9e5c23a7 ;
    }


 

  .info iframe{ 

    width: 80vw;

    height: 45vw;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
  }
 




 

 




  @media screen and (max-width: 900px) {
    .content{ 
      font-size: 80%;
    }
    
    .landing {
      flex-direction: column;
      /* font-size: 80%; */
      justify-content: center;
      align-items:center;

    }
    
    .buyButton{ 
      font-size: 1rem;


    

    }



    .GUIcontainer {
      /* position: static; */

      text-align: center; /* Center the image within the GUIcontainer */
    }
  
    .GUIcontainer img {
      width: 60%;
      height:auto;
    }

    #infoHeader {
      top: 90vh;
      font-size: 90%;
    }
    
  }