.container{
   
    margin:0 87.5vh;
    background-color: midnightblue;
    border: 2px solid dodgerblue;
    border-radius: 4px;
    width: 280px;
    
   
}
.row{
    display:flex;
    justify-content: center;
    background-color: darkslateblue;
    
}
button{
    padding: 20px;
    background-color: aqua;
    color: blanchedalmond;
    background-color: inherit;
    
    border: 2px solid blueviolet;
    border-radius: 4px;
    cursor: pointer;
    margin: 0.3px;
    font-weight: 900;
    font-size: larger;
    width: 70px;
    cursor: pointer;
}

html{
    display: flex;
    justify-content: center;
}

.answer{
    
    height: 80px;
    padding-left: 15px;
    /* display: grid; */
    display: flex;
    justify-content: right;
    align-items: end;
    background-color: black;
    color:white;
    padding-right: 10px;
    font-size: 25px;
}



.head{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:darkblue;
    color: greenyellow;
    font-family: math;
}

@media(max-width : 700px){
    .container{
        margin : 0 0;
        width : inherit;
        /* height: 100vh; */
    }
    .button{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: darkblue;
        border: 2px solid blueviolet;
        border-radius: 4px;
        cursor: pointer;
        margin: 0.3px;
        font-weight: 900;
        font-size: larger;
        width: 25vw;
        height :14vh;
        cursor: pointer;
    }

    button{
        border : none;
    }

    .answer{
        height: 20vh;
        font-size: 80px;
    }

    .head{
        height : 10vh;
    }

    row{
        width : 100vw;
        height : 100vh;
    }
}

@media(max-width : 280px){
    .container{
        display: none;
    }
}