*{box-sizing: border-box;}
:root{
    --base-gray: rgb(39,44,52);
    --base-blue: rgb(101,218,249);
    --base-white:white;
}
body{
    margin:0;
    font: 525 15px/1.5 'Lato', sans-serif;
    letter-spacing: 2px;
}

.nav{
    background-color: var(--base-gray);
    width:100vw;
    height:calc(10vh + 50px);
}

.button{
    margin:5vh;
    padding:5px 10px 5px 10px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    text-align: center;
    color:white;
    border: none;
    background-color: var(--base-gray);
    box-shadow: 1px 1px 1px black;
    cursor: pointer;
}
/* 
.action.button{
    background-color: var(--base-gray);
} */

.nav .button{
    width: 100px;
    height: 50px;
    position: absolute;
    top:0;
    font-weight: 700;
    background: var(--base-blue);
    color: black;
}

.nav .prev{
    left:0;
}

.nav .next{
    right:0;
}

.page-container{
    padding:5vw;
}

.button.grey-out{
    display: none;
}