:root {
    --Black:    33, 29, 38;

    --Purple:   184, 130, 251;
    --Blue:     176, 172, 253;
    --Pink:     242, 179, 238;
    --White:    212, 223, 237; 

    --DPurple:  55, 36, 75;
    --DBlue:    62, 61, 92;
    --DPink:    94, 69, 92;
    --DWhite:   89, 91, 97;
}

/*ISSUE CHECKER
main {
    border: solid, red, 1px;
}
header, nav, section, article, footer, aside {
    border: solid, yellow, 1px;
}
figure, details, mark, summary, time, div {
    border: solid, lime, 1px;
}
img, map, ul, table {
    border: solid, cyan, 1px;
}
h1, h2, h3, h4, h5, h6, p, li, figcaption, th, td {
    border: solid, magenta, 1px;
}*/

html, body {
    margin: 0;
    width: 99vw;
    font-family: "ivysoft-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 600;
}

body {
    padding-top: 30px;
    height: 99%;
}

main {
    height: 65vh;
    width: 80%;
    margin: auto;
    background-size: cover;
    background-position: bottom;
    border: 5px solid rgb(var(--White));
}

header {
    width: 90%;
    margin: auto;
}

section {
    color: rgb(var(--White));
    background-color: rgb(var(--Black));
    min-height: fit-content;
    height: 20vh;
    width: 80%;
    margin: auto;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    border: 5px solid rgb(var(--White));
}

#Dialogue {
    height: fit-content;
    width: 95%;
    margin: 10px;
    font-size: 20px;
}

#Name {
    width: fit-content;
    margin: 10px;
    font-variation-settings: "slnt" 0, "wght" 800;
    font-size: 32px;
    text-decoration: underline;
    text-underline-offset: 5px;
}

#TextBox {
    width: 90%;
    min-height: fit-content;
    height: 90%;
    margin: 10px auto;
}

.CharBox {
    width: 202px;
    height: 461px;
    position: fixed;
    filter: blur(1px) brightness(85%);
    transition: all 1000ms;
    bottom: 0;
    margin-bottom: 31.5vh;
}

img {
    max-width: 202px;
    max-height: 461px;
    width: 35vw;
    position: inherit;
}

.LCharBox {
    left: 12%;
}

.RCharBox {
    transform: scaleX(-1);
    right: 12%;
}

.Front {
    z-index: 1;
}

.Back {
    z-index: 0;
}

#L2 {
    margin-left: 85px;
}

#R2 {
    margin-right: 135px;
}

.Active {
    z-index: 2;
    filter: none;
}

#TimeMachine {
    min-width: min-content;
    max-width: 7%;
    min-height: fit-content;
    height: 90%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(var(--White));
    border: 5px solid rgb(var(--DWhite));
    border-radius: 20px;
    padding: 5px 0;
}

.NavButton {
    width: 65px;
    height: 60px;
    margin: auto;
    font-family: "ivysoft-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 800;
    border-radius: 10px;
}

.NavButton img {
    width: 100%;
    height: 100%;
}

#Next {
    background-color: rgb(var(--Blue));
    border: 5px solid rgb(var(--DBlue));
    color: rgb(var(--DBlue));
}

#Prev {
    background-color: rgb(var(--Pink));
    border: 5px solid rgb(var(--DPink));
    color: rgb(var(--DPink));
}

#Home {
    background-color: rgb(var(--Purple));
    border: 5px solid rgb(var(--DPurple));
    color: rgb(var(--DPurple));
}

#Dialogue button {
    min-width: fit-content;
    width: 65px;
    height: 60px;
    margin: 7px;
    font-family: "ivysoft-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 500;
    font-size: 20px;
    background-color: rgb(var(--White));
    color: rgb(var(--DWhite));
    border: 5px solid rgb(var(--DWhite));
    border-radius: 10px;
    transition: all 200ms;
}

#Dialogue button:hover {
    background-color: rgb(var(--DWhite));
    color: rgb(var(--White));
    border: 5px solid rgb(var(--White));
    transition: all 200ms;
}