*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@media  only screen and (min-width: 601px){
    body{
        width: 100vw;
        height: 100vh;
        background: rgb(218, 216, 216);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .container i{
        color: #D8DAD3;
    }
    
    .container{
        border-radius: 20px;
        border: #aaa9ad 10px solid;
        background: #28282B;
        height: 95vh;
        width: 80%;
        display: flex;
        flex-direction: column;
        box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.5);
        margin: 3px 0 5px 0;
    }
    
    .numberBox{
        background-color: #282828;
        display: flex;
        flex-direction: column;
        border-radius: 10px 10px 0 0;
        height: 100px;
        flex-grow: 1;
    }
    
    .keyboard{
        border-radius: 0 0 10px 10px;
        background: #282828;
        height: 332px;
        flex-grow: 2;
        display: grid;
        text-align: center;
        align-items: center;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    }

    .keyboard > div{
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }
    
    hr{
        border: black 2px solid;
    }
    
    .btn{
        background: black;
        opacity: .6;
        height: 98%;
        width: 99.2%;
        border: none;
        font-size: 17px;
    }
    
    .btn:active{
        background: red;
    }
    
    .btn:hover{
        opacity: 1;
    }
    
    #dot{
        font-size: 7px;
    }
    
    .dot{
        grid-column-start: -3;
        grid-row-start: 1;
    }
    
    .equal{
        grid-column: span 2/5;
        grid-row: 5;
    }
    
    #equal{
        width: 99.5%;
        border-radius: 0 0 8px 0;
        background: #C5D86D;
    }
    
    #equal i{
        color: black;
    }
    
    .zero{
        grid-column: span 2;
    }
    
    #zero{
        width: 99.5%;
        border-radius: 0 0 0 8px;
    }
    
    #reset{
        font-size: 25px;
        opacity: 1;
        background: #A91010;
    }
    
    #reset i{
        color: black;
    }
    
    #reset:active{
        background: red;
    }
    
    #del{
        opacity: 1;
        background: #A91010;
    }
    
    #del:active{
        background: red;
    }
    
    #del i{
        color: black;
    }
    
    #add, #subtract, #divide, #multiply{
        opacity: 1;
    }
    
    #input{
        background: transparent;
        color: #D8DAD3;
        padding: 10px 0 0 10px;
        border: none;
        border-radius: 10px 10px 0 0;
        cursor: default;
        font-size: 2em;
        resize: none;
        width: 100%;
        height: 65%;
        outline: none;
    }
    
    #result{
        background: transparent;
        display: flex;
        color: #D8DAD3;
        padding: 10px 0 0 10px;
        font-size: 2em;
        border: none;
        cursor: default;
        resize: none;
        width: 100%;
        height: 35%;
        transform: translateY(-4px);
    }
    
    footer{
        font-family: Arial, Helvetica, sans-serif;
        background: transparent;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    footer i{
        color:  black;
        font-size: 1.3em;
        padding: 3px;
    }
    
    footer > small{
        padding-left: 10px;
        color: grey;
    }
}

/* ############################################################# */
/* ############################################################# */
/* ############################################################# */
/* ############################################################# */
/* ############################################################# */


@media only screen and (max-width: 600px){
    body{
        width: 100vw;
        height: 100vh;
        background: rgb(218, 216, 216);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .container i{
        color: #D8DAD3;
    }
    
    .container{
        border-radius: 20px;
        border: #aaa9ad 10px solid;
        background: #28282B;
        height: 600px;
        width: 325px;
        display: flex;
        flex-direction: column;
        box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.5);
        margin-bottom: 35px;
    }
    
    .numberBox{
        border-radius: 10px 10px 0 0;
        background: #28282B;
        height: 100px;
        flex-grow: 1;
    }
    
    .keyboard{
        border-radius: 0 0 10px 10px;
        background: #282828;
        height: 332px;
        flex-grow: 2;
        display: grid;
        text-align: center;
        align-items: center;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    }
    
    hr{
        border: black 2px solid;
    }
    
    .btn{
        background: black;
        opacity: .6;
        height: 84.5px;
        width: 74px;
        border: none;
        font-size: 17px;
    }
    
    .btn:active{
        background: red;
    }
    
    .btn:hover{
        opacity: 1;
    }
    
    #dot{
        font-size: 7px;
    }
    
    .dot{
        grid-column-start: -3;
        grid-row-start: 1;
    }
    
    .equal{
        grid-column: span 2/5;
        grid-row: 5;
    }
    
    #equal{
        width: 150px;
        border-radius: 0 0 8px 0;
        background: #C5D86D;
    }
    
    #equal i{
        color: black;
    }
    
    .zero{
        grid-column: span 2;
    }
    
    #zero{
        width: 150px;
        border-radius: 0 0 0 8px;
    }
    
    #reset{
        font-size: 25px;
        opacity: 1;
        background: #A91010;
    }
    
    #reset i{
        color: black;
    }
    
    #reset:active{
        background: red;
    }
    
    #del{
        opacity: 1;
        background: #A91010;
    }
    
    #del:active{
        background: red;
    }
    
    #del i{
        color: black;
    }
    
    #add, #subtract, #divide, #multiply{
        opacity: 1;
    }
    
    #input{
        background: transparent;
        color: #D8DAD3;
        padding: 10px 0 0 10px;
        border: none;
        border-radius: 10px 10px 0 0;
        cursor: default;
        font-size: 2em;
        resize: none;
        width: 305px;
        height: 100px;
        outline: none;
    }
    
    #result{
        background: transparent;
        color: #D8DAD3;
        padding: 10px 0 0 10px;
        font-size: 2em;
        border: none;
        cursor: default;
        resize: none;
        width: 305px;
        height: 50px;
        transform: translateY(-4px);
    }
    
    footer{
        font-family: Arial, Helvetica, sans-serif;
        background: transparent;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
    }
    
    footer i{
        color:  white;
        font-size: 1.3em;
        padding: 3px;
    }
    
    footer > small{
        padding-left: 10px;
        color: grey;
    }
    
    #btn:hover{
        pointer-events: none;
    }
}