@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
    /* Allows for a more natural sizing system */
    box-sizing: border-box;
}
h1, h2{
    color:rgb(0, 0, 0);
    text-align: center;
    font-family:'Times New Roman', Times, serif;
    font-size: 50px; ;
}
img, nav{
    display: block;
    width: 100%;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
}
body{
    background-color: rgb(200, 172, 217);
}
p{
    text-align: center;
    font-size: 25px;
    a{
        color: rgb(113, 0, 179);
        &:hover{
            color: rgb(81, 0, 128);
        }
    }
}
nav{
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    a{
        color: black;
        text-decoration: none;
        background-color: white;
        text-align: center;
        padding: 5px 15px;
        border-radius: 20px;
        border: 1px white solid;
        transition: all ease .25s;
        &:hover{
            background-color: transparent;
            color: white;
        }
    }
}
audio{
    margin-inline: auto;
    display: block;
}