* {box-sizing: border-box;}

body    {background-color: #ffffff;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;}

#wrapper    {background-image: linear-gradient(to bottom, #ffffff, #b045db);
            background-color: 90c7e3;}

header {background-color: #490071;
        color: #FFFFFF;
        height: 120px;
        text-align: center;
        padding-top: 30px;
        padding-left: 3em}


header a:link {text-decoration: none; 
                color: #FFFFFF;}

header a:visited {text-decoration: none; 
                    color: #FFFFFF;}

header a:hover {color: #90c7e3;}

h1  {margin-bottom: 0;
    margin-top: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: .25em;
    padding-top: .5em;
    padding-bottom: .5em;}

nav {padding: 0;
    font-weight: bold;
    font-size: 120%;
    text-align: center;
    display: flex;
    justify-content: center;}

nav a:link {text-decoration: none; 
            color: #9900ff;}

nav a:visited {color: #8206a0;}

nav a:hover {color: #000000;}

nav li {border-bottom: 1px solid #000033;}

nav ul {margin: 0;
        padding: 0;
        font-size: 1.2em;
        list-style-type: none;}

main    
        {background-color: #FFFFFF;
        padding: 1px 20px 20px 30px;
        display: block;
        overflow: auto;}

h2  {color: #8c00cd;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-shadow: 1px 1px 1px #cccccc;}

h3  {font-family: Georgia, 'Times New Roman', Times, serif;
    color: #000033;}

main ul {list-style-image: url(.gif);}

dt {color: #002171;}

.gaming {color: #7b00ff;
        font-weight: bold;}

#contact {font-size: 90%;}

#videogames {height: 300px;
            background-image: url(games.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;}

#gaming {height: 300px;
            background-image: url(gaming.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;}

#nintendo {height: 300px;
                background-image: url(nintendo.jpg);
                background-size: 100% 100%;
                background-repeat: no-repeat;}

                table {
                        border: 2px solid #000033;
                        border-collapse: collapse;
                        width: 100%;
                }

                table th, table td {
                        border: 1px solid #000033;
                        padding: 8px;
                        text-align: left;
                }

                table th {
                        background-color: #490071;
                        color: #FFFFFF;
                }

                form {
                        background-color: #f9f9f9;
                        padding: 20px;
                        border: 1px solid #ccc;
                        border-radius: 5px;
                        max-width: 600px;
                        margin: 20px auto;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                }

                form label {
                        display: block;
                        margin-bottom: 8px;
                        font-weight: bold;
                }

                form input[type="text"],
                form input[type="email"],
                form input[type="password"],
                form textarea,
                form select {
                        width: 100%;
                        padding: 10px;
                        margin-bottom: 10px;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                        box-sizing: border-box;
                }

                form input[type="submit"],
                form input[type="reset"],
                form button {
                        background-color: #490071;
                        color: #fff;
                        padding: 10px 15px;
                        border: none;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 16px;
                }

                form input[type="submit"]:hover,
                form input[type="reset"]:hover,
                form button:hover {
                        background-color: #7b00ff;
                }

footer {background-color: #ffffff;
        font-size: 75%;
        font-style: italic;
        text-align: center;
        font-family: Georgia, 'Times New Roman', Times, serif;
}
@media (min-width: 600px) {

        nav ul {display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-around;}
    
        nav li {border-bottom: none;}
    
        section {padding-left: 2em;
                padding-right: 2em;}
        
    .content main { display: grid;
                    grid-template-rows: auto;
                    grid-template-columns: 1fr 1fr 1fr;}
    h2         { grid-row: 1 / 2; grid-column: 1 / 5; }
    section    { grid-row: 2 / 3; grid-column: auto; }
    #special   { grid-row: auto; grid-column: 1 / 5; }
    footer     { grid-row: auto; grid-column: 1 / 5; }

}



@media (min-width: 1024px) {

        nav ul {display: flex;
                flex-direction: column;
                padding-top: 1em;}
    
        nav {text-align: left;
            padding-left: 1.5em;}
    
       #wrapper {margin: auto;
                    width: 80%;
                    border: 1px solid #000033;
                    box-shadow: 3px 3px 3px #333333;
                    display: grid;
                    grid-template-rows: auto;
                    grid-template-columns: 190px auto;}
    
    header {grid-row: 1 / 2; grid-column: 1 / 3;}
    nav { grid-row: 2 / 5; grid-column: 1 / 2; }
    div { grid-row: 2 / 3; grid-column: 2 / 3; }
    main { grid-row: 3 / 4; grid-column: 2 / 3; }
    footer{ grid-row: 4 / 5; grid-column: 2 / 3; }

}