/* -------------------------------------- body */
body {
    background: #f9fbe9;
}
/* -------------------------------------- container */
.container {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.cont-flex {
    display: flex;
    gap: 10px;
}

.cont-flex > div > div {
    border: 1px solid;
    border-radius: 3px;
    background: white;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cont-h1 {
    font-family: georgia;
    font-weight: lighter;
    font-style: italic;
}

.cont-h3 {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    background: linear-gradient(to right, #fedede 0%, #fef0f000 100%);
    text-shadow: var(--shad3);
}
/* -------------------------------------- navigation */
.nav-flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.navigation {
    height: -webkit-fill-available;
    width: 190px;
}

.nav-buttons {
    display: flex;
    flex-direction: column;
}

.nav-button {
    display: flex;
    border: 1px solid;
    border-top: 0;
    border-bottom: 0;
    height: 25px;
    letter-spacing: 2px;
    background: linear-gradient(to bottom,  #ffffff 0%,#f3fafb 35%,#e0f1f4 100%);
    align-items: center;
    font-style: italic;
    transition: 0.2s;
    transition-timing-function: ease-in-out;
}

.nav-button:hover {
    letter-spacing: 4px;
}

#navbutton-top {
    border-top: 1px solid;
    border-radius: 3px 3px 0px 0px;
}

#navbutton-bottom {
    border-bottom: 1px solid;
    border-radius: 0px 0px 3px 3px;
}
/* -------------------------------------- terms */
.terms {
    width: 190px;
}

.terms-text {
    font-size: 11px;
    font-style: italic;
}
/* -------------------------------------- main */
.main-flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main {
    width: 655px;
    height: 289px;
}

.tab-inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.graphic-flex {
    display: flex;
    height: 256px;
    width: 643px;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 10px;
}