body {
    background: #1D1E1D;
}

section {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ranas-c3-custom {max-width: 800px; margin: 0 auto;}
p {margin: 0;}

.header-container {
    display: flex;
    width: 100%;
    border-bottom: 8px double #000;
    position: relative;
    overflow: clip visible;
}

/* HEADER BAR */

.header-bar {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    width: 100%;
    height: 125px;
    padding: 0rem;
    transition: width 0.3s;
    margin-left: -16px;
}

/* mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 30px 100%; */

.header-bar:not(.selected) {
    width: 75px;
}

.header-bar:not(.selected):hover {
    width: 90px;
}

.header-bar:not(.selected):not(:hover) .background {
    filter: grayscale();
}

.header-container .header-bar:first-child {
    margin-left: 0;
}

/*
.header-bar:not(.selected) .header-text {
    display: none;
}
*/

/* HEADER CONTENT */

.header-bar .bg-container {
    height: 100%;
    width: 100%;
    z-index: -1;
    margin-left: 4px;
    filter: drop-shadow(-4px 0px 0px #000);
}

.header-container .header-bar:first-child .bg-container {
    margin-left: 0;
}

.header-bar .background {
    mask: conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 0% / 100% 20px;
}

.header-container .header-bar:first-child .background {
    mask: initial;
}

.header-bar .avatar {
    width: 125px;
    transition: margin-left 0.25s;
    flex-grow: 0;
}

.header-text {
    flex-shrink: 0;
    /*
    white-space: pre;
    color: white;
    font-family: "Press Start 2P", sans-serif;
    font-weight: bold;
    font-size: 32px;
    */
    text-align: center;
    margin-top: 1rem;
    margin-left: 15rem;
    align-self: center;
    position: absolute;
    z-index: -1;
}

.header-subtitle {
    display: none;
    height: 40px;
    border-bottom: 3px solid #000;
}

@media screen and (max-width: 600px) {
    .header-container {
        border-bottom: 3px solid #000;
    }

    .header-text {
        visibility: hidden;
    }

    .selected .header-text {
        visibility: visible;
        position: absolute;
        margin-left: 0;
        left: 10px;
        top: 100px;
        z-index: 1;
        /*
        text-shadow: 4px 0 0 #000, 4px 4px 0 #000, 0 4px 0 #000, 0 -4px 0 #000, -4px -4px 0 #000, -4px 0 0 #000, 4px -4px 0 #000, -4px 4px #000;
        */
    }

    .header-subtitle {
        display: block;
    }
}

/* PALETTE */

.palette-bar:not(.selected) .avatar {
    margin-left: -25px;
}

.palette-bar .background {
    background: #0C3D30;
    background:
        linear-gradient(20deg, #0000 0px 125px, #0007 127px 240px, #0000 242px),
        linear-gradient(#0000, #0006),
        fixed repeating-conic-gradient(#125844 0 25%, #0C3D30 0 50%) 0% / 75px 75px;
    /* background-attachment, background-image, background-position, background-size */
}

/*
.palette-bar .header-text {
    text-shadow: 4px 0 0 #000, 4px 4px 0 #000, 0 4px 0 #000, 0 -4px 0 #000, -4px -4px 0 #000, -4px 0 0 #000, 4px -4px 0 #000, -4px 4px #000,
        7px 0 0 #323f2a, 7px 7px 0 #323f2a, 0 7px 0 #323f2a;
}
*/

.palette-container {
    background: #18271B;
}

.palette-container h2, .palette-container h3 {
    color: #94bd79;
}

.palette-container a:not(:hover) {
    color: #dade9d;
}

/* NIYO */

.niyo-bar:not(.selected) .avatar {
    margin-left: -40px;
}

.niyo-bar .background {
    background: #274866;
    background:
        linear-gradient(20deg, #0000 0px 120px, #0007 122px 210px, #0000 212px),
        linear-gradient(#0000, #0006),
        fixed repeating-conic-gradient(#123357 0 25%, #0C243E 0 50%) 0% / 75px 75px;
}

/*
.niyo-bar .header-text {
    text-shadow: 4px 0 0 #000, 4px 4px 0 #000, 0 4px 0 #000, 0 -4px 0 #000, -4px -4px 0 #000, -4px 0 0 #000, 4px -4px 0 #000, -4px 4px #000,
        7px 0 0 #1d2a36, 7px 7px 0 #1d2a36, 0 7px 0 #1d2a36;
}
*/

/* SUZY */

.suzy-bar:not(.selected) .avatar {
    margin-left: -25px;
}

.suzy-bar .background {
    background: #25194D;
    background:
        linear-gradient(20deg, #0000 0px 135px, #0007 137px 245px, #0000 247px),
        linear-gradient(#0000, #0006),
        fixed repeating-conic-gradient(#1D0C39 0 25%, #140828 0 50%) 0% / 75px 75px;
}

/*
.suzy-bar .header-text {
    text-shadow: 4px 0 0 #000, 4px 4px 0 #000, 0 4px 0 #000, 0 -4px 0 #000, -4px -4px 0 #000, -4px 0 0 #000, 4px -4px 0 #000, -4px 4px #000,
        7px 0 0 #262031, 7px 7px 0 #262031, 0 7px 0 #262031;
}
*/

.suzy-container {
    background: #1b1827;
}

.suzy-container h2, .suzy-container h3 {
    color: #9379bd;
}

.suzy-container a:not(:hover) {
    color: #de9dbb;
}

/* SECTION CONTAINER */

#overflow-container {
    position: relative;
}

.section-container {
    align-items: flex-start;
    display: flex;
    width: 300%;
    transition: margin-left 0.25s;
    margin-bottom: 4rem;
}

.section-container>section {
    width: 750px;
    max-width: 100vw;
}

#footer-text {
    transition: top 0.25s;
    margin-top: 2rem;
    text-align: center;
    position: absolute;
    top: calc(100% - 10rem);
    width: 100%;
}

#footer-text a {
    color: #AAA;
}

#footer-text a:hover {
    color: #CCC;
}

.randevlogo {
    font-family: 'Asap Condensed';
    font-size: 48px;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 3px 0 #050505;
}


.quotation {text-align: center;}
.no-line-breaks {word-break: none;}

table {
    border-collapse: collapse;
}

table td {
    padding: 3px 6px;
    border-bottom: 1px dashed #FFF;
}

table td:not(:first-of-type):not(:last-of-type) {
    border-left: 1px dashed #FFF;
    border-right: 1px dashed #FFF;
}