/* Change colors and fonts here */
:root {
    /* FONTS */
	--bodyfont:monospace;
	--headerfont:monospace;

	/* COLORS */
    --background:#191919; /* Background color */

    /* These colors are a text/background pair, so check for contrast! */
    --dark:#dbddcd; /* Light mode text, dark mode background */
    --light:#191919; /* Dark mode text, light mode background */
    
    /* Accent colors */
    --accent1:#667572; /* Menu link color, and body link color in dark mode (make sure it's light enough) */
    --accent2:#667572; /* Header background color, can be whatever */
    --accent3:#667572; /* Body link color in light mode (make sure it's dark enough) */
}

* { margin:0; padding:0; }

/* Note: All font sizes here are for MOBILE! Scroll to the first @media tag for desktop. */

body {
    font: 1rem var(--bodyfont);
    background: var(--background);
}

::selection {
    background: var(--dark);
    color:var(--light);
}

/* Container styling */

#container {
    max-width:600px;
    margin:15px;
    border:0.5px solid var(--light);
}

/* Header styling */

#main-header {
    height:160px; /* If you change the height here, you'll probably need to modify the margins for nav */
    background: var(--accent2); /* Can add a background image */
    width:100%;
}

/* Top "window bar" */

#bar {
    font:0.8rem var(--bodyfont);
    /* This is where the icons.png background image path should go: */
    background:var(--dark) url(icons.png) no-repeat center right; 
    color:var(--light);
    height:15px;
    padding:3px;
}

/* Navigation styling */ 

#main-menu {
    text-align:center;
    font:1rem var(--bodyfont);
    padding: 12px;
    margin-top:120px; /* Might need to fiddle with this if you change the height of the header*/
}

#main-menu ul {
    list-style:none;
    display:inline;
}

#main-menu li {
    display:inline;
}

#main-menu a {
    color:var(--accent1);
    text-decoration:none;
    background:var(--dark);
    padding:6px;
    margin:2px;
}

#main-menu a:hover {
    background:var(--accent1);
    color:var(--dark);
}

/* Content styling */

main {
    padding:30px 15px 15px 15px;
    background:var(--light);
    color:var(--dark);
}

main a {
    color:var(--accent3);
    text-decoration:none;
}

main p a, main li a {
    border-bottom:1px solid var(--dark);
}

main a:hover {
    color:var(--dark);
}

main ul {
    list-style-position:outside;
    margin-left:10px;
}

main li {
    margin:5px 0 5px 5px;
    line-height:1.4;
}

main h1 {
    padding:5px;
    font: 2em var(--headerfont);
}

main h1::after {
    content:"_"
}

main h2 {
    font: 1.7em var(--headerfont);
    margin:12px 0 8px 0;
}

main h3 {
    font: 1.5em var(--headerfont);
}

p {
    margin:8px 0 8px 0;
    line-height:1.4;
}

main img {
    max-width:80%;
    margin:5px;
}

/* Form elements */

input, select, textarea {
    font:1rem var(--bodyfont);
    background:var(--light);
    color:var(--dark);
    border:1px solid var(--accent3);
    padding:5px;
}

button {
    background:var(--dark);
    color:var(--accent1);
    border:1px solid var(--light);
    padding:10px;
    font:1rem var(--bodyfont);
}

button:hover {
    background:var(--accent1);
    color:var(--dark);
    cursor:pointer;
}

/* Footer styling */

#main-footer {
    background:var(--dark);
    color:var(--light);
    padding:5px;
    text-align:center;
    font-size:0.9em;
}

#main-footer a {
    color:var(--accent1);
}

/* Skip to content */
#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--dark);
    color:var(--light);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

/* Desktop-only styling */

@media screen and (min-width: 650px) {
        #container {
            margin:35px auto;
        }
        
        #main-menu {
            font-size:1.3rem;
        }
}

/* Dark mode styling */

@media (prefers-color-scheme: dark) {
    main img {
        opacity:0.6;
        transition:opacity 0.5s ease;
    }
    
    main img:hover {
        opacity:1;
        transition:opacity 0.5s ease;
    }
    
    main {
        background:var(--dark);
        color:var(--light);
    }
    
    main a {
        color:var(--accent1);
        border-bottom:1px solid var(--light);
    }
    
    main a:hover {
        color:var(--light);
    }

    input, select, textarea {
        background:var(--dark);
        color:var(--light);
        border:1px solid var(--accent1);
    }
    
    ::selection {
        background: var(--light);
        color:var(--dark);
    }
}

.divider{
    text-align: center;
    color:#667572;
}