/* Google fonts */
  
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@200&family=Preahvihear&family=Roboto&family=Ubuntu&display=swap');

               /* Css Reset */
                
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
    font-family: 'Ubuntu', sans-serif;
}

body
{
    background: white;
}

.qr-div
{
    width: 95%;    
    background: #a9a9a9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;    
    align-items: center;
    flex-direction: column;
    gap: 40px; 
    border: 0px solid black;
    border-radius: 30px; 
    box-shadow: 20px 20px 50px #b2b2b2;  
}

.heading
{
    font-size: 60px;
    font-weight: 600;
    margin-top: 50px;
    color: #123337;        
}

#qr-text 
{
    width: 90%;
    height: 90px;
    font-size: 35px;
    padding: 30px 40px;
    border: 0px solid black;
    border-radius: 8px;
    outline: none;
}

#qr-text:focus 
{
    border: 4px solid #123337;
}

#qr-text.error
{
    animation: vibration 0.1s linear 5;        
}

@keyframes vibration
{
    
    0%{
       transform: translateX(4px);
    }
    
    25%{
       transform: translateX(-4px);
    }
    
    50%{
       transform: translateX(4px);
    }
    
    75%{
       transform: translateX(-4px);
    }
    
    100%{
       transform: translateX(4px);
    }
    
}

#btn-01
{
    font-size: 38px;
    border: 0px solid black;
    border-radius: 8px;
    background: #215b63;
    color: white;
    padding: 20px 60px 20px 60px;     
    margin: 30px 0px 50px 0px;   
}

#btn-01:active
{
  color: black;  
}

#btn-02
{    
    border: 0px solid black;
    border-radius: 8px;
    background: #4bacb3;    
    padding: 15px 50px 15px 50px; 
    margin-top: -40px;    
    margin-bottom: 50px;
    display: flex;    
    align-items: center; 
    visibility: hidden;   
    display: none;         
}

#btn-02.download
{    
    visibility: visible;
    display: inline;        
}

#btn-02 a 
{
    font-size: 40px;
    font-weight: 500;
    color: black;    
    text-decoration-line: none;     
    display: inline;    
}

#btn-02 a i
{
    padding-left: 20px;
}


#img-div
{
    width: 300px;
    max-height: 0;    
    overflow: hidden;
    transition: max-height 1.8s;
}

#img-div.show-img
{
    max-height: 300px;
    border: 3px solid gray; 
    border-radius: 12px;      
}

#img-div img
{
    width: 100%;   
    padding: 15px
}

            /* Media queries */
                    
@media( max-width: 910px){
   
    .heading{
        margin-top: 40px; 
        font-size: 50px;
    }    
    
    #btn-01{
        font-size: 30px;                       
        padding: 15px 40px 15px 40px;     
        margin: 30px 0px 50px 0px ;   
    }

    #btn-02
    {    
        padding: 15px 50px 15px 50px; 
        margin-top: -40px;    
        margin-bottom: 50px;         
    }

    #btn-02 a 
    {
        font-size: 30px;
        font-weight: 500;               
    }


    #qr-text {   
        height: 60px;
        font-size: 33px;
        padding: 20px 30px;               
    }
    
    #img-div
    {
        width: 250px;   
    }

     #qr-text:focus {
        border: 3px solid #123337;
    }

}


@media( max-width: 550px){
   
    .heading{
        margin-top: 30px;
        font-size: 40px;
    }    
    
    #btn-01{
        font-size: 25px;                       
        padding: 10px 30px 10px 30px;     
        margin: 20px 0px 30px 0px ;    
    }

     #btn-02
    {    
        padding: 10px 40px 10px 40px; 
        margin-top: -40px;    
        margin-bottom: 40px;         
    }
    
     #btn-02 a 
    {
        font-size: 20px;
        font-weight: 400;               
    }

    #qr-text {   
        height: 50px;
        font-size: 25px;
        padding: 15px 20px;               
    }
        
    #img-div
    {
        width: 200px;   
    }     

     #qr-text:focus {
        border: 2px solid #123337;
    }
}

@media( max-width: 435px){
   
    .heading{
        margin-top: 30px;
        font-size: 30px;
    }    
    
    #btn-01{
        font-size: 20px;                       
        padding: 8px 25px 8px 25px;     
        margin: 20px 0px 30px 0px ;   
    }
    
     #btn-02
    {    
        padding: 8px 30px 8px 30px; 
        margin-top: -40px;    
        margin-bottom: 30px;         
    }
    
    #btn-02 a 
    {
        font-size: 20px;                       
    } 
    
    #qr-text {   
        height: 40px;
        font-size: 20px;
        padding: 10px 20px;               
    }
    
     #img-div
    {
        width: 150px;   
    }
    
     #qr-text:focus {
        border: 1px solid #123337;
    }

}