* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }

body { margin: 0 5%; font-family: verdana; background-image: linear-gradient(160deg, rgb(79, 155, 193), rgb(3, 26, 39)); }
header nav ul { list-style-type: none; }

#container { min-height: 100vh; position: relative; }

h1 { width: fit-content; text-align: right; 
    font-size: 40px; font-style: italic; font-weight: bold;
    text-shadow: 3px 4px 2px rgb(12, 8, 1);
    letter-spacing: 8px; color: rgb(253, 161, 42);
    position: absolute; top: 5%; left: 60%; }
h1 span1 { font-size: 30px; }
h1 span2 { font-size: 20px; font-weight: normal; 
    font-style: normal; color: rgb(175, 238, 49) }

header h2 { margin: 30px 20px; position: relative;
    text-align: center; vertical-align: middle;
    text-shadow: 3px 2px 2px wheat;
    border: 6px solid rgb(253, 161, 42);
    min-height: 255px; min-width: 378px;
    width: fit-content;
    background-color: rgb(179, 187, 190 .5);
    background-image: url(../images/paint.jpg), url(../images/homerw-framed-rainy-day-camp-1871.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 275px 157px, cover;
    transition: all 500ms ease-in-out; }

header a { text-decoration: none; }
header a:hover { background-color:rgb(3, 27, 40);
    outline-style: 10px blur; }
    
header h2 span { position: absolute; left: 50%; top: 73%;
    transform: translate(-50%, -50%);
    font-family: arial; font-size: 1 em; font-weight: bold;
    color: rgb(31, 39, 65);
    text-decoration: none;
    text-shadow: 4px 3 px 3px rgb(233, 22, 22); }

/* nav menu styles ----------------------- */

nav a { font-family: arial; font-size: 1 em; font-weight: bold; 
    color: rgb(17, 27, 58); margin: 25px 5px; padding: 12px 12px;
    text-decoration: none; 
    background-color:rgb(253, 161, 42); border-radius: 4px;
    transition: all 500ms ease-in-out; }

header nav h3 { font-size: 1.2 em; font-weight: bold;
    color: rgb(175, 238, 49); letter-spacing: 6px; 
    text-shadow: 3px 2px 2px rgb(26, 56, 1); }

ul li { display: inline-block; }

nav li { margin: 30px 5px; }

nav div a { text-shadow: rgb(214, 208, 199); }

nav a:hover { /* pseudo-class */
    background-color:aquamarine;
    color:rgb(179, 114, 29);
    font-weight: bold;
}

/* ========================================= */

footer {
    font-size: 1 em; font-weight: normal;
    letter-spacing: 4px;
    color:rgb(179, 187, 190);
    position: absolute; top: 90%; left 0px;
}

footer nav a {
    font-size: .7 em; font-weight: normal;
    color:rgb(179, 187, 190);
    padding: 6px 6px;
    text-decoration: none;
    background-color:rgb(3, 35, 51);
    border-radius: 4px;
    transition: all 500ms /* = .5 seconds */ ease-in-out;
}