::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        }

::-webkit-scrollbar-track {
        background-color: #66201A;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #c45950;
        }

::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #ffe7a4;
        border: 1px solid #ffe7a4;
        }

h1, h2, h3, h4, h5, h6 {
    margin: 0.2em;
}

ul {
    padding-inline-start: 1em;
    margin-top: 0.3em;
}

img {
        width: 100%;
    }

table {
    width: 100%;
        border-collapse: collapse;
    }
    td {
        padding: 0.4em;
    }
    td:first-child {
        font-style: italic;
        color: #c45950;
    }
    td:last-child {
        text-align: right;
    }
    tr {
        border-bottom: 1px solid #ffca67;
    }
    tr:last-child {
        border-bottom: none;
    }

body {
    background-image: url('bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2em auto;
    height: fit-content;
    color: #ffe7a4;
}

a {
    color: #ffc62a;
}

main {
    margin: 2em auto;
    display: grid;
    padding: 1em;
    height: auto;
    width: 1200px;
    grid:
    [row1-start] "playlist portrait portrait blurb blurb blurb" 70px [row1-end]
    [row2-start] "basic portrait portrait blurb blurb blurb" 340px [row2-end]
    [row3-start] "gall gall like like pos person" 170px [row3-end]
    [row4-start] "gall gall dislike dislike neg person" 170px [row4-end]
    [row5-start] "skills hooks hooks hooks hooks hooks" auto [row5-end]
    [row6-start] "relation relation relation relation equip equip" auto [row6-end]
    [row7-start] "time time time time time time" auto [row7-end]
    / auto 150px 100px 50px 165px 300px; 
    gap: 1em;
}

footer {
    margin: auto;
    width: 1200px;
}

main > * {
    border: 2px solid #ffca67;
    background: #66201A;
    padding: 0.5em;
    border-radius: 5px;
    corner-shape: scoop;
}

.playlist {
    grid-area: playlist;
    display: grid;
    grid:
    [row1-start] "icon title" 1fr [row1-end]
    [row2-start] "icon info" 1fr [row2-end]
    / 1fr 4fr;
}

.playlist > .icon {
    grid-area: icon;
    display: grid;
    place-items: center;
}

.playlist > .title {
    padding-top: 0.5em;
    grid-area: title;
}

.playlist > .info {
    grid-area: info;
}

.basic {
    grid-area: basic;
}

.portrait {
    grid-area: portrait;
}

.blurb {
    grid-area: blurb;
}

.gall {
    grid-area: gall;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gall img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3rem;
    border: 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font-size: 2.5rem;
    opacity: 0.45;
}

.gallery-arrow:hover,
.gallery-arrow:focus {
    opacity: 1;
}

.gallery-arrow-left {
    left: 0;
}

.gallery-arrow-right {
    right: 0;
}

.like {
    grid-area: like;
}

.dislike {
    grid-area: dislike;
}

.pos {
    grid-area: pos;
}

.neg {
    grid-area: neg;
}

.like, .pos {
    color: #279627;
    border: 2px solid #279627;
    background-color: #9ce79c;
    h1, h2, h3, h4, h5, h6 {
    text-align: center;
}
}

.dislike, .neg {
    color: #af2020;
    border: 2px solid #af2020;
    background-color: #faa3a3;
    h1, h2, h3, h4, h5, h6 {
    text-align: center;
}
}

.person {
    grid-area: person;
    overflow-y: hidden;
}

.skills {
    grid-area: skills;
}

.hooks {
    grid-area: hooks;
}

.hooklist {
    column-count: 2;
}

details {
    summary {
        border-bottom: 1px solid #ffca67;
        padding-bottom: 0.4em;
    }
    border: 1px solid #ffca67;
    margin: 0.5em;
    padding: 0.5em;
    .note {
        margin: 0.5em 1em;
        font-style: italic;
        img {
            width: 20px;
            height: auto;
        }
    }
}

.relation {
    grid-area: relation;
}

.relation > .person {
    border: 1px solid #ffe7a4;
    aspect-ratio: 200 / 250;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
    margin: 0.3em;
    width: 155px;
    height: 200px;
    h2 {
        color: #ffffff;
        text-shadow: 
    2px 2px 0 black, 
   -2px -2px 0 black, 
    2px -2px 0 black, 
   -2px 2px 0 black;
        position: absolute;
        bottom: 0;
        right: 5px;
    }
}

dialog:popover-open {
    display: none;
    border: 2px solid #ffca67;
    background: #66201A;
    color: #ffe7a4;
    padding: 0.5em;
    border-radius: 5px;
    corner-shape: scoop;
    padding: 1em;
    width: 550px;
    height: 250px;
    display: grid;
    grid:
    [row1-start] "picture name" 1fr [row1-end]
    [row2-start] "picture opinion" 1fr [row2-end]
    [row3-start] "picture ." 1fr [row3-end]
    [row4-start] "picture quote" 1fr [row4-end]
    [row5-start] "key key" 1fr [row5-end]
    / 1fr 3fr;
    gap: 0.5em;
    img { height: 100%; width: auto;}
    .picture {
        grid-area: picture;
    }
    .name {
        grid-area: name;
    }
    .opinion {
        grid-area: opinion;
        padding: 5px;
        border: 2px solid #ffca67;
        width: fit-content;
        margin-left: 1em;
    }
    .quote {
        grid-area: quote;
        font-style: italic;
    }
    .key {
        grid-area: key;
        padding: 15px;
        border: 2px solid #ffca67;
        border-radius: 5px;
        corner-shape: scoop;
    }
    .key::after {
        font-size: 14px;
        content: "Key: ❤️ Love 💠 Loyal 🟦 Trust 🟩 Like ⬜ Neutral 🟨 Distrust 🟧 Dislike ❌ Hate";
    }
}

::backdrop {
    backdrop-filter: blur(10px);
}

.equip {
    grid-area: equip;
}

.items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: space-evenly;
}

.item {
    border: 1px solid #ffe7a4;
    padding: 0.5em;
    width: 130px;
    display: flex;
    flex-direction: column;
    h5 {
        border-bottom: 1px solid #ffe7a4;
    }
    p {
        margin: 0;
        font-size: small;
        font-style: italic;
        color: #c45950;
    }
}

.time {
    grid-area: time;
    overflow-x: hidden;
}

.timeline {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    overflow-x: scroll;
}

.expac {
    display: flex;
    flex-direction: column;
    height: fit-content;
    padding: 0.5em;
    gap: 0.5em;
    section {
        border: 1px solid #000000;
        width: 250px;
        padding: 0.5em;
        h3 {
            border-bottom: 1px solid #000000;
        }
        p {
            margin: 0;
        }
    }
}

.timeline > * {
    border-radius: 5px;
    corner-shape: scoop;
}

div.expac:nth-child(1) {
    border: 1px solid #b15353;
    background-color: #773939;
    color: #e0a6a6;
    section {
        border: 1px solid #b15353;
        h3 {
            border-bottom: 1px solid #b15353;
        }
    }
}

div.expac:nth-child(2) {
    border: 1px solid #d6861e;
    background-color: #92673f;
    color: #f7c68e;
    section {
        border: 1px solid #d6861e;
        h3 {
            border-bottom: 1px solid #d6861e;
        }
    }
}

div.expac:nth-child(3) {
    border: 1px solid #dfb465;
    background-color: #8f7545;
    color: #ecce97;
    section {
        border: 1px solid #dfb465;
        h3 {
            border-bottom: 1px solid #dfb465;
        }
    }
}

div.expac:nth-child(4) {
    border: 1px solid #9bbe9a;
    background-color: #4d814b;
    color: #a9dfa8;
    section {
        border: 1px solid #9bbe9a;
        h3 {
            border-bottom: 1px solid #9bbe9a;
        }
    }
}

div.expac:nth-child(5) {
    border: 1px solid #98a0bd;
    background-color: #51516e;
    color: #aea8df;
    section {
        border: 1px solid #98a0bd;
        h3 {
            border-bottom: 1px solid #98a0bd;
        }
    }
}

div.expac:nth-child(6) {
    border: 1px solid #ba98bd;
    background-color: #62516e;
    color: #dfabe6;
    section {
        border: 1px solid #ba98bd;
        h3 {
            border-bottom: 1px solid #ba98bd;
        }
    }
}

div.expac:nth-child(7) {
    border: 1px solid #e6b0d1;
    background-color: #a36984;
    color: #ecb7d0;
    section {
        border: 1px solid #e6b0d1;
        h3 {
            border-bottom: 1px solid #e6b0d1;
        }
    }
}

.typelink {
    cursor: pointer;
    border: transparent;
    border-radius: 10px;
    padding: 5px;
    color: #a17c14;
    background-color: #ffe7a4;
}

.typelink:hover {
    border: transparent;
    border-radius: 10px;
    padding: 5px;
    color: #644900;
    background-color: #f3c956;
}

.typeinfo {
    border: 1px solid #ffe7a4;
    height: 130px;
    padding: 0.5em;
    display: none;
    overflow-y: scroll;
}

@media only screen and (max-width: 800px) {
    body {
        margin: 0.5em;
        width: 90vw;
    }

    main {
        width: 90vw;
        display: grid;
        grid:
        [row1-start] "portrait basic" [row1-end]
        [row2-start] "blurb blurb" [row2-end]
        [row3-start] "like dislike" [row3-end]
        [row4-start] "pos neg" [row4-end]
        [row5-start] "person person" [row5-end]
        [row6-start] "skills skills" [row6-end]
        [row7-start] "hooks hooks" [row7-end]
        [row8-start] "relation relation" [row8-end]
        [row9-start] "time time" [row9-end]
        / 1fr 1fr;
    }

    main > * {
        margin-top: 0.5em;
    }

    .playlist, .gall, .equip {
        display: none;
    }

    .relation > .person {
    position: relative;
    width: 200px;
    height: 250px;
    h2 {
        color: #ffffff;
        text-shadow: 
    2px 2px 0 black, 
   -2px -2px 0 black, 
    2px -2px 0 black, 
   -2px 2px 0 black;
        position: absolute;
        bottom: 0;
        right: 5px;
    }
}
}