/* BODY STYLING */

body {
    background-color: white;
    background-image: url(../img/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}


/* CONTAINER STYLING */

.container-top {
    margin: 50px 0;
    padding: 5px 0px;
}

.container-main {
    margin: 50px 0;
    padding: 5px 0px;
}


/* DIV STYLING */

#top {
    text-align: center;
    background-color: white;
}

#content {
    text-align: left;
    background-color: white;
}


/* BUTTON STYLING */

#button-red {
    /* background-color: red; */
    color: red;
}

#button-nyan {
    /* background-color: yellow; */
    color: goldenrod;
}

#button-green {
    /* background-color: green; */
    color: green;
}


/* TABLE STYLING */

table {
    width: 100%;
}

tr:nth-child(odd) {
    background-color: white;
}

td {
    padding: 0.25em 0.5em;
}

@media (max-width: 500px) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
        overflow: hidden;
    }
    thead {
        tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
    }
    tr:nth-child(odd) {
        td {
            border-bottom: 1px solid #aaa;
        }
    }
    td {
        display: flex;
        border-bottom: 1px solid #ccc;
        &:before {
            content: attr(data-label)": ";
            flex: 0 0 5em;
            font-weight: bold;
            margin-right: 1em;
            margin-bottom: 0.25em;
        }
    }
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}