body {
    width: 100%;
    height: 100%;
    background: linear-gradient(153deg, rgba(220,47,2,1) 0%, rgba(232,93,4,1) 45%, rgba(244,140,6,1) 72%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

}

.grid {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    column-gap: 5%;
    row-gap: 7%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    /* text-align: center; */
}

.box {
    width: 100%;
    box-shadow: 5px 5px 20px 10px black;
    border-radius: 2vh;
    /* text-align: center; */
    padding: 0.5;
    background-color: rgba(255, 255, 255, 0.2);
    
}

.smallBox {
    width: 100%;
    box-shadow: 5px 5px 20px 10px black;
    border-radius: 2vh;
    /* text-align: center; */
    padding: 0.5;
    background-color: rgba(255, 255, 255, 0.2);
    height: 5vh;
}

a {
    text-align: left;
    text-decoration: none;
    color: black;
    font-size: 2.5vh;
}



@media (min-width: 0px) and (max-width: 400px) {
    .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}