/* ============================================================
   VARIABLES
   ============================================================ */

:root {
    --Kraft:            #fff495;
    --Kraft-dark:       #cdc477;
    --otherKraft:       #fff7bb;
    --otherKraft-dark:  #ccc595;
    --Trafk:            #5a3998;
    --Trafk-dark:       #432a71;
    --otherTrafk:       #9862ff;
    --otherTrafk-dark:  #8456dd;
}


/* ============================================================
   RESET & BASE
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
}

html {
    height: 100%;
    margin: 0;
}

body {
    background-image: url("wiki/assets/SourceHop-Images/TrafkSite/13WorldsBG3.png");
    background-color: black;
    background-size: contain;
    background-repeat: repeat-y;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

video, iframe, img, audio {
    border: none;
    max-width: 100%;
    max-height: 100%;
}

.hidden {
    display: none;
}

#spacer {
    left: 0;
    right: 0;
    height: 35px;
    opacity: 0;
    display: flex !important;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, p, li, header, footer, label {
    color: white;
}

h1, h1 a { font-size: 30px; }
h2, h2 a { font-size: 25px; }
h3, h3 a { font-size: 20px; }
h4, h4 a { font-size: 18px; }

p, li, a, label, p a, li a, label a {
    font-size: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
}

li {
    list-style-position: outside;
    margin-left: 35px;
}


/* ============================================================
   INTERACTIVE — .do GLOW EFFECT
   ============================================================ */

.do {
    display: inline-flex;
    flex-wrap: wrap;
    transition: scale .165s ease-in-out;
    filter: drop-shadow(0px 0px 2px var(--Kraft)) drop-shadow(0px 0px 5px var(--Kraft));
    color: var(--Kraft);
    padding-left: 5px;
    padding-right: 5px;
}

.do:hover {
    cursor: pointer;
    scale: 1.065;
}


/* ============================================================
   NAVIGATION — BUBBLE STYLE
   ============================================================ */

.nav {
    margin-top: 3px;
    margin-bottom: 3px;
    width: 85px;
    height: 85px;
    align-content: center;
    justify-content: center;
    background-image: url("wiki/assets/SourceHop-Images/TrafkSite/tb.png");
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.nav:hover {
    background-image: url("wiki/assets/SourceHop-Images/TrafkSite/tbs.png");
}

.nav.nodo {
    height: 35px;
    width: 65px;
    padding: 5px;
    background-image: url("wiki/assets/SourceHop-Images/TrafkSite/tb.png");
}


/* ============================================================
   NAVIGATION — SIDEBAR NAV
   ============================================================ */

nav {
    top: 115px;
    bottom: 85px;
    padding-top: 35px;
    padding-bottom: 35px;
    display: flex;
    width: 115px;
    position: fixed;
    left: -105px;
    background: var(--otherKraft);
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    filter: drop-shadow(0px 0px 8px var(--Kraft));
    gap: 2%;
    z-index: 555;
    overflow: scroll;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    border-top-right-radius: 65px;
    border-bottom-right-radius: 65px;
    transition: left 0.085s ease-in-out;
}

nav:hover {
    left: 0;
}

nav .do {
    padding-left: 0;
    padding-right: 0;
}

nav .nodo:hover {
    scale: 1 !important;
}


/* ============================================================
   SECTION HEADER BAR
   ============================================================ */

.header {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -5px;
    padding: 10px;
    background: var(--otherTrafk);
    filter: drop-shadow(0px 3px 3px var(--otherTrafk-dark)) drop-shadow(0px 3px 3px var(--otherTrafk-dark));
    margin-bottom: 15px;
    border-radius: 15px;
    text-align: center;
}

.header .do {
    padding: 0;
}

.date p {
    position: absolute;
    top: -5px;
    right: 5px;
    font-size: 10px;
}


/* ============================================================
   LAYOUT — MAIN
   ============================================================ */

main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    flex: 1 0 auto;
    z-index: 11;
    padding-left: 15px;
    padding-top: 135px;
    padding-bottom: 85px;
    position: relative;
}

section {
    position: absolute;
    margin: 35px;
    padding: 35px;
    padding-bottom: 10px !important;
    background: black;
    filter: drop-shadow(0px 0px 8px var(--Kraft)) drop-shadow(0px 0px 8px var(--Kraft));
    overflow: scroll;
    scroll-behavior: smooth;
    border-radius: 35px;
}


/* ============================================================
   HEADER
   ============================================================ */

header {
    padding: 10px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 65px;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--Kraft);
    filter: drop-shadow(0px 0px 3px var(--Kraft)) drop-shadow(0px 0px 5px var(--Kraft));
    border-bottom-left-radius: 65px;
    border-bottom-right-radius: 65px;
    z-index: 999;
}

header .do,
footer .do {
    filter: drop-shadow(0px 0px 3px var(--otherKraft)) drop-shadow(0px 0px 5px var(--otherKraft));
}

header .mainlogo {
    height: 65px;
    width: auto;
}

header #search {
    position: fixed;
    right: 65px;
    bottom: 5px;
    border: none;
    height: 35px;
    width: 165px;
    background-image: url("wiki/assets/SourceHop-Images/TrafkSite/tb.png");
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

header #search:hover {
    background-image: url("wiki/assets/SourceHop-Images/TrafkSite/tbs.png");
}

header input[type="search"]::placeholder {
    text-align: center;
    font-size: 15px;
    font-weight: bolder;
    color: var(--Kraft);
}

header #chatbot,
header #wikih {
    position: fixed;
    min-width: 35px;
    min-height: 35px;
    max-width: 35px;
    max-height: 35px;
    right: 85px;
    top: 5px;
}

header #chatbot {
    right: 165px;
}

header #menuimg {
    height: 35px;
    width: auto;
    position: fixed;
    left: 65px;
    display: flex;
    padding: 0;
    top: 35px;
    margin: 0;
}


/* ============================================================
   MENU (HEADER DROPDOWN)
   ============================================================ */

#menu {
    position: fixed;
    left: 65px;
    width: 35px;
    padding: 0;
    margin: 0;
}

.hidden-checkbox {
    position: fixed;
    opacity: 0;
    height: 0;
    width: 0;
}

.menudiv {
    display: none;
    position: fixed;
    padding: 0;
    margin: 0;
}

#menu:has(input:checked) ~ .menudiv {
    display: flex;
}

.nav.menudiv {
    max-width: 65px;
    max-height: 65px;
}

.menu a.do,
.menu a {
    font-size: 12px;
    filter: drop-shadow(0px 0px 3px var(--Kraft)) drop-shadow(0px 0px 5px var(--Kraft));
    color: var(--Kraft);
}

/* Menu item positions */
#Tools  { left: 135px; }
#wikih  { right: 335px; }
#chatbot { right: 265px; }


/* ============================================================
   FOOTER
   ============================================================ */

footer {
    justify-content: center;
    padding: 0;
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45px;
    background: var(--Kraft);
    filter: drop-shadow(0px 0px 3px var(--Kraft)) drop-shadow(0px 0px 5px var(--Kraft));
    flex-shrink: 0;
    z-index: 999;
    border-top-left-radius: 65px;
    border-top-right-radius: 65px;
}

footer .nav {
    max-width: 30px;
    max-height: 30px;
}

footer a {
    font-size: 12px;
}

/* Footer link positions */
#rights        { color: var(--Trafk-dark); position: absolute; right: 25%;  bottom: 8px; }
#contact       { position: absolute; bottom: 8px; left: 45px; }
#license       { position: absolute; bottom: 8px; left: 105px; }
#legalnotice   { position: absolute; bottom: 8px; left: 165px; }
#privacyPolicy { position: absolute; bottom: 10px; left: 225px; }
#volume        { position: absolute; bottom: 8px; right: 35px; }


/* ============================================================
   RESPONSIVE — max-width: 1080px
   ============================================================ */

@media (max-width: 1080px) {

    /* Typography */
    h1, h1 a { font-size: 12px; }
    h2, h2 a { font-size: 8px; }
    h3, h3 a { font-size: 18px; }
    h4, h4 a { font-size: 15px; }

    p, li, a, label {
        font-size: 10px;
    }

    li {
        margin-left: 21px;
    }

    /* Layout */
    main {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    section {
        margin: 15px;
        padding: 15px;
        border-radius: 23px;
    }

    .header {
        margin: 5px;
    }

    .date p {
        top: 65%;
        font-size: 8px;
        font-weight: bold;
    }

    /* Header */
    header {
        height: 45px;
    }

    header .mainlogo {
        height: 35px;
        padding: 0;
    }

    .nav.menudiv {
        max-width: 35px;
        max-height: 35px;
    }

    header #search {
        height: 25px;
        width: 65px;
        right: 35px;
        bottom: 5px;
    }

    header input[type="search"]::placeholder {
        font-size: 8px;
    }

    header #menuimg {
        max-height: 25px;
        left: 35px;
        top: 20px;
    }

    header #chatbot,
    header #wikih {
        min-width: 20px;
        min-height: 20px;
        max-width: 20px;
        max-height: 20px;
        right: 35px;
        top: 5px;
    }

    header #chatbot {
        right: 75px;
    }

    header #chatbot a {
        font-size: 7px;
    }

    nav {
        width: 65px;
        left: -50px;
    }
    nav .nav {
        max-width: 45px;
        max-height: 45px;
    }


    /* Footer */
    footer {
        height: 35px;
    }

    footer h4 {
        font-size: 6px;
    }

    footer .nav {
        max-width: 35px;
        max-height: 15px;
    }

    footer .nav a {
        font-size: 5px;
    }

    footer #volume {
        width: 45px;
    }

    #rights {
        position: absolute;
        right: 15%;
        bottom: 8px;
    }

}