body {
    --dark-color: #196b19;
    --light-color: #c7ffb1;
    --accent-color: #d86e10;

    background-color: var(--light-color);
    color: var(--dark-color);

    height: 100%;
    width: 100vw;

    margin: 0;

    font-family: "Farro", sans-serif;
    font-weight: 400;

    scrollbar-width: 0;
}

a {
    color: var(--dark-color);
    text-decoration: none;
}

.layout {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content {
    width: min(100vw, 1080px);

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;
}

div .link {
    padding: 2px;
    cursor: pointer;

    color: inherit;
    text-decoration: none;
}

div .link:hover {
    border-radius: 5px;

    transition: background-color 0.3s, color 0.3s;
    
    background-color: var(--accent-color);
    color: white;
}

/* View styles */

.view-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    
    align-items: center;
}

.view-select {
    background-color: white;

    width: calc(108px * var(--view-count));
    height: 30px;

    margin-top: 15px;
    margin-bottom: 15px;

    border: 2px solid var(--dark-color);
    border-radius: 10px;

    display: flex;
    flex-direction: row;
}

.view-option {
    width: calc(100% / var(--view-count));
    height: 100%;

    align-content: center;
}

.view-option:hover {
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    
    background-color: var(--dark-color);
    color: white;
}

.view-left {
    border-radius: 5px 0px 0px 5px;
    border-right: inherit;
}

.view-center {
    border-right: inherit;
}

.view-right {
    border-radius: 0px 5px 5px 0px;
}

.view-active {
    background-color: var(--dark-color);
    color: white;
}