/*HEADER HEADER - 1ST BODY DIV BOX*/
.scrolledTop #header {
    transition: all 2s;
    height: 100vh;
    width: 100vw;

	display: block;
    background-image: linear-gradient(110deg, #F2EDE7FF, #F2EDE7FF, #F2EDE7FF, #F2EDE77f, #F2EDE700);
}
#header {
    transition: all 2s;
}	
    /*HGROUP - 1ST HEADER BOX*/		
    #header hgroup {	
        display: grid;
        grid-template-areas:
            "h1 p"; 
    }
        #header hgroup h1 {
            grid-area: h1;
        }
        #header hgroup p {
            grid-area: p;
            place-self: center;
        }

.scrolledTop #header hgroup img {
    transition: all 550ms;
    width: 50vh;
    height: auto;
}#header hgroup img {
    transition: all 700ms;
}

.scrolledTop #header hgroup p {
    display: block;

    text-align: center;
    font-size: 2em;
    margin: 0.5em;


    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}