* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding:0;
}

body {
    background-color:yellow;
}

.container{
    /* displays in grid */
    display: grid;
    /* used to display the buttons in basically a grid and automatically adjust with a minmax width of 200px and 1 fraction */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 1em;
    /* height: 100vh; */
    /* used to provide gaps between the grids */
    grid-gap: 1em; 
}

h1{
    /* used to stretch the element take takes space of all columns */
   grid-column: 1/-1;
   text-align: center;
   font-family: 'Nova Mono', monospace;
   /* letter-spacing: 0.05rem; */
   font-size: 3rem;
   margin: 0;
}

.btn {
    border: none;
    background-color: #fff;
    padding: 2em 2em;
    font-size: 2em;
    background-color: seashell;
    border-radius: 10px;
    box-shadow: 7px 7px 5px purple;
}

.btn:hover,
.btn:focus {
    cursor: pointer;
    background-color: bisque ;
}