* {
    margin:0;
    padding:0;
    color:darkblue;

}
html {
    max-width: 800px;
    margin:auto;
}
li {
    margin-left:0.65em;
    padding-left:0.75em;
}
ul li {
    list-style: none;
}
div, li, p {
    padding:0.25em;
}
nav, h1, h2, h3 {
    background-color: black;
}
nav {
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-color: #ccf;
    padding:1em;
}
img {
    max-width:100%;
    max-height: 100%;
}
h1, h2, h3 {
    padding:0.5em;
    margin-top:1em;
    margin-bottom:0.5em;
}
h1.title {
    margin-top:0;
}
nav ul li {
    display:inline;
    padding-right:0.5em;
    list-style: none;
}
h1, h2, h3, nav a, nav a:visited {
    color:#ccf;
}


nav a, nav a:visited {
    text-decoration: none;
}

button {
    padding:1em;
}

.running {
    font-size: 15pt;
    line-height: 120%;
}
.note {
    font-size:1.5em;
    line-height: 125%;
}
.note * {
    padding:1em;
    background-color: darkblue;
    color: #ccccff;
}
.warning, .hidden-hint .warning {
    background-color: white;
    color:red;
    border-color: red;
    border-width: thick;
    border-style: double;
    margin:1em auto 1em;
    width: 80%;
}

.btn_container {
    width:85%;
    text-align: center;
    margin: 2em auto 2em;
}
.btn_container button {
    width: 100%;
    font-size: 1.25em;
}
.hidden-hint {
    display:none;
    border-color:dimgray;
    border-style:solid;
    border-width: thin;
    margin: 1em auto;
    padding:0;

}

.button_right {
    text-align: right;
    padding:0;

}
.button_right button {
    border-color: darkblue;
    border-style:solid;
    border-width: thin;
    border-right-style: none;
    border-bottom-style: none;
}
.closingX {
    font-size:20pt;
    font-weight: bold;
}
@media only screen and (min-width: 300px) {
    .btn_container {
        width: 70%;
    }
}
@media only screen and (min-width: 500px) {
    .btn_container {
        width: 40%;
    }
    .hidden-hint {
        width:66%;
    }
    li {
        margin-left:1.5em;
    }
    div, li, p {
        padding:0.5em;
    }
    ul li {
         list-style: square;
    }
}

@media only screen and (min-width: 800px) {

    div, li {
        padding-left: 0;
    }
}