:root {
    --darkgreen: rgb(16, 96, 16);
    --deepgreen: rgb(32, 144, 50);
    --midgreen: rgb(58, 181, 74);
    --lightgreen: rgb(223, 201, 121);
    --darkblue: rgb(0, 112, 138);
    --midblue: rgb(0, 182, 188);
    --darkgrey: rgb(102, 102, 102);
    --brown: rgb(149, 100, 9);
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2em;
    color: var(--darkgrey);
}

div.main {
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
        url('../images/lotus-600.png') no-repeat right top;
    min-height: 500px;
    padding: 0.5em;
    margin: 0 auto 8px auto;
    width: 96%;
    box-shadow: 2px 2px 6px rgba(72, 16, 16, .4);
    border-radius: 0 0 0.5em 0.5em;
}

.red {
    color: rgb(128, 16, 16);
}

p {
    text-align: justify;
    padding: 0 0.75em;
}

table {
    margin: 0 0.75em;
}

td {
    padding: 0.25em;
}

a {
    text-decoration: none;
    color: var(--darkgrey);
    font-weight: bold;
}

a:hover {
    color: var(--lightgreen);
}

.darkgreen {
    color: var(--deepgreen);
}

.midgreen {
    color: var(--midgreen);
}

.lightgreen {
    color: var(--lightgreen);
}

.blue {
    color: var(--midblue);
}

.darkblue {
    color: var(--darkblue);
}

.darkgrey {
    color: var(--darkgrey);
}

h1, h2, h3, h4 {
    margin-left: 2rem;
}

.small {
    font-size: 0.8em;
}

.large {
    font-size: 1.4em;
}

.bold {
    font-weight: bold;
}

img.rounded {
    border-radius: 0.5em;
    margin-right: 0.5em;
}

div.clear {
    font-size: 1px;
    clear: both;
    max-height: 1px;
}

div.menu-container {
    margin-bottom: -12em;
}

div.menu-container #menu-toggle {
    opacity: 0;
    display: none;
}

#menu-toggle:checked + .menu-toggle > span {
    transform: rotate(45deg);
}

#menu-toggle:checked + .menu-toggle > span::before {
    top: 0;
    transform: rotate(0deg);
}

#menu-toggle:checked + .menu-toggle > span::after {
    top: 0;
    transform: rotate(90deg);
}

#menu-toggle:checked ~ ul.menu-box {
    left: 0 !important;
}

.menu-toggle {
    position: relative;
    display: block;
    top: 24px;
    left: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 999;
}

.menu-toggle > span, .menu-toggle > span::before, .menu-toggle > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background-color: var(--darkgrey);
    transition-duration: .5s;
}

.menu-toggle > span::before {
    content: '';
    top: -10px;
}

.menu-toggle > span::after {
    content: '';
    top: 10px;
}

ul.menu-box {
    display: block;
    position: relative;
    top: -30px;
    left: -100%;
    width: 275px;
    margin: 0;
    padding: 3rem 0 0.75rem 0;
    list-style: none;
    background-color: white;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    border-radius: 0.5em;
    transition-duration: .5s;
    z-index: 998;
}

ul.menu-box li a {
    display: block;
    padding: 12px 24px;
    font-size: 1.75em;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .5s;
    color: var(--darkgrey);
}

ul.menu-box li a:hover {
    background-color: rgba(243, 208, 121, 0.25);
    color: var(--darkgrey);
}

.toggle-container {
    margin-block-end: 5px;
}

.toggle-container div.toggle-content {
    border: 2px solid var(--brown);
    border-radius: 0.5em;
    margin: 1em 1em 1em 0;
    padding: 0 1em;
    transition: opacity 1s;
}

.toggle-container div.toggle-content.shown {
    opacity: 1;
}

.toggle-container div.toggle-content.hidden {
    opacity: 0;
    overflow: hidden;
    display: none;
}

.toggle-container div.toggle-content p {
    padding: 0;
}

.toggle-container div.toggle-content ul {
    margin-block-end: 1em;
}

.content-left {
    float: left;
    padding-right: 0.5em;
}

.content-right {
    float: right;
    padding-left: 0.5em;
}

td.price {
    font-size: 1.5rem;
    font-weight: bold;
}

div.footer-container {
    margin-top: 1.5em;
    margin-bottom: 1em;
    text-align: center;
}

div.footer-container .footer {
    display: inline-block;
}

div.footer-container .footer .footer-item {
    padding: 0.25em 1em;
    border-left: 1px solid var(--brown);
    border-right: 1px solid var(--brown);
    margin-left: -1px;
    overflow: hidden;
    font-size: 0.8em;
    text-align: left;
}

@media only screen and (min-width: 888px) {
    div.footer-container .footer .footer-item {
        float: left;
        width: unset;
    }
}

@media only screen and (min-width: 990px) {
    body {
        font-size: 1em;
    }

    div.main {
        background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
            url('../images/lotus-800.png') no-repeat right top;
    }

    div#content {
        min-height: 520px;
    }

    div.menu-container {
        margin-bottom: -13em;
    }

    td.price {
        font-size: 1.3rem;
        font-weight: bold;
    }
}

@media only screen and (min-width: 1140px) {
    body {
        font-size: 0.875em;
    }

    div.main {
        background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
            url('../images/lotus-1000.png') no-repeat right top;
        max-width: 1120px;
    }

    div#content {
        min-height: 600px;
    }

    div.menu-container {
        margin-bottom: -14em;
    }

    td.price {
        font-size: 1rem;
        font-weight: bold;
    }
    
    div.footer-container .footer .footer-item {
        font-size: 0.75em;
    }
}