/* Responsive technique via https://github.com/wilsmex/edu */

@media only screen and (max-width: 600px) {
    :root {
        --menu-button-color: #ecf2e6;
    }

    #container {
        display: block;
    }

    #nav {
        width: 100%;
    }

    #nav .menu-button {
        display: none;
    }

    #nav .menu-icon {
        display: block;
        cursor: pointer;
        padding: 28px 20px;
        user-select: none;
        position: absolute;
        left: 0;
        top: 0;
    }

    #nav .menu-icon .nav-icon {
        background: var(--menu-button-color);
        display: block;
        width: 18px;
        height: 2px;
        position: relative;
        transition: background .2s ease-out;
    }

    #nav .menu-icon .nav-icon:before,
    #nav .menu-icon .nav-icon:after {
        background: var(--menu-button-color);
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
    }

    #nav .menu-icon .nav-icon:before {
        top: 5px;
    }

    #nav .menu-icon .nav-icon:after {
        top: -5px;
    }

    #menu {
        clear: both;
        max-height: 0;
        width: 100%;
        transition: max-height .2s ease-out;
        overflow: hidden;
        margin-block-start: 0;
        margin-block-end: 5px;
    }

    #nav .menu-button:checked~#menu {
        max-height: none;
        overflow: visible;
    }

    #nav .menu-button:checked~.menu-icon .nav-icon {
        background-color: transparent;
    }

    #nav .menu-button:checked~.menu-icon .nav-icon:before {
        transform: rotate(-45deg);
        top: 0;
    }

    #nav .menu-button:checked~.menu-icon .nav-icon:after {
        transform: rotate(45deg);
        top: 0;
    }

    #content {
        padding-left: unset;
        width: unset;
        min-width: unset;
    }

    body {
        font-size: 18px;
    }
}

@media only screen and (max-width: 375px) {

    .leftimage,
    .rightimage {
        float: unset;
        margin-right: unset;
        margin-left: unset;
        /* aligns images center as well */
        text-align: center;
    }
}


/* Printing */

@media print {
    body {
        background-color: transparent;
    }

    #nav {
        display: none;
    }
}