@import "topnav.css";
@import "editpage.css";
:root {
    --background-color: #171718;
    --close-background-color: #1e2122;
    --nav-bar-color: #4c5052;
    --text-color: #c8c3bc;
    --hover-background-color: #ddd;
    --hover-text-color: black;
    --active-background-color: #2196F3;
    --active-text-color: white;

    /***************************
     * Usage Ex:
     * color: var(--text-color);
     ***************************/
}

* {
    /* font-family: 'Courier New', Courier, monospace; */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background-color: var(--background-color);
    max-width: 900px;
    margin: auto;
}

.content {
    background-color: var(--close-background-color);
    color: var(--text-color);
    max-width: 900px;
    padding: 20px;
}

p {
    font-size: 15pt;
    padding-left: 15px;
}

.search {
    list-style-type: none;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border: 0px;
    font-size: 17px;
}

#searchBox {
    width: 100%;
    padding: 12px;
    color: var(--active-text-color);
    display: block;
    background-color: var(--active-background-color);
    outline: none;
}

.search li a {
    padding: 12px;
    text-decoration: none;
    background-color: var(--nav-bar-color);
    color: var(--text-color);
    display: block;
}

.search li a:hover {
    background-color: var(--hover-background-color);
    color: var(--hover-text-color);
}