@font-face {
        font-family: 'VG5000';
        src: url(https://humantooth.neocities.org/fonts/VG5000.woff) format('woff');
        font-weight: normal;
        font-style: normal;
    }

    /* General */
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        background: var(--mid-color) url("/DRHR/Grid.png");
        font-family: 'VG5000';
        font-size: 1em;
        color: #fff;
    }

    :root {
        --dk-color: #0F0818;
        --mid-color: #3E2560;
        --lt-color: #BAA1DB;
        --accent: #FE5DAD;
    }

    a {
        color: var(--accent);
    }

    blockquote {
        padding-left: 10px;
        border-left: 4px solid var(--accent);
        font-weight: bold;
        color: var(--accent);
    }
    
    hr {
      height: 2px;
      background-color: var(--accent);
      border:none;
    }

    .center {
        text-align: center;
    }

    .uppercase {
        text-transform: uppercase;
    }

    .accent {
        color: var(--accent);
    }

    .flex {
        display: flex;
    }

    .column {
        flex: 1;
        justify-content: center;
        align-items: center; 
    }

    .heading,
    .heading-alt,
    .character h2 {
        margin-left: auto;
        margin-right: auto;
        padding-top: 10px;
        box-shadow: -5px 5px 0 var(--accent);
        text-transform: uppercase;
        text-shadow: 1px 0 3px var(--accent);
        transform: skewX(-20deg);
    }

    .heading,
    .heading-alt {
        width: 50%;
    }

    .heading,
    .character h2 {
        background: var(--dk-color);
    }

    .heading-alt {
        background: var(--mid-color);
    }

    .character h2 {
        width: 100%;
        padding: 10px 0 0 10px;
    }

    .back-button {
      background: rgba(0, 0, 0, 0.50);
      border: 2px solid var(--accent);
      border-radius: 10px;
      color: #fff;
      text-align: center;
      font-size: 2em;
      padding: 5px 10px;
    }
    
    .bottom-margin {
      margin-bottom: 20px;
    }

    @keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Nav Footer */
    #nav {
        top: 0;
        position: sticky;
        align-self: start;
        background-color: var(--dk-color);
        border-bottom: 2px solid var(--accent);
        overflow: hidden;
        z-index: 3;
    }

    #footer {
        border-top: 2px solid var(--accent);
        background-color: var(--dk-color);
        overflow: hidden;
    }

    #nav,
    #footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #nav a,
    #footer a {
        margin: 10px;
        padding: 10px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        transform: skewX(-20deg);
    }

    #nav a:hover,
    #footer a:hover {
        background-color: #fff;
        color: black;
        border-left: 4px solid var(--accent);
    }

    /* Story */
    #story,
    #faq,
    #boundaries {
        width: 80%;
        padding: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .container {
        padding: 20px;
        border-left: 4px solid var(--accent);
        border-right: 4px solid var(--accent);
        background-color: rgba(0, 0, 0, 0.50);
    }
    
    .boundaries-container {
        padding: 20px;
        border: 4px solid var(--accent);
        border-radius: 15px;
        background-color: rgba(0, 0, 0, 0.50);
    }
    
    #boundaries ul {
      text-align: left;
    }

    #logo {
        width: 50%;
        max-width: 500px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        filter: drop-shadow(0 0 0.20rem var(--accent));
        transition: transform .2s;
    }

    .gallery {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
    }

    .gallery-column {
        flex: 50%;
        padding: 0 10px;
    }

    .gallery-column img {
        width: 100%;
        max-width: 500px;
        vertical-align: middle;
        animation: fadeEffect 1s;
    }
    
    .preview {
        width: 50%;
        max-width: 500px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        box-shadow: -5px 5px 0 var(--accent);
    }

    /* Characters */
    #characters,
    #credits {
        background-color: var(--dk-color);
        padding: 20px;
    }

    .section-tab {
        padding: 10px;
        background-color: var(--accent);
        border-radius: 5px 5px 0 0;
        overflow: hidden;
    }

    .section-buttons {
        display: flex;
        height: 30px;
        width: 30px;
        padding: 2px;
        border: 2px solid #fff;
        font-family: Arial, sans-serif;
        color: #fff;
        justify-content: center;
        align-items: center;
    }

    .section-buttons:hover {
        background-color: var(--lt-color);
    }

    .section-buttons-display {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        float: right;
        margin-right: 5px;
        overflow: hidden;
    }

    .tabs-container {
        width: 70%;
        margin: auto;
        border: 2px solid var(--accent);
        border-radius: 10px;
    }

    .tab {
        height: auto;
        padding: 3px 3px 0 3px;
        border-top: 2px solid var(--accent);
        border-bottom: 2px solid var(--accent);
        background-color: var(--dk-color);
        overflow: auto;
        white-space: nowrap;
    }

    .tab button {
        cursor: pointer;
        border: none;
        background-color: inherit;
        transition: transform .3s;
        display: inline-block;
    }

    .tab button:hover {
        background-color: var(--lt-color);
    }

    .tab button.active {
        background-color: var(--accent);
    }

    .tab button img {}

    .tabcontent {
        padding: 10px;
        display: none;
        border-top: none;
        border-radius: 0 0 7px 7px;
        background: url("/Shrines/Shrine_Images/DRDT_Scanlines_2.png");
        background-color: var(--mid-color);
        animation: fadeEffect 1s;
        overflow: hidden;
    }

    .character {
        padding: 10px 20px 20px 20px;
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: 60px 40px 180px 250px;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        color: #fff;
        word-break: break-word;
    }

    .character-name {
        grid-area: 1 / 1 / 2 / 2;
    }

    .character-title {
        grid-area: 2 / 1 / 3 / 2;
        text-shadow: 1px 0 3px var(--accent);
        transform: skewX(-20deg);
    }

    .character-bio {
        grid-area: 4 / 1 / 5 / 2;
        padding: 10px;
        overflow: auto;
        border: 2px solid var(--accent);
        border-radius: 5px;
        background-color: rgba(15, 8, 24, 0.50);
    }

    .character-stats {
        grid-area: 3 / 1 / 4 / 2;
    }

    .character-stats table {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-spacing: 0 10px;
        font-size: .9em;
    }

    .character-stats td {
        width: 25%;
        padding: 5px;
        border: 2px solid var(--accent);
        background-color: rgba(15, 8, 24, 0.50);
    }

    .character-stats td:nth-child(odd) {
        background-color: var(--accent);
        color: #000;
        text-transform: uppercase;
    }

    .character-stats p {
        margin: 0 0 3px;
    }

    .character-image {
        grid-area: 1 / 2 / 5 / 3;
        text-align: center;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .mascot img {
        height: 60%;
    }

    .character-image img {
        max-height: 100%;
        filter: drop-shadow(7px 0 0 var(--accent));
    }

    #randomTextDisplay {
      font-size: 0;
    }

    /* FAQ */
    #faq {
    }

    /* Credits */
    #credits-container {
        width: 80%;
        padding: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #credits-container a {
        color: #fff;
    }

    .credit {
        padding-left: 10px;
        border-left: 4px solid var(--accent);
        margin: 10px 0;
    }

    .credit p {
        margin: 3px;
    }

    /* Scrollbar */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--mid-color) var(--lt-color);
    }

    *::-webkit-scrollbar {
        width: 5px;
    }

    *::-webkit-scrollbar-track {
        background: var(--lt-color);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--mid-color);
        border-radius: 10px;
        border: 1px solid var(--dk-color);
    }

    /* Mobile Version */
    @media only screen and (max-width: 810px) {
        body {
            font-size: .8em;
        }

        #nav,
        #footer {
            justify-content: center;
        }

        #nav a,
        #footer a {
            margin: 10px 0;
        }

        #story,
        #faq,
        #boundaries,
        #credits-container {
            width: 100%;
        }

        .heading,
        .heading-alt {
            width: 90%;
        }

        .tabs-container {
            width: 100%;
        }

        .character {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-column-gap: 0;
            grid-row-gap: 0;
            padding: 0;
        }

        .character-image {
            display: none;
        }
    }