body {
        font-family: Garamond, Times, Verdana, Arial serif;
        color: #ff5733;
        background-color: #581845
    }

    h1 {
        font-family: Trebuchet, Geneva, Arial, SunSans-Regular, sans-serif;
        font-size: 3em;
        color: #ffc300;
        text-align: center;
    }

    h3 {
        font-family: Trebuchet, Geneva, Tahoma, sans-serif;
        font-size: 2em;
        color: #daf7a6;
        text-decoration-line: overline;
        text-decoration-color: #900c3f;
        text-decoration-style: wavy;
    }

    ul {
        list-style-type: circle;
    }

    a:link {
        color: #ffc300;
        transition: color 2s 200ms ease-out;
    }

    a:visited {
        color: orangered;
        transition: color 2s 200ms ease-out;
    }
    a:hover {
        color: white;
    }
    .page{
        border-style: solid;
        border-width: 3px;
        border-color: #ff5733;
    }
    article{
        border-style: solid;
        border-width: 1px;
        border-color: #581845;
        background-color: maroon;
    }
    section{
        border-style: solid;
        border-width: 2px;
        border-color: black;
    }

    input:invalid{
        border-color: red;
        outline: 2px solid red;
        border-radius: 5px;
    }

@media (min-width: 600px) and (max-resolution: 1.8dppx){
    body{
        display: grid;
        grid-template-columns: auto;
        row-gap: 5px;
        column-gap: 20px;
        grid-template-areas:
                "header"
                "sidebar"
                "section"
                ".";
    }

    header{
        grid-area: header;
    }

    nav {
        grid-area: sidebar;
        margin: 0;
        padding: 0;
        background-color: indigo;
    }

    nav ul {
        display: flex;
        list-style-type: none;
    }


    nav ul li a {
        display: inline-block;
        text-align: center;
        padding: 7px 8px;
        text-decoration: none;
    }

    nav ul li a:hover {
        background-color: rebeccapurple;
    }

    article {
        grid-area: section;
        padding: 5px 15px;
    }

    footer{
    grid-area: footer;
    }
}  @media not all and (min-width: 600px) and (max-resolution: 1.8dppx){
        body{
            display: grid;
            grid-row-gap: 5px;
            grid-column-gap: 20px;
            grid-template-areas:
                "header"
                "sidebar"
                "section"
                ".";
        }
        header{
            grid-area: header;
        }
        main{
            grid-area: main;
        }

        nav {
            grid-area: sidebar;
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: indigo;
        }

        nav ul {
            display: flex;
            list-style-type: none;
        }

        nav ul li a {
            display: inline-block;
            text-align: center;
            padding: 7px 8px;
            text-decoration: none;
        }

        nav ul li a:hover {
            background-color: rebeccapurple;
        }
        article {
            grid-area: section;
            padding: 5px 15px;
        }

        footer{
            grid-area: footer;
        }
    }