main.css

@font-face {
    font-family: 'digital-7regular';
    src: url('digital-7-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


.container {
    font-size: 2rem;
    width: 400px;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(5, 16.5%);  
    border: 5px solid black;
    margin-top: 10%;
    margin: auto;
    grid-gap: 1px;
    }
    
    body {
        font-family: sans-serif;
    }

    .display {
        font-family: 'digital-7regular';
        grid-column: 1/ 5;
        margin-right: 5%;   
        margin-top: 2.5%;
        margin-bottom: 2.5%;
        text-align: right;
    }

   
    #sum {
    }

    #input {
        font-size: 3rem;

    }


    

    #clear {
        grid-column: 1/ 4; 
        background-color: #202325;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;  
        cursor: pointer;
    }

    #clear:hover{
        background-color: #202325ad;
    }


    #num0 {
        grid-column: 1/ 3; 
        background-color: #202325;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center; 
        cursor: pointer;
    }

    #num0:hover {
        background-color: #202325ad;
    }

    #num1, #num2, #num3, #num4, #num5, #num6, #num7, #num8, #num9 {
        background-color: #202325;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;    
        cursor: pointer;    
    }

    #num1:hover, #num2:hover, #num3:hover, #num4:hover,
    #num5:hover, #num6:hover, #num7:hover, #num8:hover, #num9:hover {
        background-color: #202325ad;    
    }

    

    #display {
        background-color: lightgrey;

    }

    #plus, #minus, #times, #divide, #equals {
        background-color: #4C5796;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center; 
        margin-right: 3%;
        font-weight: bold;
        cursor: pointer;
    } 

    #plus:hover, #minus:hover, #times:hover, #divide:hover, #equals:hover {
        background-color: #4C5796ad;
    }

    #decimal {
        grid-column: 3/4; 
        background-color: #202325;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center; 
        cursor: pointer;
    }

    #decimal:hover {
        background-color: #202325ad;
    }