@import "elements.css";

@font-face {
    font-family: "W95FA";
    src: url("../assets/w95fa.woff2") format("woff2");
}

body {
    font-family: "W95FA", "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
    shape-rendering: optimizeSpeed;

    font-size: larger;

    background: #008080;
    color: #000000;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    scrollbar-gutter: stable both-edges;
}

header {
    background: #C0C0C0;
    color: black;
    padding: 1rem;
    width: 8rem;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 2px solid #DFDFDF;
    border-left: 2px solid #808080;
    border-top: 2px solid #DFDFDF;
    border-bottom: 2px solid #808080;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    margin-bottom: 10px;
}

nav ul li a {
    color: black;
    text-decoration: none;
    padding: 4px 8px;
    display: block;
    border: 2px solid #C0C0C0;
}

nav ul li a:hover {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-bottom: 2px solid #DFDFDF;
    border-right: 2px solid #DFDFDF;
    background: #C0C0C0;
}

#main-content {
    background-color: #C0C0C0;
    border-top: 2px solid #DFDFDF;
    border-left: 2px solid #DFDFDF;
    border-bottom: 2px solid #808080;
    border-right: 2px solid #808080;
    margin: 1rem;
    max-width: 50rem;
    padding: 1rem;
}

@media (max-width: 64rem) {
    body {
        flex-direction: column;
    }

    header {
        height: min-content;
        width: 100%;
        bottom: 0;
    }

    header > nav {
        flex-direction: row !important;
    }

    nav > ul > li {
        display: inline-block;
        margin: 0;
    }
}

/* Editor */
.ck-editor__editable {
    border-top: 2px solid #808080 !important;
    border-left: 2px solid #808080 !important;
    border-bottom: 2px solid #DFDFDF !important;
    border-right: 2px solid #DFDFDF !important;
    border-radius: 0 !important;
}

/* Tables */
table {
    border-collapse: separate;
    border-spacing: 1px;
    background: #C0C0C0;
}

th, td {
    background: #C0C0C0;
    border-top: 1px solid #DFDFDF;
    border-left: 1px solid #DFDFDF;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    padding: 4px 8px;
}

nav ul li a {
    color: black;
    text-decoration: none;
    padding: 4px 8px;
    display: block;
    border: 2px solid #C0C0C0;
}

nav ul li a:hover {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-bottom: 2px solid #DFDFDF;
    border-right: 2px solid #DFDFDF;
    background: #C0C0C0;
}