html{background: #d6d6d6;}
@import url('//fonts.googleapis.com/css2?family=Roboto:wght@100&family=Saira&display=swap');

body {
    height: 100%;
    width: 100%;
    background: #d6d6d6;
    font-family: 'Saira';
    font-size: 20px;
    line-height: 28px;
}
/* Top Nav */
nav {
    text-align: right;
    font-size: 20px;
    position: relative;
    width: 97%;
    padding: 1% 0% 0% 0.5%;}
nav p {display: inline;padding-left: 2%; font-family: 'Saira', 'sans-serif';}
nav ul {list-style-type: none;padding: 0;}

#title {font-size: 38px;
    color: black;
    text-align: left;
    margin: 0%;
    font-weight: normal;
    float:left;}

h1 {color: white; text-align: left;}
p { font-family: verdana;font-size: 20px;}

/* link and hoving over links */
a { text-decoration: none;
    outline: none;
    color: dimgrey;}
a:hover {color: black;}

.footer {
    text-align: right;
    font-size: 70%;
    position: fixed;
    bottom: 0%;
    width: 99%;
    background: grey;
    color: white;}

    @media only screen and (max-width: 800px)
    {
    nav p{font-size: 70%;}
    .footer {font-size: 50%;}
    }