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

html, body{
      width: 100%;
      height: 100%;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 10px;
}

.qrcontainer{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #F6ECD8;
      background-image: url("https://i0.wp.com/shoocal.com/wp-content/uploads/2020/12/How-to-Scan-QR-code-for-Menu.jpg");
      background-repeat: no-repeat;
      background-size: 100% ;
}

.containerbox{
      width: 30vw;
      height: 65vh;
      box-shadow: 0px 0px 20px -6px black;
      background-color: #ffffffdc;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
}

h2{
      text-transform: uppercase;
      font-size: 2vw;
      font-weight: 700;
      text-shadow: 1px 2px 3px greenyellow;
}

#qr-input{
      width: 90%;
      height: 5vh;
      border-radius: 4px;
      padding: 10px;
      font-weight: 700;
      text-align: center;
      font-size: 1.2vw;
}

#qr-button{
      font-size: 1.1vw;
      font-weight: 700;
      border: none;
      width: 70%;
      height: 6vh;
      border-radius: 20px;
      background-color: #209a53;
      text-align: center;
      color: #fff;
}

#qr-button:hover{
      font-weight: 700;
      font-size: 1.5rem;
      color: black;
      background-color: chartreuse;
}

#qr-button:active{
      color: blue;
      background-color: bisque;
}

#qr-img{
      width: 15vw;
      height: 30vh;
}
#clrbtn{
      width: 8vw;
      height: 6vh;
      background-color: transparent;
      border: none;
      border: 2px solid #ff0000;
      border-radius: 10px;
      font-size: 1.5rem;
      color: #000;
      font-weight: 700;
      transition: .1s all linear;
      box-shadow: 0px 0px 10px 2px red;
      background-color: #f9a277;
}
#clrbtn:hover{
      background-color: #ff5500;
      font-size: 1.7rem;
      color: #fff;
}
#clrbtn:active{
      background-color: red;
      font-size: 1.7rem;
}

@media (max-width:600px){
      .containerbox{
            width: 80vw;
            height: 65vh;
      }
      #qr-img{
            width: 65vw;
            height: 40vh;
      }
      #qr-button{
            width: 65vw;
            font-size: 3.5vw;
      }
      #clrbtn{
            width: 30vw;
      }
      h2{
            font-size: 5vw;
      }
      #qr-input{
            font-size: 3.3vw;
      }
      .qrcontainer{
            background-image: url("https://assets-global.website-files.com/635ad902c41c465b186497f0/63d44146b5ea20571c6d9abc_63a66f32f85eb70a0e7c5309_wecom-temp-4951ab98d55df51b57d1174bb1282c6c.png");
            background-size: 100% ;
            background-repeat: repeat-y;
      }
}