body{
    background-color:rgb(165, 161, 161);
}

button{
    background-color:rgb(17, 4, 197) ;
    text-align:center;
    font-size:2em; 
    color: white;
    border-radius: 20px;
    width:33vmin;
    height:10vmin;
}


button:active{
    background-color:grey;
}

.gridcontainer{
    margin: 0 auto;
    display:grid;
    background-color: rgba(255, 255, 255, 0.8);
    grid-template-rows: auto auto auto auto auto auto auto auto;
    grid-template-columns: auto auto auto;
    height:90vmax;
    width:100vmin;
}

#btn1{
    grid-area:2/2/2/3;
}
#btn2{
    grid-area:3/2/3/3;
}
#btn3{
    grid-area:4/2/4/3;
}
#btn4{
    grid-area:5/2/5/3;
}
#btn5{
    grid-area:6/2/6/3;
}
#btn6{
    grid-area:7/2/7/3;
}
@media only screen and (min-aspect-ratio: 1/1)  {
    /* Your styles for landscape tablets here */
    .gridcontainer{
        margin: 0 auto;
        display:grid;
        background-color: rgba(255, 255, 255, 0.8);
        grid-template-rows: auto auto auto auto auto;
        grid-template-columns: auto auto auto auto auto;
        width:100vmax;
        height:90vmin;
    }
    #btn1{
        grid-area:2/2/2/3;
    }
    #btn2{
        grid-area:2/4/2/5;
    }
    #btn3{
        grid-area:4/2/4/3;
    }
    #btn4{
        grid-area:4/4/4/5;
    }
    #btn5{
        grid-area:6/2/6/3;
    }
    #btn6{
        grid-area:6/4/6/5;
    }
}