:root {

--cloud: #E0F2FF;
--porcelain-blue: #B5E1FF;
--seafoam: #93E5AB;
--mint: #65B891;
--dark-cyan: #4E878C;
--hillside: #00241B;

}

@font-face {
    font-family: 'Dongle';
    src: url('');
}

@font-face {
    font-family: 'Simply the Best';
    src: url('KGSimplytheBest.woff') format('woff2'),
        url('KGSimplytheBest.woff2') format('woff');
}

@font-face {
    font-family: 'Chocolate';
    src: url('ChocolateRegular.woff2') format('woff2'),
        url('ChocolateRegular.woff') format('woff');
}

* {
    margin: 0;
}

article:not(:target) {display: none}

body {
    background: #B5E1FF;
    background: linear-gradient(180deg,rgba(181, 225, 255, 1) 50%, rgb(12, 78, 61) 100%);
}

main {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 1em 6em 0 6em;
    align-items: center;

    color: var(--hillside);
}

header {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: -1em;
    padding: 2em 0 7em 0;

    background-image: url(clouds2.png);
    background-repeat: repeat-x;
    z-index: 3;
}

header h1 {
    font-family: 'Chocolate';
    font-weight: 100;
    font-size: 4em;
    text-align: center;
    color: #0b5252;

    position: relative;
    z-index: 2;

    width: 100%;
    background:
    -webkit-linear-gradient(#00241B, #65B891);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(-1px 0 0 white)
        drop-shadow(1px 0 0 white)
        drop-shadow(0 -1px 0 white)
        drop-shadow(0 1px 0 white);
}

header h2 {
    font-family: 'Simply the Best';
    font-weight: 100;
    font-size: 1.2em;

    display: flex;
    gap: 0.4em;
    position: relative;
    z-index: 1;
    
    bottom: 3em;
    background-image: url(clouds-hi.png);
    background-size: cover;
    background-position: center;
    height: 6.6em;
    align-items: center;
    padding: 2em 1em 0 1em;
}

article {
    width: 60%;
    margin-top: 15em;
    margin-bottom: -8em;
}

p {
    font-family: 'Dongle';
    font-size: 1.8em;
    line-height: 1.2;
    margin: 1.2em 0 1.2em 0;
}

table {
    width: min-content;
    border-collapse: collapse;
    letter-spacing: 1px;
    font-family: 'Dongle';
    font-size: 1.8em;
    margin-top: -0.5em;
    width: 10em;
}

th,
td {
    border: 2px dotted #fff;
    padding: 8px 10px;
}

th {
    font-weight: 600;
    background-color: #E0F2FF;
    color: var(--hillside);
    text-decoration: underline dashed #00241B;
}

td {
    background-color: #d1ecff;
}

td:last-of-type {
    text-align: center;
}

.wrapper {
    display: flex;
    flex-flow: row-reverse;
    gap: 5em;
}

.wrapper img {
    height: auto;
    width: 20em;
    margin-bottom: 0.9em;
    position: relative;
    right: 0.8em;
    filter:brightness(110%) saturate(80%);
}

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

#wave-bg {
    width: 100%;
    position: relative;
    bottom: -1em;
    pointer-events: none;
}

.moveright {
    margin-right: 5em;
    margin-bottom: 2.2em;
}

.moveleft {
    margin-left: 5em;
    margin-bottom: 2.2em;
}

header h2 a, header h2 span{
    filter: drop-shadow(0px 0px 14px #00241b7a);
}

header a:nth-of-type(even) {
    color: #2a331e;
    text-decoration: underline dotted var(--dark-cyan);
}

h2 span {
    color: var(--dark-cyan);
}

header a:nth-of-type(odd) {
    color: #393f83;
    text-decoration: underline dotted var(--hillside);
}

.important-txt {
    text-decoration: underline wavy var(--cloud);
}

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

    main article {
        width: 20em;
    }

    .wrapper {
        flex-direction: column-reverse;
        gap: 3em;
    }

    #wave-bg {
        display: none;
    }

    body {
        background: #B5E1FF;
        background: linear-gradient(180deg,rgba(181, 225, 255, 1) 50%, rgb(80, 127, 131) 100%);
    }

    article {
        margin-bottom: 2em;
    }

}

@media (prefers-color-scheme: dark) {

    body {
        background: #00241B;
        background: linear-gradient(180deg, rgba(22, 26, 55, 1) 50%, rgb(134, 138, 164) 100%);
    }

    main {
        color: var(--cloud);
    }

    header {
        background-image: url(clouds2-inv.png);
    }

    header h1 {
        color: #E0F2FF;
        background:
        -webkit-linear-gradient(#93E5AB, #E0F2FF);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter:
            drop-shadow(-1px 0 0 var(--dark-cyan))
            drop-shadow(1px 0 0 var(--dark-cyan))
            drop-shadow(0 -1px 0 var(--dark-cyan))
            drop-shadow(0 1px 0 var(--dark-cyan));
    }

    header h2 {
        background-image: url(clouds-hi-inv.png);
    }

    th,
    td {
        border: 2px dotted #fff;
    }

    th {
        background-color: #1b233a;
        color: var(--cloud);
        text-decoration: underline dashed #7eb9aa;
    }

    td {
        background-color: #657c8b;
    }

    header h2 a, header h2 span{
        filter: drop-shadow(0px 0px 14px #3f8a777a);
    }

    header a:nth-of-type(even) {
        color: #c7d4b6;
        text-decoration: underline dotted #a6b88e;
    }

    h2 span {
        color: var(--porcelain-blue);
    }

    header a:nth-of-type(odd) {
        color: #bec1e4;
        text-decoration: underline dotted #bec1e4;
    }

    .important-txt {
        text-decoration: underline wavy var(--cloud);
    }

    #wave-bg {
        filter: brightness(52%) hue-rotate(100deg);
        -webkit-filter: brightness(52%) hue-rotate(100deg);
        -moz-filter: brightness(52%) hue-rotate(100deg);
    }

}