body { font-family: "Roboto", 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; }

h1 { font-family: "Roboto",'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; font-style: normal; }

footer p {text-align: center;}

#logo {
    width: 70px;
    height: auto;
    }

    header {
        background-color: #b2c5b5; /* fill */
        /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
        border: 1px solid #000; /* stroke */
        /* width of stroke, type of line, and color */
        height: 55px;
        padding: 20px;
        /* inset the image */
        }
       
    body {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0; /* add these two new lines */
        padding: 0;
        background: rgb(210 232 255);
        }

    header {
        background: rgb(30,95,124);
        background: radial-gradient(circle, rgba(30,95,124,1) 0%, rgba(38,14,61,1) 100%);

        padding: 30px;
        height: 100px;
        color: rgb(255 255 255);
        
        font-size: 50px; /* add these three new lines */
        font-weight: 900;
        font-style: normal;
        }

        footer {
        background: rgb(30,95,124);
        background: radial-gradient(circle, rgba(30,95,124,1) 0%, rgba(38,14,61,1) 100%);

        color: white;
            border: 1px solid #000; /*stroke*/
            margin: 0; /*white space outside the box*/
            padding: 30px; /* inner white space, pushes logo in */
        }

    nav ul {
        list-style-type: none;
        }

    nav ul li {
        display: inline;
        margin-right: 16px;
        }
    
    a {text-decoration: none;}

    main {
        margin-left: 36px;
        }

    .thumbnails {
        display: flex; /* this is called a flexbox */
        }

    header span {
        position: relative;
        top: -21px;
        }