/*colours & page*/

html {
    --bg:#2f2d3b;
    --border:#eee;
    --text:#eee;
    --link:#edbee9;
}

/*main content*/

body {
    font-family:courier;
    font-size:1em;
    color:var(--text);
    background-color:var(--bg);
    min-height:100vh;
    line-height:1.5em;
}

#container {
    margin:auto;
    max-width:900px;
    padding:40px 0px;
}

main {
    border:1px solid var(--border);
    padding:10px;
    margin:20px 0px;
}

/*nav dropdowns*/

nav details {
    padding:10px;
    border:1px solid var(--border);
}

details p, details ul {
    margin-bottom:0;
}

.second {
    border-top:none!important;
}

/*links*/

a:link, a:visited, a:hover, a:active {
    color:var(--link);
}

/*headings*/

h1 {
    border-bottom:1px solid var(--border);
    width:calc(100%-20px);
    padding:0px 10px 10px 10px;
    text-align:center;
}

/*columns*/

.three-column {
    display:block;
}

.three-column > * {
    padding:1rem;
}

@media (min-width:768px) {
    .three-column {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}