* {
    box-sizing: border-box;
    /* ===== Scrollbar CSS ===== */
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #1d6762 #a2be8f;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #a2be8f;
}

*::-webkit-scrollbar-thumb {
    background-color: #1d6762;
    border-radius: 10px;
    border: 3px none #ffffff;
}

html {
    /* Set the font globally */
    font-family: Arial, Helvetica, sans-serif;

    --s: 58px; /* control the size*/
    --c1: #91bdae;
    --c2: #cce3d8;
    --c3: #c1d9ce;

    --_c: #0000, var(--c1) 1deg 79deg, #0000 81deg;
    --g0: conic-gradient(from 140deg at 50% 87.5%, var(--_c));
    --g1: conic-gradient(from 140deg at 50% 81.25%, var(--_c));
    --g2: conic-gradient(from 140deg at 50% 75%, var(--_c));
    --g3: conic-gradient(at 10% 20%, #0000 75%, var(--c1) 0);
    background:
        var(--g0) 0 calc(var(--s) / -4),
        var(--g0) var(--s) calc(3 * var(--s) / 4),
        var(--g1),
        var(--g1) var(--s) var(--s),
        var(--g2) 0 calc(var(--s) / 4),
        var(--g2) var(--s) calc(5 * var(--s) / 4),
        var(--g3) calc(var(--s) / -10) var(--s),
        var(--g3) calc(9 * var(--s) / 10) calc(2 * var(--s)),
        repeating-conic-gradient(from 45deg, var(--c2) 0 25%, var(--c3) 0 50%);
    background-size: calc(2 * var(--s)) calc(2 * var(--s));
}

body {
    color: #3d3a34;
}

h1,
h2,
h3 {
    margin: 0;
}

a {
    color: #42977f;
    font-weight: bold;
}

ul,
ol {
    margin: 0 0 10px 0;
}

hr {
    border: 3px solid #42977f;
}

#container {
    margin: 0 auto;
    width: 1000px;
}

header {
    background-image: url("https://outkrop.neocities.org/img/groups/header.png");
    height: 150px;
}

nav {
    text-align: center;
}

/* Style the tab */
.tab {
    overflow: hidden;
    background-color: #1d6661;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #f5fde6;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #a2be8f;
    color: #1d6661;
}

/* Create an active/current tablink class 
.tab button.active {
    background-color: #a2be8f;
    color: #1d6661;
}
*/

/* Style the tab */
.tab2 {
    overflow: hidden;
    background-color: #1d6661;
}

/* Style the buttons that are used to open the tab content */
.tab2 button {
    width: 100%;
    flex-direction: column;
    background-color: inherit;
    border: 1px solid;
    outline: none;
    cursor: pointer;
    padding: 5px 10px;
    font-weight: bold;
    text-align: left;
    color: #f5fde6;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
    background-color: #a2be8f;
    color: #1d6661;
    border: 1px solid #a2be8f;
}

/* Create an active/current tablink class */
.tab2 button.active {
    background-color: #a2be8f;
    color: #1d6661;
    border: 1px solid #a2be8f;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 15px 20px;
    border: 1px solid #ccc;
    border-top: none;
}

.decor {
    position: fixed;
    top: 2%;
    left: 67%;
    z-index: 1;
    max-height: 100%;
    rotate: 15deg;
    transition: transform 1s ease;
}

.decor:hover {
    transform: rotate(360deg);
}

.border {
    padding-top: 10px;
    width: 70%;
    border: 3px dotted #42977f;
}

.checked {
    color: rgb(255, 161, 75);
}

main {
    background-color: #f5fde6;
}

.content {
    display: flex;
    justify-content: space-between;
}

.subnav {
    margin-right: 10px;
    width: 150px;
}

.col1 {
    width: 525px;
}

.col2 {
    width: 225px;
    height: auto;
}

.staffbox {
    width: 775px;
}

.row {
    display: flex;
    gap: 25px;
    margin-top: 15px;
}

.staff {
    padding: 5px;
    width: 175px;
    text-align: center;
}

.staff img {
    width: 150px;
    height: 200px;
    background-color: rgb(162, 190, 143);
}

summary {
    background-color: #a2be8f;
    padding: 5px;
}

summary h3 {
    display: inline;
}

table {
    margin: 0 auto;
    width: 100%;
    border: 3px solid #42977f;
    border-collapse: collapse;
}

th,
td {
    margin: 0 auto;
    padding: 5px;
    width: 10%;
    border: 3px solid #1d6661;
    border-collapse: collapse;
    text-align: left;
    vertical-align: text-top;
}

footer {
    padding: 5px;
    height: auto;
    text-align: center;
    font-size: 14px;
    background-color: #1d6762;
    color: #f5fde6;
}

footer p {
    margin: 5px;
}

footer a {
    color: #a3bd8b;
}

/* For mobile layouts. */
@media (max-width: 800px) {
    .decor {
        display: none;
    }
}