.QR-Box{
    background :  white;
    height : 220px;
    width : 500px;
    position: absolute;
    top : 50%;
    left : 50%;
    transform : translate(-50%,-50%);
    display : flex;
    justify-content: space-around;
    align-items : center;
    transition:  height 1s ease-out 0s;
    
}
body{
    background : rgba(77, 202, 115, 0.2);
}
h2{
    text-align : center;
    font-family : "Russo One";
    font-family: "Lexend Deca";
    font-weight : bold;
}
.QR-Box p:first-child{
    font-family : Poppins;
    font-size : 18px;
    font-weight : bold;
}
.QR-Box p:nth-child(2){
    font-family : Poppins;
    font-size : 14px;
} 

.QR-Box div #input-field{
    height : 40px;
    width : 90%;
    padding-left : 5px;
    outline : none;
    font-family : "Lexend Deca";
    border : 1px solid ;
}
.QR-Box div button{
    height : 35px;
    width : 70%;
    margin-top : 20px;
    background : rgba(77, 202, 115, 0.2);
    font-family : Poppins;
    font-weight : bold;
    font-size : 16px;
    cursor : pointer;
    margin-bottom : 40px;
    border : none;
    border-radius : 7px;
    box-shadow: 0px 1px 5px black;
}


#qr-img{
    height : 100px;
    width : 100px;
    opacity: 0;
}


@media screen and (max-width : 900px){
    .QR-Box{
        height : auto;
        height : 220px;
        width : 90%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1.5fr;
        
    }
    .QR-Box .qr-contents p{
        margin-bottom : 0px;
    }
    .QR-Box div{
        width : 90%;
        margin : 0px auto;
    }
    .QR-Box div button{
        width : 70%;
    }
    .qr-code{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .expand{
        height : 400px;
        
    }
}