/* Hi */

    page-component {
        position: relative;
        display: block;
        color: black;
        width: 100%;
        height: fit-content;
        padding: 0;
        margin: 0;
    }

    page-component:nth-child(even) {
          background-color: #fefefe;
    }

    page-component:nth-child(odd) {
          background-color: #ffd479;
    }

    /* page-component:before {
        position: absolute;
        content:'';
    }  */

    .diagonal {
        z-index: 1;
        padding: 3em;
    }

    .diagonal:before {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
        -webkit-transform-origin: 3% 0;
        transform-origin: 3% 0;
        top: 0;
        left: -25%;
        z-index: -1;
        width: 125%;
        height: 75%;
        background: inherit;
    }

    .diagonal-inv {
        z-index: 1;
        padding-top: 2em;
        padding-bottom: 3em;
    }

    .diagonal-inv:before {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
        -webkit-transform-origin: 3% 0%;
        transform-origin: 3% 0%;
        top: 0%;
        left: -25%;
        z-index: -1;
        width: 125%;
        height: 75%;
        background: inherit;
    }

    .page-background {
        display:flex;
        justify-content: center;
        height: 100%;
        /* padding-left: 1vh; */
        /* padding-right: 1vh; */
    }

    .page-background > p {
        color: black;
        font-family: fantasy;
    }

    /* @media only screen and (max-width: 320px) {
        .page-background {
            padding-left: 1vw;
            padding-right: 1vw;
        }
    }

    @media only screen and (min-width: 321px) and (max-width: 600px) {
        .page-background {
            padding-left: 2vw;
            padding-right: 2vw;
        }
    }


    @media only screen and (min-width: 601px) {
        .page-background {
            padding-left: 4vw;
            padding-right: 4vw;
        }
    } */
ol {
        ol { list-style-type: lower-alpha; }
    }
.waajw-ttj .footer{display:flex;flex-flow:row wrap;justify-content:space-around;background-color:var(--footer-bg, #ffd479);font-family:"Roboto",serif;font-optical-sizing:auto;font-weight:100;font-style:normal;font-variation-settings:"wdth"100}.waajw-ttj .footer>p{color:var(--text-color, #101010);font-size:0.5rem;> a {
            text-decoration: underline;
            color: var(--text-color, #101010);
        }}
menu-component {
    & button {
        border: none;
        padding: 0;
    }

    & nav {
        display: flex;
        flex-direction: column;
        margin-top: 0;
        padding-top: 1rem;
        height: 100vh;
        right: 0;
        top: 0;
        background: var(--menu-bgc, #fefefe);
        color: var(--menu-color, #8E44AD);
        width: var(--menu-width, 280px);
        box-shadow: 0 1px 20px rgba(0,0,0,0.25);
        position: fixed;
        z-index: 1;
        transform: translateX(200px);
        opacity: 0;
        transition: all var(--hamburger-transition, .2s) ease-in-out;

        a {
            /* font */
            font-family: "Roboto", serif;
            font-optical-sizing: auto;
            font-weight: 300;
            font-style: normal;
            font-variation-settings: "wdth" 100;

            text-decoration: none;
            color: var(--text-color, #ff00ff);

        }

        > .footer {
            flex-direction: column;
            display: flex;
            margin-top: auto;
            width: 100%;
            align-self: flex-end;
            justify-content: space-evenly;

            /* font */
            font-family: "Roboto", serif;
            font-optical-sizing: auto;
            font-weight: 200;
            font-style: normal;
            font-variation-settings: "wdth" 100;

            .text {
                vertical-align: top;
            }

            .menu-row {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-evenly;
                align-content: center;

                .small-text {
                    font-size: 18px;
                    font-weight: 300;
                }
            }

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

                &:hover {
                    color: var(--menu-hover-bgc, #1111ee);
                }
            };
        }

        & ul {
            list-style: none;
            padding: 0;

            & li {
                width: 100%;
                transition: all .2s ease;

                padding: 0;

                & a {
                    display: block;
                    padding: 20px;

                    &:hover {
                        color: var(--text-color, #1111ee);
                    }
                }

                &:hover {
                    background: var(--menu-hover-bgc, black);
                    color: var(--menu-hover-color, #fefefe);
                    transition: all .2s ease;
                }
            }
        }

        &.visible {
            display: block;
            transform: translateX(0);
            opacity: 1;
        }
    }
}

.hamburger {
    height: 50px;
    width: 50px;
    background: var(--hamburger-bgc, white);
    position: fixed;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0);
    transition: all .2s ease;

    &.close {
        top: 10px;
        right: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.15);

        & span {
            &:first-child {
                top: 15px;
                transform: translate(-14px, 10px) rotate(135deg);
            }

            &:nth-child(2) {
                left: -20px;
                opacity: 0;
            }

            &:last-child {
                top: 15px;
                transform: translate(-14px, 10px) rotate(-135deg);
            }
        }
    }
    z-index: 999;

    &:hover {
        background: var(--hamburger-hover-color, #fefefe);
        box-shadow: 0 0 4px rgba(0,0,0,0.1);
        transform: scale(1.1);
        transition: all .2s ease;
    }

    & span {
        display: block;
        position: absolute;
        height: 2px;
        width: 28px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--hamburger-color, black);
        border-radius: 10px;
        transition: all .15s ease;

        &:first-child {
            top: 17px;
        }

        &:nth-child(2) {
            top: 25px;
        }

        &:last-child {
            top: 33px;
        }
    }
}
:root {
        --slide-bg: #f9f9f9;
        --slide-defaultColor: #fefefe;
        --slide-rowColor: #ffd479;
        --slide-shadowColor: #8a744433;
        --footer-bg: #ffd479;
        --text-color: #090909;
        --text-link-hover-color: #ffd479;
    }

    h1 {
        font-family: "Roboto", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings: "wdth" 100;
    }

    p {
        font-family: "Roboto", serif;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        font-variation-settings: "wdth" 100;
    }

    /** overwrite center for this page */
    .page-background {
        justify-content: start;
    }

    section {
        width: 100%;
        padding: 1rem;
    }

    @media only screen and (max-width: 720) {
        section {
            padding: 0.5rem;
        }
    }

    @media only screen and (max-width: 380) {
        section {
            padding: 0.25rem;
        }
    }
* {
    box-sizing: border-box;
}

html {
    font-size: calc(15px + 0.390625vw);
    scroll-behavior: smooth;
}

@media only screen and (max-width: 380) {
    html {
        font-size: calc(12px + 0.390625vw);
    }
}

h1 {
    font-size: 6vmin;
    margin: 0 0 1rem 0;
    padding: 0;
}

h2 {
    font-size: 4vmin;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fefefe;
    /* overflow-x: hidden; */
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

p {
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-align: justify;
}

li {
    padding-bottom: 1rem;
    /* font */
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

li:last-child {
    padding-bottom: 0;
}

/*
    Fonts
*/
.roboto-200 {
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}


/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    background-color: var(--input-text-bgColor, rgba(0, 0, 0, 0));
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */
    border: 1px solid; /* Gray border */
    border-color: var(--input-submit-hover-bgColor, rgba(0, 0, 0, 0));;
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

textarea {
    resize: none;
}

input[type=text]:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: #ccc;
}


/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: var(--input-submit-hover-bgColor, rgba(0, 0, 0, 0));
    color: black;
    padding: 12px 20px;
    /*border: 0px solid #ccc;*/
    border: 1px solid;
    border-color:  var(--input-submit-hover-bgColor, rgba(0, 0, 0, 0));
    cursor: pointer;

    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: var(--input-submit-hover-bgColor, rgba(0, 0, 0, 0));
    border: 1px solid;
    border-color: #ccc;
    font-weight: 400;
    font-weight: 500;
}

/*
Slide Show
*/
slide-show {
    --padding-left: 3rem;
    --padding-right: 3rem;

    column-gap: 0cap;
}

/*
Hamburger Menu
*/
menu-component {
    --color-bg: #ffd479;
    --text-color: #333333;
    --white: #fefefe;
    --purple: #ffd479;
    --hamburger-bgc: var(--white);  /* hamburger background color */
    --hamburger-color: var(--color-bg); /* hamburger text color */
    --hamburger-hover-color: var(--bright-white); /* hover state text color */
    --menu-bgc: var(--white);  /* background color for the expanded menu */
    --menu-color: var(--text-color);  /* text color for expanded menu */
    --menu-hover-bgc: var(--purple); /* hover background color inside menu */
    --menu-hover-color: var(--white); /* hover text color inside menu */
    --menu-width: 200px;
    --hamburger-transition: .2s;  /* default is .2s */

    /* nav {
        display: flex;
        flex-direction: column;

        &.visible {
            display: flex;
        }

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

        .footer {
            display: flex;
            margin-top: auto;
            width: 100%;
            align-self: flex-end;
            justify-content: space-evenly;

            font-family: "Roboto", serif;
            font-optical-sizing: auto;
            font-weight: 200;
            font-style: normal;
            font-variation-settings: "wdth" 100;

            .text {
                vertical-align: top;
            }

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


    a {
        text-decoration: none;

        &:hover {
            color: var(--text-link-hover-color, #1111ee);
            transition: all .2s ease;
        }
    }

}