.container1 {
    background-color: rgb(245, 243, 243);
    width: 100vh;
    border-radius: 20px;
    padding: 10vh;
    margin: 5vh;
    margin-left: 55vh;
 
}
#inputText, #outputText {

    width: 80vh;
}
#qrcode {
    margin-top: 40px;
    margin-left: 26vh;
}

.con1{
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}

body {
    text-align: center;
}


@media (min-width: 300px) {
    .container1{
      max-width: 301px;
      text-align: left;
      position: absolute;
      margin-top: 4%;
      margin-left: 10%;
      
    }
  }
  
  @media (min-width: 1200px) {
    .container1{
      max-width: 600px;
      text-align: left;
      position: absolute;
      margin-top: 4%;
      margin-left: 30%;
      
    }
  }
  
  @media (max-width:620px) {
    .container1{
        max-width: 600px;
        text-align: left;
        position: absolute;
        margin-top: 4%;
        margin-left: 30%;
        
      }
      #inputText, #outputText{

        width: 27vh;
      }
      .con1 {
        font-size: 20px;
      }
      .buttons {
        width: 20px;
      }
  }
  @media (max-width:376px) {
  
    .container1
    {
        min-width: 300px;
        margin: 11px;
    }
  
  }
  @media (min-width: 300px) {
    .container1{
      max-width: 301px;
      text-align: left;
      position: absolute;
      margin-top: 4%;
      margin-left: 10%;
      
    }
  }
  
  @media (min-width: 1200px) {
    .container1{
      max-width: 1200px;
      text-align: left;
      margin-top: 4%;
      margin-left: 25%;
      
    }
  
  }