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

    #container {
        background-color: #fff;
        border-radius: 4rem;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 20px;
    }
    
    h1 {
        font-size: 3em;
        color: #4d85ee;
        line-height: 1.2;
        letter-spacing: -1px;
        color: #333;
        margin-bottom: 20px;

    }
    
    #calculator {
        display: grid;
        /* grid-template-columns: repeat(4, 1fr); */
        gap: 10px;
        padding: 20px;
        height: 50vh;
        background-color: rgb(200, 205, 136);
        border-radius: 4em;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    }
    form {
        width:40vw;
        max-width: 700px;
        min-height: 60vh;
        overflow: auto;
        position: relative;
        left: 25%;
    }
    
    #display {
        grid-column: span 4;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 10vh;
        border: 1px solid #ccc;
        border-radius: 40px;
        margin-bottom: 15px;
        padding: 0 10px;
        font-size: 1.2em;
        background-color: #f8f8f8;
    }
    
    .calc-numbers {
        width: 40vw;
        border: none;
        outline: none;
        background-color: transparent;
        font-size: 1.2em;
        cursor: pointer;
        text-align: right;
    }
    .calc-body {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        width: 40vw;
    }
    
    input[type="button"] {
        width: 100%;
        height: 45px;
        font-size: 1.2em;
        font-style: bold;
        border: 1px solid #ccc;
        border-radius: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }
    button:hover {
        opacity: 1.5;
        }
        
    button{
        color: rgb(18, 17, 17) !important;
            width: 100%;
            height: 45px;
            font-size: 1.2em;
            font-style: bold;
            border: 1px solid #ccc;
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            cursor: pointer;
    }
    

    .operator {
        background-color: #f0f0f0;
        font-size: 1.7em !important;
    }
    
    .dots {
        font-size: 3em !important;
       display:block;
       line-height: 1;
       text-indent:1px;   
    }
    .equal {
        background-color: #3e5940;
        color: #fff;
    }
    
    .operator:hover, .equal:hover {
        background-color: #54db39;
    }

    .nums:hover{
        background-color: aqua;
    }