/* simple reset rule to set page defaults*/
* {
    margin: 0;padding: 0;border: 0;
    box-sizing: border-box;
}

:root {
    font-size: 62.5%; /*16px *.625= 10px*/

    --color-bg1: #EEE5E9;
    --color-bg2: #efc88b;
    --color-fn1: olive;
    --color-accent1: #cf5c36;
    background-color: var(--color-bg2);
}

body{ 
    color: var(--color-fn1);
    font-size: 1.4rem;
    background-image:linear-gradient( to bottom right,rgba(0,0,0,.7),rgba(255,255,255,.3),rgba(0,0,0,.5));
    min-height:100vh;

}

header{
    display: flex;
    height: 200px;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-style: italic;
    font-size: 350%;
    color: whitesmoke;
    text-shadow: 2px 2px 2px rgba(0,0,0,.7);
}


section > div{
    height: 80vh;
}
.img{
    width: 100%;
    height: 8%;
    margin-top: 5vh;
    margin-left: 2%;
}

#img{
    width: 70%;
    float: left;
}

.link{
    float: right;
    clear: right;
    border:solid whitesmoke;
    margin-right: 2%;
    width: 90%;
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.5);
    font-size: 180%;
    font-family: sans-serif;
    margin-top: 5vh;
}

#link{
    width: 30%;
    float: right;
}

a{
    text-decoration: none;
    color: whitesmoke;
}

#one{
    background-image: url(/images/nav1.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#two{
    background-image: url(/images/nav2.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#three{
    background-image: url(/images/nav3.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#four{
    background-image: url(/images/nav4.png);
    background-repeat: no-repeat;
    background-size: cover;
}