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 */

  }
  
    .content {
      position: absolute;
      color: #9E5D23;
      /* background:black; */
      width:100%;
      display:flex;
      flex-direction: row;
      justify-content:center;


  }

  .landing {
    position:fixed;
    top:0;
    display:flex;
    flex-direction: row;
    justify-content:center;

    /* align-items:center; */
    margin: 5%;


}



  /* 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.82);
  /* -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: calc(20vh + 30vw);
  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%

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

  }
  
  .buyButton {
    opacity: 0.8;
    -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 : background-color 0.4s ease-in-out;
    transition : opacity 0.2s ease-in-out;



    font-family: inherit;
    font-size:40%;


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


  }



  .buyButton:hover {
    /* color:#9E5D23;
    background-color:#14171A; */
    opacity: 1;
  }


  .info { 
    position: absolute;
    width: 100%;
    height: 100vh;
    /* -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;
    top: 100vh;
    display: flex;
    justify-content: center; 
    align-items:center;
    background-color: rgba(20, 23, 26, 0.82)
  }

  #infoHeader{
    display:fixed;
    position: absolute;
    background-color: rgba(20, 23, 26, 0.82);
    top: 1vh;
    /* left:0px; */
    z-index: 1;
    top: 85vh;
    font-size: 60%;
    width: 80%;
    text-align: center;
  }

  .info iframe{ 

    width: 70%;
    height: 70%;
  }
 




 

 




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


    }



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

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