/* FONT IMPORT */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
/* You can edit these color values and they'll apply to the rest of the CSS! */
:root {
    /* Background Colors: */
    --container: rgba(23, 13, 46, 0.82);
    --bubble: rgba(86, 67, 129, 0.49);
    --bubbleborder: rgba(86, 67, 129);
    --background-color: #1c103c;
    --text-color: #ffffff;
    --sidebar-text-color: #ffffff;
    --link-color: #82ffff;
    --link-hover: #ffe1ae;
    --font: Verdana, sans-serif;
    --heading-font: "Quicksand", sans-serif;
    --round-borders: 5px;
    --header-color: #ffe1ae;
    --border-color: #5d28c2;
    --box-border: rgba(82, 49, 143, 0.38);
    --scrollbar: #5d28c2 transparent;
}

/* BASIC CSS - Includes colors and customization. */

* {
    box-sizing: border-box;
    scrollbar-color: #5d28c2 transparent;
    scrollbar-width: thin;
}

a,
b,
i,
span {
    color: var(--link-color);
    text-decoration: none;
}

a {text-decoration:underline}

a:hover {
    color: var(--header-color);
}

body {
    color: black;
    font-family: var(--font);
    background: var(--background-color);
    background-image: url("https://mavisdeluna.art/images/Plain%20BG.png");
    background-size: cover;
    background-attachment: fixed;
    scrollbar-color: #5d28c2 transparent;
    font-size: 12px;
    margin: auto;
}

/* HORIZONTAL RULE - A border/line you can put between things. */
hr,
.main hr,
.right hr,
.aside hr,
.footer hr {
    border: 1px solid rgba(86, 67, 129);
}

/* CONTAINER - The container that holds the grid.
 * The background is transparent so each
 * individual box has its own background/border. */

.container {
    display: grid;
    grid-gap: 10px;
    grid-template:
        "links links"
        "sidebar main"
        "block block"
        "gallery gallery"
        "relationships relationships"
        / 1fr;
    background-color: transparent;
    padding: 20px;
    border-radius: 5px;
    width: 1200px;
    margin: auto;
    color: white;
}

h1,
h2,
h3,
h4 {
    font-family: "Quicksand", Verdana, sans-serif;
    color: var(--header-color);
    text-shadow:
        -1px 0 #000,
        0 1px #000,
        1px 0 #000,
        0 -1px #000,
        0 0;
}

/* HEADER - Top bar/box of the page, showing
 * the character name and titles/info. */
.links {
    grid-area: links;
    background-color: var(--container);
    border-radius: 5px;
}

/* NAVIGATION - The navigation bar at the
 * top of the page. Customizable. */

.nav {
    display: flex;
    border-radius: 5px;
    margin: auto;
    width: 100%;
    padding: 10px;
    min-height: 20px;
    border: 1px solid black;
    text-align: center;
}

.nav ul {
    list-style-type: none;
    text-align: center;
    border-radius: 5px;
    width: 100%;
    padding: 0;
    margin: 0;
}

.nav li {
    float: left;
    display: inline;
    background-color: var(--bubble);
    padding: 10px;
    border: 1px solid black;
    font-family: "Quicksand", Verdana, sans-serif;
    font-size: 15px;
    font-weight: 800;
    border-radius: 5px;
    width: 20%;
}

.nav li:hover {
    background-color: var(--container);
}

/* Heading style ID for styling the
 * name in the header bar/box. */
#name {
    text-shadow:
        -1px 0 #000,
        0 1px #000,
        1px 0 #000,
        0 -1px #000,
        0 0;
    font-size: 2em;
    font-weight: bold;
    color: var(--header-color);
    margin-left: 5px;
}

/* SIDEBAR - Where your character portrait
 * and tables are! */

.sidebar {
    grid-area: sidebar;
    background-color: var(--container);
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
    width: 300px;
}

.sidebar,
.main {
    max-height: 800px;
    overflow: visible;
}

/* Portrait image */
#portrait {
    width: 100%;
    image-rendering: optimizeQuality;
    margin: 0;
}

#portrait img {
    width: 100%;
    border: 1px solid black;
    margin: 0;
}

/* CHARNAME - You put your character's name here in this box.
 * This is a simple code of text that lays over your portrait,
 * so it looks like a cool little wiki page! */

#charname {
    padding: 15px;
    background-color: var(--bubble);
    color: white;
    text-align: center;
    width: 100%;
    margin: 0;
    border: 1px solid black;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    line-height: 1;
    margin-bottom: -5px;
}

/* The title/information that goes under your character's name. */
#charname p {
    line-height: 1.75;
    margin-top: 5px;
    margin-bottom: 0;
}

#chartext {
    font-family: "Quicksand", Verdana, sans-serif;
    text-shadow:
        -1px 0 #000,
        0 1px #000,
        1px 0 #000,
        0 -1px #000,
        0 0;
    color: white;
    font-size: 25px;
    text-align: center;
    font-weight: 900;
    margin: auto;
}

/* CSS SLIDESHOW - Taken from W3Schools and
 * edited by me. Allows multiple portrait images
 * in case characters have different forms/outfits! */

.mySlides {
    display: none;
}
img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    text-shadow:
        -1px 0 #000,
        0 1px #000,
        1px 0 #000,
        0 -1px #000,
        0 0;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Caption text */
.text {
    color: white;
    font-weight: bold;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    width: 100%;
    text-align: center;
    background-color: var(--bubble);
    border: 1px solid black;
    border-top: none;
    border-radius: 0 0 5px 5px;
    margin: 0;
}

/* TABLE - Where the basic information
 * about your character goes. Keep these SHORT,
 * with a maximum of 6 rows total. */
table {
    width: 100%;
    border-spacing: 0 5px;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 5px;
}

th,
td {
    text-align: center;
    border: 1px solid black;
    font-size: 12px;
    padding: 10px 0;
    border-radius: 5px;
}

tr:nth-child(even) {
    background-color: var(--bubble);
}

tr:nth-child(odd) {
    background-color: var(--container);
}

/* MAIN CONTENT - To the right of the sidebar,
 * where the character's written information will go. */
.main {
    grid-area: main;
    background-color: var(--container);
    padding: 15px 20px;
    border: 1px solid black;
    border-radius: 5px;
    overflow: hidden;
}

/* Your scrollbox for writing the character's story,
 * bio, information, etc. */

.inner {
    overflow: auto;
    height: 100%;
    padding: 0 15px 0 0;
    margin: 0;
    scrollbar-color: white transparent;
    line-height: 1.75;
    font-size: 13px;
}

/* Heading text style ID. This is for
 * a basic heading with a bottom border. */
#heading {
    font-size: 30px;
    margin: auto;
    padding: 10px 0;
    border-bottom: 1px solid white;
}

/* GALLERY - Where pictures of your character goes.
 * Images should be square. */
.pictures {
    grid-area: gallery;
    background-color: var(--container);
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 5px;
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}

.block {
    grid-area: block;
    background-color: transparent;
    padding: 0;
    border-radius: 5px;
    columns: 2 auto;
}

.boundaries {
    grid-area: boundaries;
    background-color: var(--container);
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 5px;
    height:500px;
    overflow:hidden;
}

.notes {
    grid-area: notes;
    background-color: var(--container);
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 5px;
    height:500px;
    overflow:hidden;
}

.innerblock {
    overflow: auto;
    height: 75%;
    padding: 0 20px 0 0;
    margin: 0;
    scrollbar-color: white transparent;
    line-height: 1.75;
}

.innerblock p, .innerblock > ul, .innerblock > li {
    font-size:14px;
}

.innerblock ul {
    margin:0;
    margin-left:-20px;
}

.innerblock li {
    list-style: none;
    border-bottom: 1px solid;
    padding: 10px 0;
}

/* Gallery class. Images are 90x90 but can be adjusted to whatever you like! */
.gallery {
    display: grid;
    grid-gap: 0;
    gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: minmax(100px, auto);
    margin: 10px 0;
    padding: 0 10px;
    object-fit: contain;
    text-align: center;
    margin-top: 20px;
}

.gallery a {
    text-align: center;
}

.gallery img {
    text-align: center;
    vertical-align: middle;
    margin: auto;
    object-fit: contain;
    object-position: bottom;
    transform: scale(1);
    transition: ease-in 0.05s;
    height: 90px;
    width: 90px;
    image-rendering: optimizeQuality;
    border-radius: 5px;
    border: 1px solid #82ffff;
}

.gallery img:hover {
    transform: scale(1.1);
    transition: ease-in 0.05s;
}

/* FOOTER - Where the rest goes, serving as your spot for
 * character relationships. */
.relationships {
    grid-area: relationships;
    background-color: var(--container);
    padding: 20px;
    border: 1px solid black;
    border-radius: 5px;
    text-align: left;
    height: max-content;
}

/* RELATIONSHIPS - Your section for character relationships
 * will go in this div. They're uneven columns. */
.column {
    float: left;
    line-height: 1.75;
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 10px;
}

.column img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.left {
    width: 50%;
    text-align: left;
}

.right {
    width: 50%;
}

/* Separate columns grid for inside */
.columns {
    display: grid;
    grid-template:
        "left right"
        / 1fr 1fr;
}

.leftc {
    text-align: left;
    grid-area: left;
}

.rightc {
    grid-area: right;
    text-align: left;
}

.relates {
    height: 170px;
    border-radius: 5px;
    border: 1px solid white;
}

#relates {
    text-shadow:
        -1px 0 #000,
        0 1px #000,
        1px 0 #000,
        0 -1px #000,
        0 0;
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin: auto;
    font-family: "Quicksand", Verdana, sans-serif;
}

.relatestext {
    font-size: 14px;
    line-height: 1.75;
    vertical-align: middle;
    align-content: center;
}

/* MISC - Everything else. */

.white {
    color: white;
    font-size: 14px;
}

smaller {
    font-size: smaller;
}

/* MOBILE RESPONSIVE */
@media (max-width: 1260px) {
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        grid-template:
            "links"
            "sidebar"
            "main"
            "block"
            "gallery"
            "relationships"
            / 1fr;
        width: 90%;
        margin: auto;
    }

    table {
        width: 100%;
        height: auto;
    }

    #portrait {
        width: 100%;
        height: auto;
    }

    #portrait img {
        width: 50%;
    }

    .prev,
    .next {
        display: none;
    }

    .text {
        width: 100%;
        font-size: 14px;
    }

    .column,
    .row {
        width: fit-content;
    }

    .column img {
        width: 100%;
        border: 1px solid white;
    }

    .sidebar,
    .main {
        max-height: 100%;
    }
    
    .sidebar {
        width:100%;
    }

    .columns {
        display: grid;
        grid-template:
            "left"
            "right"
            / 1fr;
        justify-content: center;
        align-content: center;
        vertical-align: middle;
    }

    .left,
    .right {
        width: 50%;
        justify-content: center;
        align-content: center;
        vertical-align: middle;
    }

    .leftc {
        border: none;
    }
}