html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 9/16;
    background-image: url("https://drive.google.com/uc?id=1HVjqVjc-Hlhe4FRLnrCMp9IGcArK5pem");
  }
  
      header {
        width: 100%;
        height: 33%;
        position: absolute;
        z-index: 9999999;
        background-image: url("https://drive.google.com/uc?id=1HVjqVjc-Hlhe4FRLnrCMp9IGcArK5pem");
        background-size: cover;
    }
  
  span {
      margin:5px;
  }
  
  #camera, #camera--view, #camera--sensor{
      position: fixed;
      height: 100%;
      width: 100%;
      /*object-fit: cover;*/
  }
  
  #tool {
    margin: auto;
    margin-left: 7.5%;
    width: 90%;    
  }
  
  #camera--view{
      top: 0%;
      transform: scale(-1, 1);
      filter: FlipH;
  }
  
  #camera--trigger{
      background-color: black;
      color: white;
      border-radius: 8px;
      border: none;
      padding: 1px 5px;
      box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
  }

  #float{
    max-width: 100%;
    height: 30%;
    position: absolute;
    background-color: snow;
    justify-content: center;

  }

  #logo{
    padding-top: 15%;
    max-width: 75%;
    padding-left: 12.5%;
    display:none;
  }

  #frame{
      max-width: 100%;
      position: relative;
      border: 500px gray;
      top: 33%;
  }

  #footer{
    max-width: 100%;
    height: 50%;
    position: absolute;
    background-color: snow;
    justify-content: center;
    top: 70%;
    z-index: 0;
  }
  
  .taken{
      height: 100px!important;
      width: 100px!important;
      transition: all 0.5s ease-in;
      border: solid 3px white;
      box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
      top: 20px;
      right: 20px;
      z-index: 2;
  }
  
  #camera--output {
    max-width: 100%;
    height: auto;
    position: absolute;
    justify-content: center;
    top: 29%;
  }
  
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 320px) {
    header {
        width: 100%;
        height: 33%;
        background: white;
        position: absolute;
        z-index: 9999999;
    }
    #frame {
        top: 33%;
    }
    #footer {
        max-width: 100%;
        height: 50%;
        position: absolute;
        background-color: snow;
        justify-content: center;
        top: 85%;
        z-index: 0;
    }
    span {
        margin: 1px;
    }
    #tool {
        margin-top: -35px;
    }
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
    span {
      margin:9px;
    }
}

@media (min-width: 736px) {
    html, body{
        margin: 0;
        padding: 0;
        width: 100%;
        aspect-ratio: 16 / 9 ; /* typical video aspect ratio */
        background-color: snow;
    }
    header {
        width: 100%;
        height: 33%;
        position: absolute;
        z-index: 9999999;
    }
    #float{
        height: 13%;
        background-color: transparent;
    }
    
    #logo {
        padding-top: 0%;
        max-width: 30%;
        padding-left: 90%;
    }
    
    #footer{
        width: 100%;
        height: 50%;
        position: absolute;
        background-color: snow;
        justify-content: center;
        top: 85%;
        z-index: 0;
    }
    
    #frame{
        width: 100%;
        position: fixed;
        justify-content: center;
        top: 33%;
    }
    
    #camera--view, #camera--sensor{
          position: fixed;
          height: 100%;
          width: 100%;
          /*object-fit: cover;*/
    }
    
    #camera--output {
        width: 20%;
        height: auto;
        position: fixed;
        left: 100%;
        top: 10%;
    }
    
   canvas {
       display : none;
    } 
   
   #back{
          width: 200px;
          background-color: black;
          color: white;
          font-size: 16px;
          border-radius: 30px;
          border: none;
          padding: 15px 20px;
          text-align: center;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
          position: fixed;
          bottom: 10px;
          left: calc(10% - 100px);
    }
   
   #camera--active{
          width: 200px;
          background-color: black;
          color: white;
          font-size: 16px;
          border-radius: 30px;
          border: none;
          padding: 15px 20px;
          text-align: center;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
          position: fixed;
          bottom: 10px;
          left: calc(30% - 100px);
    }
   
   #reload{
      width: 200px;
      background-color: black;
      color: white;
      font-size: 16px;
      border-radius: 30px;
      border: none;
      padding: 15px 20px;
      text-align: center;
      box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
      position: fixed;
      bottom: 10px;
      left: calc(70% - 100px);
    }
   
   #save{
      width: 200px;
      background-color: black;
      color: white;
      font-size: 16px;
      border-radius: 30px;
      border: none;
      padding: 15px 20px;
      text-align: center;
      box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
      position: fixed;
      bottom: 10px;
      left: calc(90% - 100px);
    }
   
    #camera--trigger{
          width: 200px;
          background-color: black;
          color: white;
          font-size: 16px;
          border-radius: 30px;
          border: none;
          padding: 15px 20px;
          text-align: center;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
          position: fixed;
          bottom: 10px;
          left: calc(50% - 100px);
    }
}

@media (min-width: 830px) {
    html, body{
        margin: 0;
        padding: 0;
        width: 100%;
        aspect-ratio: 16 / 9 ; /* typical video aspect ratio */
        background-color: snow;
    }
    header {
        width: 0;
        height: 0;
    }
    #float{
        height: 13%;
        background-color: transparent;
    }
    
    #logo {
        padding-top: 0%;
        max-width: 30%;
        padding-left: 90%;
    }
    
    #footer{
        max-width: 100%;
        height: 50%;
        position: absolute;
        background-color: snow;
        justify-content: center;
        top: 100%;
        z-index: 0;
    }
    
    #frame{
        width: auto;
        max-width: auto;
        height: 80%;
        position: fixed;
        justify-content: center;
        top: 10%;
        left: calc(50% - 53.2vh);
    }
    
    #camera--view, #camera--sensor{
          position: fixed;
          height: 80%;
          width: 80%;
          left:10%;
          top:10%;
          /*object-fit: cover;*/
    }
    
    #camera--output {
        width: 20%;
        height: auto;
        position: fixed;
        left: 100%;
        top: 10%;
    }
    
   canvas {
       display : none;
    } 
   
   #back{
          width: 200px;
          background-color: black;
          color: white;
          font-size: 16px;
          border-radius: 30px;
          border: none;
          padding: 15px 20px;
          text-align: center;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
          position: fixed;
          bottom: 10px;
          left: calc(10% - 100px);
    }
   
   #camera--active{
          width: 200px;
          background-color: black;
          color: white;
          font-size: 16px;
          border-radius: 30px;
          border: none;
          padding: 15px 20px;
          text-align: center;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
          position: fixed;
          bottom: 10px;
          left: calc(30% - 100px);
    }
   
   #reload{
      width: 200px;
      background-color: black;
      color: white;
      font-size: 16px;
      border-radius: 30px;
      border: none;
      padding: 15px 20px;
      text-align: center;
      box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
      position: fixed;
      bottom: 10px;
      left: calc(70% - 100px);
    }
   
   #save{
      width: 200px;
      background-color: black;
      color: white;
      font-size: 16px;
      border-radius: 30px;
      border: none;
      padding: 15px 20px;
      text-align: center;
      box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
      position: fixed;
      bottom: 10px;
      left: calc(90% - 100px);
    }
   
    #camera--trigger{
          width: 200px;
          background-color: black;
          color: white;
          font-size: 16px;
          border-radius: 30px;
          border: none;
          padding: 15px 20px;
          text-align: center;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
          position: fixed;
          bottom: 10px;
          left: calc(50% - 100px);
    }
}

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1800px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    #frame {
        max-width: auto;
        height: 80%;
        position: fixed;
        justify-content: center;
        top: 10%;
        left: calc(50% - 53.2vh);
    }
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
      
}