.container {

    border: 1px solid #cccccc;

    box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.75);

    border-radius: 20px;

    position: absolute;

    top: 45%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 350px;

    height: 750px;

}

.keys {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-gap: 1px;

    padding: 1px;

    margin: auto;


}

.button {

    margin-left: 3px;

    padding: 1px;

    background-color: #fff;

    border-radius: 1px;

    border: 1px solid #c4c4c4;

    background-color: lightyellow;

    width: 90px;

    height: 40px;

    font-size: 1.2rem;

    color: #333;

    background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, .04));

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px 0 0 rgba(255, 255, 255, .45), inset 0 -1px 0 0 rgba(255, 255, 255, .15), 0 1px 0 0 rgba(255, 255, 255, .15);

    text-shadow: 0 1px rgba(255, 255, 255, .4);

}


.button:hover {

    background-color: #eaeaea;

}

.operator {

color: blueviolet;

width: 63px;

height: 40px;

font-size: 0.7rem;

font-weight: bold;

text-align: left;

padding-right: 2px;

margin-right: 1px;

background-color: pink;

border-color: pink;

}

.operator:hover {

    background-color: lightcyan;

    border-color: lightcyan;

    color: black; 
}

#and {

color: orangered;

width: 63px;

height: 40px;

font-size: 1rem;

text-align: left;

padding-right: 2px;

margin-right: 1px;

background-color: lightskyblue;

border-color: lightskyblue;

}

#and:hover {

    background-color: lightblue; 

    border-color: lightblue;

    color: blue; 
}

#NaNvalue {

    margin-left: 3px;
    
    padding: 1px;
    
    background-color: #fff;
    
    border-radius: 1px;
    
    border: 1px solid #c4c4c4;
    
    background-color: lightskyblue;
    
    width: 90px;
    
    height: 40px;
    
    font-size: 0.9rem;
    
    color: #333;
    
    background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, .04));
    
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px 0 0 rgba(255, 255, 255, .45), inset 0 -1px 0 0 rgba(255, 255, 255, .15), 0 1px 0 0 rgba(255, 255, 255, .15);
    
    text-shadow: 0 1px rgba(255, 255, 255, .4);
}

#NaNvalue:hover {

    background-color: lightblue; 

    color: blue;
}

.clear {

    margin-left: 3px;

    background-color: #f0595f;

    border-color: #b0353a;

    color: #fff;

    width: 90px;

    height: 40px;

    font-size: 0.9rem;

}

.clear:hover {

    background-color: #f17377;

}

.equal-sign {

    background-color: #25a8e0;

    border-color: blue;

    color: #fff;

    width: 90px;

    height: 40px;

    font-size: 0.9rem;
}

.equal-sign:hover {

    background-color: blue;

}

.info {
    background-color: lightgreen;
    
    border-color: lightgreen;
    
    width: 90px;
    
    height: 40px;
    
    font-size: 0.9rem;
    
    margin-left: 3px;
}

.info:hover {
    background-color: green;

    border-color: green;

    color: white;

}

.NaN {
    background-color: violet;
    
    border-color: violet;
    
    width: 90px;
    
    height: 40px;
    
    font-size: 0.8rem;
    
    margin-left: 3px;
}

.NaN:hover {
    background-color: blueviolet;
    
    color: white;
}

#screen {

    background-color: rgb(171, 219, 231);

    justify-content: center;

    color: black;

    font-size: medium;

    width: 17rem;

    height: 28rem;

    cursor: default;

    padding: 10px;

    padding-left: 16%;

    margin: auto;

    margin-bottom: 10px;

    margin-left: 6px;
}

footer {
    padding-bottom: 0.3rem;
 
    padding-top: 0.5rem;
 
    font-size: 1.5rem;

    font-style: italic;

    text-align: center;
 
    color: red;

}