/*****************************
 *    Global Styles          *
/****************************/

body {
    background-color: wheat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.25' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

        #calculator {
            width: 170px;
            background-color: #484848;
            padding: 20px;
            border-radius: 10px;
        }


        #result {
            width: 155px;
            height: 35px;
            background-color: #cddecc;
            border-radius: 5px;
            margin-bottom: 15px;
            text-align: right;
            line-height: 34px;
            font-family: digital;
            padding: 0px 5px 0px 5px;
            font-size: 25px;
            overflow: hidden;
            box-shadow: inset 0 0px 3px;
        }

        .key {
            width: 35px;
            background-color: #eeeeee;
            display: inline-block;
            margin: 3px 0px 8px 3px;
            vertical-align: bottom;
            text-align: center;
            padding: 5px 0px 5px 0px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: 0 3px 0 #a1a1a1, 0 2px 5px rgba(0, 0, 0, .75);
        }

        .equal-key {
            width: 120px;
            background-color: #4a9840;
            color: white;
        }
      
        .clear-key {
            background-color: #bb1c09;
            color: white;
        }
      
        .key:active {
            background-color: #a1a1a1;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }