body {
    background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    --background-red: #c82c40;
    --background-darkred: #6b1b24;
    --foreground-text: white;
    --foreground-minor-text: #c5c5c5;
}

#MainContainer {
    margin: 4% 10%;
    width: auto;
    height: auto;
    overflow: hidden;
    border: 1px solid black;
    box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.5);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    --stripe: #f0f5f7;
    --bg: #eeeeee;
    background: linear-gradient(135deg, var(--bg) 25%, transparent 25%) -50px 0, linear-gradient(225deg, var(--bg) 25%, transparent 25%) -50px 0, linear-gradient(315deg, var(--bg) 25%, transparent 25%), linear-gradient(45deg, var(--bg) 25%, transparent 25%);
    background-size: 100px 100px;
    background-color: var(--stripe);
}

.header {
    width: 100%;
    background-color: var(--background-darkred);
    color: var(--foreground-text);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 24px;
    padding: 4px 8px;
}

a {
    margin: 0 8px 0 8px;    
    color: var(--foreground-text);
    text-decoration: none;
}

a[href] {
    color: var(--foreground-minor-text);
}

a[href]:hover {
    color: var(--foreground-text);
}

.menu {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--background-red);
    color: var(--foreground-text);
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2), inset 0 0 8px 1px rgba(0,0,0,0.2);
}

.content {
    position: relative;
    width: 100%;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24px;
    font-size: 12px;
    background-color: var(--background-red);
    color: #000000;
    box-shadow: 0px -8px 16px 1px rgba(0,0,0,0.2), inset 0 0 8px 1px rgba(0,0,0,0.2);
}

.button {
    height: 48px;
    width: 160px;
    margin: 8px 0 8px 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--background-red);
    color: var(--foreground-text);
    font-weight: bold;
    box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.25);
    transition: background-color 0.2s ease;
}
.button.small {
    width: 100px;
}

    .button.icon {
        width: 48px;
    }

        .button.icon svg {
            fill: var(--foreground-text);
        }

    .button:hover {
        background-color: #d82849;
        color: var(--foreground-text);
    }

    .button:active {
        background-color: var(--background-darkred);
        color: var(--foreground-text);
    }


    .button[active='true'] {
        background-color: var(--background-darkred);
        color: var(--foreground-text);
    }

.option {
    position: relative;
    margin: 8px 0;
    height: 48px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--background-red);
    color: var(--foreground-text);
    font-weight: bold;
    box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.25);
}

    .option svg {
        height: 24px;
        width: 24px;
        stroke: var(--foreground-text);
        fill: none;
        stroke-width: 2px;
        stroke-linecap: round;
    }

    .option:hover {
        background-color: var(--background-darkred);
        color: var(--foreground-text);
    }

.list {
    overflow: hidden;
    height: 0px;
    transition: height 1s ease;
    position: absolute;
    display: block;
    top: 48px;
    min-width: 192px;
    right: 0;
    z-index: 1;
    background: var(--background-red);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4), inset 0px 0px 6px 2px rgba(0,0,0,0.1);
}

    .list .input {
        position: relative;
        display: flex;
        width: 100%;
        height: 40px;
        align-items: center;
        transition: background 0.1s ease;
    }

        .list .input div {
            flex-basis: 16px;
            flex-grow: 1;
            font-size: 14px;
            display: flex;
            padding-left: 8px;
        }

        .list .input svg {
            flex-basis: 24px;
            height: 24px;
            flex-grow: 0;
            flex-shrink: 0;
            margin: 4px 8px 4px 4px;
            border-radius: 2px;
            background: #eeeeee;
            transition: background-color 0.3s ease;
        }

            .list .input svg path {
                stroke: #eeeeee;
                fill: none;
                stroke-width: 2px;
                stroke-linecap: round;
            }

        .list .input:hover {
            background: rgba(255,255,255,0.15);
        }

            .list .input:hover svg {
                background: #daced0;
            }

        .list .input:active svg {
            transition: background 0.1s ease;
            background: #08adff;
            /*background: #76B6D6;*/
        }

        .list .input.checked svg {
            background: #08adff;
            /*background: #76B6D6;*/
        }

.option:hover .list {
    height: auto;
}


@media (max-width: 1300px) {
    #MainContainer {
        margin: 2%;
        width: auto;
    }

    .button {
        margin: 4px 0 4px 8px;
    }

    .option {
        margin: 4px 0;
    }
    
}

@media (max-width: 800px) {
    #MainContainer {
        margin: 0;
        width: auto;
    }
}

@media (min-width: 1400px) {
    #MainContainer {
        margin: auto;
        width: 1200px;
        margin-top: 64px;
    }
}

@media (min-width: 1800px) {
    #MainContainer {
        margin: auto;
        width: 1200px;
        margin-top: 64px;
    }
}

@media (min-width: 2000px) {
    #MainContainer {
        margin: auto;
        width: 1600px;
        margin-top: 64px;
    }
}