@keyframes bg-scroll{
    from{
        background-position: 0, 0;
    }
    to{
        background-position: 30px, 30px;
    }
}

* {
    margin: 0;
    padding: 0;
}

html{
    display: flex;
    justify-content: center;
    background-color: #005CC4;
    background-image: url('../img/bg-halftone-dot-tile.png');
    animation: bg-scroll 2s linear infinite;
    color: black;
    font-family:sans-serif;
    line-height: 1.5;
}

body{
    width: 90vw;
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: white;
}

header,main{
    border-bottom: solid thin grey;
}

header{
    display:flex;
    justify-content: space-between; 
    align-content: baseline;
    padding:1rem;
    
}

main{
    padding: 1rem 2rem;
}

footer{
    padding:1rem;
    text-align: center;
}

/* Typography */
h1,h2,h3,h4,h5,h6{
    font-family: 'Poppins',sans-serif;
}

p{
    padding: 0 0.5rem 0.5rem 0;
}

p+p{
    padding-bottom: 1rem;
}

/* Lists */
ul,ol{
    padding: 0 0 1rem 1.5rem;
}