* {
    margin: 0%;
    padding: 0%;

}
 
body {
    background-color: #e3f9ff;

}

.child {
    width: 100%; 
    height: 100vh; 
    display: flex;

    align-items: center;
    justify-content: center;
 }

 .container {
    background-color: #3a4452;
    padding: 1.8rem;
    border-radius: 1rem;
 }

 .child form input {
    border: 0;
    outline: 0;
    border-radius: 1rem;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(255, 255, 255, 0.2);
    background: transparent;
    font-size: 1.5rem;
    color: #ffffff;
    cursor: pointer;

    margin: 0.2rem;
    padding: 1rem;
    width: 17vh ;
    
 }

 .container .display {
    display: flex;
    justify-content: flex-end;
    /* flex-direction: column; */
    margin: 1rem 0;
 }

 .child .display input {
    text-align: right;
    flex: 1;
    font-size: 2.9rem;

    box-shadow: none;
    outline: none;
    
    
 }

 .child .container .hello {
    display: flex;
    gap: 0.2rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.child .container .hello div {
    display: flex;
    flex-direction: column;
    
}
.child .container .hello div .equal {
    background-color: #4285f4;
    color: #ffffff;
}

@media (max-width : 768px) {
 
    .child {
        width: 100%; 
        height: 80vh; 
        display: flex;
    
        align-items: center;
        justify-content: center; 
        padding-top: 4rem;
     }

     .container {
        background-color: #3a4452;
        padding: 1.5rem;
        border-radius: 1rem;
     }

     .child form input {
        border-radius: 1rem;
        font-size: 1.3rem;
    
        margin: 0.2rem;
        padding: 1rem;
        width: 17vh ;
        
     }

     .child .display input {
        text-align: right;
        flex: 1;
        font-size: 2.5rem;
    
        box-shadow: none;
        outline: none;
        
        
     }
    
    
}

@media (max-width : 617px) {
 
    .child {
        width: 100%; 
        height: 80vh; 
        display: flex;
    
        align-items: center;
        justify-content: center; 
        padding-top: 4rem;
     }

     .container {
        background-color: #3a4452;
        padding: 1rem;
        border-radius: 1rem;
     }

     .child form input {
        border-radius: 1rem;
        font-size: 1rem;
    
        margin: 0.2rem;
        padding: 0.8rem;
        width: 17vh ;
        
     }

     .child .display input {
        text-align: right;
        flex: 1;
        font-size: 2.2rem;
    
        box-shadow: none;
        outline: none;
        
        
     }
    
    
}

@media (max-width : 450px) {
 
    .child {
        width: 100%; 
        height: 80vh; 
        display: flex;
    
        align-items: center;
        justify-content: center; 
        padding-top: 4rem;
     }

     .container {
        background-color: #3a4452;
        padding: 1rem;
        border-radius: 1rem;
     }

     .child form input {
        border-radius: 0.8rem;
        font-size: 0.8rem;
    
        margin: 0.2rem;
        padding: 1rem;
        width: 12vh ;
        
     }
    
     .child .display input {
        text-align: right;
        flex: 1;
        font-size: 2rem;
    
        box-shadow: none;
        outline: none;
        
        
     }
    
}

@media (max-width : 365px) {
 
    .child {
        width: 100%; 
        height: 80vh; 
        display: flex;
    
        align-items: center;
        justify-content: center; 
        padding-top: 4rem;
     }

     .container {
        background-color: #3a4452;
        padding: 1.2rem;
        border-radius: 1rem;
     }

     .child form input {
        border-radius: 0.8rem;
        font-size: 0.8rem;
    
        margin: 0.2rem;
        padding: 1rem;
        width: 10vh ;
        
     }
    
    
}