body {
    background-color: #222222;
    color: #fdfdfd;
    font-family: "mono", fallback-font, monospace;
    /* background-image: url("texture.jpg"); */
}

h1 {
    font-family: "title", fallback-font, sans-serif;
    color: #cdb882;
}

a {
    color: #7677fd;
    text-decoration: none;
}

a:hover {
    color: #00ff00;
    text-decoration: line-through;
}

ul {
    list-style-type:lower-greek;
}

strong, b, em, i {
    color: #fa5d5d;
}

img {
    max-height: 70vh;
    max-width: 100%;
}

.header {
    height: 10vh;
}

.header h1 {
    text-align: center;
}

.container {
    display: flex;
    justify-content: center;
    align-items: top-center;
}

.sidebar {
    background-color: #333333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #fa5d5d;
    position: sticky;
    top: 0;
    /* max-height: 90vh; */
    max-height: 100%;
    width: 12vw;
    padding: 2%;
}

.main-content {
    background-color: #333333;
    padding: 2%;
    width: 40vw;
}

@font-face {
    font-family: "title";
    src: url('title.ttf') format('truetype');
}

@font-face {
    font-family: "mono";
    src: url('mono.ttf') format('truetype');
}

@media screen and (max-width: 1080px) {
    .sidebar {
        width: 15vw;
    }

    .main-content {
        width: 70vw;
    }
}