* {
    padding:0;
    margin:0;
    font-family: verdana, trebuchet ms, arial, calibri, gill sans, helvetica neue, candara, geneva, sans-serif;
    background-color: black;
}
html, body {padding:0; margin:0; height:100%;}
footer{
    position: absolute; bottom: 0; right: 0;
    color: #df85a5;
    background-color: transparent;
    padding-top: 2em;
    margin-right: 1em;
    margin-bottom: 1em;
    text-align: right;
    overflow: hidden;
}

a, a:link, a:visited, a:hover, a:active, b {
    text-decoration: none;
    background-color: transparent; 
}
a:link, a:visited {
    color: #305285;
}
a:hover, a:active {
    color: #9092ca; 
}
p {
    text-indent: 2em;
}
ul {
    list-style-type: none;
}
li {
    padding-left: 2em;
}

.center { 
    width: 60%;
    padding: 2em;
    margin: auto;
}

.grid {
    height: auto;
    width: 100vw;
    display: grid;
    position: relative;
    grid-template-columns: 1fr 60% 1fr;
    grid-template-rows: 2em 9.515625em auto 12.6875em;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    box-sizing: border-box;
}

.top-row { 
    grid-area: 1 / 1 / 2 / 4; 
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
}
.nav-row { 
    grid-area: 2 / 1 / 3 / 4; 
}
.nav-grid { 
    grid-area: 2 / 2 / 3 / 3;  
    display: flex;
    flex-direction: row;
    display: grid;
    grid-template-columns: minmax(0%,10%) repeat(5, minmax(7ch,96px)) minmax(0%,10%);
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    justify-items: center;
    text-align: center;
    margin: auto;
}
    .nav-left { 
        grid-area: 1 / 1 / 2 / 2;
    } 
    .nav-right { 
        grid-area: 1 / 7 / 2 / 8;
    }
    .nav-home { 
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 80% 20%;
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
        flex-direction: column;
    }
    .nav-blessfrey { 
        grid-area: 1 / 3 / 2 / 4;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 80% 20%;
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
        flex-direction: column;
    }
    .nav-lemonland { grid-area: 1 / 4 / 2 / 5;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 80% 20%;
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
        flex-direction: column;
    }
    .nav-diary { grid-area: 1 / 5 / 2 / 6;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 80% 20%;
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
        flex-direction: column;
    }
    .nav-about { grid-area: 1 / 6 / 2/ 7;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 80% 20%;
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
        flex-direction: column;
    }
    .navlink {
        font-size: 110%;
        font-weight: bold;
        color: #E6E8EF;
    }
    .navlink a:link {
        color: #E6E8EF;
    }
    .navlink a:visited {
        color: #E6E8EF;
    }
    .navlink a:hover {
        color: #f463ad;
    }
    .navlink a:active {
        color: #f463ad;
    }
    .nav-grid img {
        height: 100%;
        width: 100%;
    }
    .content-grid {
        min-height: 60vh;
        min-width: 50vw;
    }