body {
    display: grid;
    height: 100vh;
    margin: 0;
    gap: 20px;
    grid-template-columns: auto;
    grid-template-rows: 0.2fr 0.2fr auto 0.5fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
    font-family: Verdana, Geneva, Tahoma, sans-serif
}

@media (min-width: 800px) {
    body {
        display:grid;
        height: 100vh;
        grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "header header header header"
            "nav nav nav nav"
            ". main main ."
            "footer footer footer footer";
        font-family: Verdana, Geneva, Tahoma, sans-serif
    }

    nav li {
        display: inline;
        font-family: sans-serif;
        font-size: 16px; 
        width: 800px;
    }

    nav a{
        text-decoration: none;
        color: blue;
    }

    nav a:hover {
        text-decoration: underline;
    }

    nav a:visited {
        color: blueviolet;
    }

    nav a:active {
        color: darkgreen;

    }
}  

header {
    grid-area: header;
    text-align: center;
    background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}

header h1 {
    color: crimson;
}

header a {
    text-decoration: none;
}

nav { 
    grid-area: nav;
    color: blue;
}

nav li {
    display: inline;
    font-family: sans-serif;
    font-size: 16px; 
    width: 800px;
}

nav a{
    text-decoration: none;
    color: blue;
}

nav a:hover {
    text-decoration: underline;
}

nav a:visited {
    color: blueviolet;
}

nav a:active {
    color: darkgreen;

}

main {
    grid-area: main;
    color: blue;
    padding: 5px;
    margin: auto;
}

main h1 {
    font-weight: 600;
    color: crimson;
    font-size: xx-large;
}

.date {
    font-style: italic;
    color: #3f87a6;
}

.right {
    float: right;
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

footer {
    grid-area: footer;
}

li {
    list-style-type: none;
    padding: 1px;
}

.inline {
    display: inline;
}

.black {
    color: black;
}

.center {
    text-align: center;
}

.pmt {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-gap: 1rem;
}

.card {
    background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
    border-radius: 20px;
    color:crimson;
    padding: 1rem;
    height: 4rem;
    text-align: center;
    font-size: large;
    font-weight: bold;
    text-decoration: none;
}

.Current {
    font-style: italic;
}

.contact {
    margin-left: 2rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: dimgrey;
}