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: 100px;
height: auto;
}

header {
    background-color: #d253a1; /* 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;
    /* insert the image */
    }

    body {
        background-color: #D197BB; /* fill */
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0; /* add these two new lines */
        padding: 0;
        }

        header {
            background-color: rgb(234, 193, 99);
            padding: 30px;
            height: 100px;
            color: white;
            font-size: 50px; /* add these three new lines */
            font-weight: 900;
            font-style: normal;
            }
        
            nav ul {
                list-style-type: none;
                }

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

    main {
        margin-left: 36px;
        }

        footer {
            background-color: #498452; /* 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 */
            }

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


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