html, body , .outer, .inner, table, thead, tfoot, tbody {
    height:100%;
    width:100%;
    margin:0;
}

table {
     border-spacing: 0px;
}

table td, table td * {
    vertical-align: top;
}

.text  {
    font-family: 'Roboto', sans-serif;
    color: #000000;
}

.text-100 {
    font-weight: 100;
}

.text-100i {
    font-weight: 100;
    font-style: italic;
}

.text-400 {
    font-weight: 400;
}

.text-700 {
    font-weight: 700;
}

thead {
    position: sticky;
    top: 0;
    color: black;
    background: #F0F0F0;
}

tfoot {
    position: sticky;
    top: 0;
    color: black;
    background: #C0C0C0;
}

table {
    border-spacing: 4px;
}

/*
td {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 40px;
}
*/

* {
    box-sizing: border-box;
    background-color: #F0F0F0;
}
.wrapper {
    max-width: 1024px;
    margin: 0 auto;
    font:
        1.2em Roboto;
        }

.wrapper > * {
    border: 2px solid #77a4d7;
    background-color: ##dfeaf5;
    border-radius: 5px;
    padding: 10px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header p {
    font-family: 'Roboto Condensed';
    font-size: 0.9em;
}

.main-head {
    grid-area: header;
}
.content {
    grid-area: content;
}
.main-nav {
    grid-area: nav;
}
.side {
    grid-area: sidebar;
}
.ad {
    grid-area: ad;
}
.main-footer {
    grid-area: footer;
}

.wrapper {
    display: grid;
    gap: 20px;
    grid-template-areas:
        "header"
        "nav"
        "content"
        "sidebar"
        "ad"
        "footer";
}

@media (min-width: 500px) {
    .wrapper {
        grid-template-columns: 1fr 3fr;
        grid-template-areas:
            "header  header"
            "nav     nav"
            "sidebar content"
            "ad      footer";
    }
    nav ul {
        display: flex;
        justify-content: space-between;
    }
}

/*
@media (min-width: 700px) {
    .wrapper {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas:
            "header header  header"
            "nav    content sidebar"
            "nav    content ad"
            "footer footer  footer";
    }
    nav ul {
        flex-direction: column;
    }
}
*/

.ad p {
 font-family: 'Roboto Condensed';
    font-size: 0.7em;
}

.main-footer p {
 font-family: 'Roboto Condensed';
    font-size: 0.7em;
}