body {
    min-height: 100vh;
    background: linear-gradient(
        135deg in oklch, 
        rgb(255, 169, 213) 0%, 
        rgb(186, 127, 245) 48%, 
        rgb(180, 255, 246) 100%
    );
    background-attachment: fixed;
    display: flex; /* for the elements present on the body */
    flex-direction: column; /* Keep on or website explodes */
}

/* Positioning: Uses css grid which is thankfully not quite as much of a pain in the ass as flexbox since it's a damn grid. */
    #card {
        display: grid;
        grid-template-columns: 50fr 50fr;
        grid-auto-rows: auto;
        padding: 0.8rem;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
        max-width: 1250px;
        width: 95%;
        margin: auto;
    }

    section {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        /* border: 2px solid black; */
        padding: 1rem;
        width: auto;
        border-radius: 8px;
        background-color: white;

    }

    @media (max-width: 800px) {
        #card {
            grid-template-columns: 100fr;
        }
        #nowplaying {
            transform: scale(0.7);
        }
        
    }

    mark {
        background: none;
        padding: 0.1rem;
    }

    #celeste:hover {
        background-color: #95b7dc;
        color: rgb(239, 246, 255);
    }

    .favorites a{
        text-decoration-style: dotted;
        color: black;
        text-decoration-color: rgb(81, 82, 82);
        transition: all .15s;
        white-space: nowrap;
        vertical-align: top;
        display: inline-block;
    }

    .favorites a:hover {
        vertical-align: top;
        text-decoration: none;
        text-decoration-color: black;
        background-color: rgba(169, 169, 169, 0.95);
        border-radius: 8px;
        padding: 0.1rem 0.4rem;
        margin: -0.1rem -0.4rem;
        transform: scale(1.001);
        box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
        backdrop-filter:blur(20px);
    }

    .favorites .rwby:hover #red {
        color: red;
    }

    .favorites .rwby:hover #yellow {
        color: yellow;
    }

    .rwby:hover #white {
        color: white;
    }

    .rwby:hover #black {
        color: black;
    }

    blockquote {
        margin: auto;
        align-items: center;
    }

    #tip {
        text-align: center;

    }

        /* Border: ensures some amount of visibility on stupid contrast levels LIKE MY DUMB COMPUTER MONITOR'S OUT OF THE BOX SETTINGS. */

    li {
        border-radius: 8px;
        margin-bottom: clamp(0.5rem, 0.5vw, 0.8rem);
        padding: 0.6rem;
        background-color: rgba(222, 221, 221, 0.8);
        border: 1.5px solid rgba(193, 193, 193, 0.8);
        box-shadow: 0.15rem 0.15rem rgba(193, 193, 193, 0.8);
    }

    li p {
        margin: 0;
        padding: 0;
    }


    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    /* Todo: Make this look better. */

    #FTL:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.95);
    }
    #midnight:hover {
        background-color:rgba(51, 24, 110, 0.95);
        color:#e41fdd;
    }
    .favorites .starbound:hover {
        background-color: rgba(27, 22, 67, 0.95);
        color: #faed5e;
    }

    #girlinred:hover {
        background-color: rgba(255, 255, 255, 0.95);
        color: red;
    }

    #trek:hover {
        background-color: rgba(0, 0, 0, 0.95);
        color: yellow;
    }

    #nowplaying {
        width: fit-content;
        height: fit-content;
        backdrop-filter:blur(20px);
        transform: scale(0.85);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        display: flex;
    }

    #agenum {
        color: rgb(1, 86, 161);
    }

    #age, #pronoun {
    border: 2px solid black;
    width: fit-content;
    padding: 0px;
    border-radius: 8px;
    display: block;
    box-shadow: 0.1rem 0.1rem rgb(0, 0, 0);
    }

    #p-title, #a-title {
        border-right: 2px solid black;
        padding: 0.2rem 0.6rem;
        display: inline-block;
        background-color: rgb(91, 236, 91);
        border-radius: 6px 0px 0px 6px;

    }

    #agenum, #pronouns {
        display: inline-block;
        padding: 0.2rem 0.6rem;
        background-color: rgba(255, 201, 201, 0.506);
        border-radius: 0px 6px 6px 0px;
    }

    #pronouns-her {
        color: #ff00f7;
        text-decoration: none;
    }

    #pronouns-her:hover {
        text-decoration: underline;
    }

    #pronouns-they {
        color: #65a8c9;
        text-decoration: none;
    }

    #pronouns-they:hover {
        text-decoration: underline;
    }

    #pronouns-he {
        color: #4ca746;
        text-decoration: none;
    }

    #pronouns-he:hover {
        text-decoration: underline;
    }

    #refbtn {
        margin-left: auto; 
        margin-right: auto; 
        margin-bottom: 1rem; 
        margin-top: -0.5rem;
        display: flex;
        background-color: red;
        color: white;
        border-radius: 8px;
        padding: 0.3rem 0.6rem;
        font-weight: 800;
    }

    #refbtn:hover {
        background-color: darkred;
        transition: transform ease-in-out 0.2s;
    }

    #refbtn:active {
        background-color: blue;
        transform: rotate(180deg);
    }