@font-face {
    font-family: 'rainyhearts';
    src: url('/fonts/rainyhearts.woff2') format('woff2'),
        url('/fonts/rainyhearts.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'WeLoveCuteThings';
    src: url('/fonts/WeLoveCuteThings.woff2') format('woff2'),
        url('/fonts/WeLoveCuteThings.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
    
        
        :root {
            --ff-body: 'Poppins', sans-serif;
            --ff-heading: 'DM Serif Text', serif;

            --fs-body: 0.9rem;

            --container-size: 800px;
        }

        :root, html[data-theme="light"] {
            --light-mode: none;
            --dark-mode: flex;

            --background: #f0f0f0;
            --container: #fff;
            --text: #000;
            --links: #252525;
            --borders: #d3d3d3;
            --accent: #c785a6;
        }

        html[data-theme="dark"] {
            --light-mode: flex;
            --dark-mode: none;

            --background: #101010;
            --container: #252525;
            --text: #fff;
            --links: #eee;
            --borders: #505050;
            --accent: #fceac4;
        }

        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-image: url('https://i.pinimg.com/736x/b9/ca/52/b9ca5248fec62ddd53dcbaed5e7d71c8.jpg');
            color: var(--text);
            font-family: rainyhearts;
            font-size: var(--fs-body);
            line-height: 1.5;
        }

        h1, h2, h3, p, ul[class], ul[id] {
            padding: 0;
            margin: 0;
        }

        h1, h2, h3 {
            font-family: WeLoveCuteThings;
            font-weight: 600;
        }

        h1 {
            font-size: calc(var(--fs-body) + 0.5rem);
        }

        h2 {
            font-size: calc(var(--fs-body) + 0.4rem);
        }

        h3 {
            font-size: calc(var(--fs-body) + 0.3rem);
        }

        a {
            text-decoration: none;
            color: var(--links);
            transition: all 0.6s ease-in-out;
        }

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

        button {
            background: inherit;
            color: inherit;
            font-family: inherit;
            font-size: inherit;
            cursor: pointer;

            border: 1px solid transparent;
        }

        .light-mode {
            display: var(--light-mode);
        }

        .dark-mode {
            display: var(--dark-mode);
        }

        iframe.tmblr-iframe {
            transform: scale(0.75, 0.75);
            translate: -1.4rem 0.3rem;
            opacity: 0;
            visibility: hidden;

            filter: invert(100%);
        }

        html[data-theme="dark"] iframe.tmblr-iframe {
            filter: invert(0);
        }

        iframe.tmblr-iframe.active {
            opacity: 1;
            visibility: visible;
        }

        .solar-icons {
            font-size: calc(var(--fs-body) + 0.2rem);
        }

        .button-container {
            position: fixed;
            top: 1rem;
            right: 1rem;

            display: grid;
            gap: 10px;
        }

        .button-container button {
            display: flex;
            align-items: center;
            justify-content: center;

            padding: 0.4rem;
            border: 1px solid var(--borders);
            border-radius: 0.4rem;
            transition: 0.7s ease-in-out;
        }

        .controls {
            background: var(--text);
            color: var(--background);
        }

        .controls:hover {
            background: var(--container);
            color: var(--accent);
        }

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

        main {
            max-width: var(--container-size);
            margin: 4rem auto;
        }

        .wrapper {
            display: grid;
            grid-template-areas: 'header header'
            'content content';
            grid-template-columns: calc(var(--container-size) - 550px) 1fr;
            gap: 1rem;
            align-items: self-start;
        }

        .topbar {
            grid-area: header;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--borders);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .top-links {
            margin-left: auto;
            display: flex;
            gap: 0.5rem;
        }

        .top-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.4rem;
            border-radius: 50%;
            background: var(--accent);
            color: var(--background);
        }

        .top-links a:hover {
            background: var(--container);
            color: var(--accent);
        }

        .navigation-links {
            padding: 1rem;
            background: var(--container);
            border: 1px solid var(--borders);
        }

        .nav-link {
            display: flex;
            align-items: center;
            justify-content: left;
            gap: 0.5rem;
            padding-block: 1rem;
        }

        .nav-link:first-child {
            padding-top: 0;
        }

        .nav-link:last-child {
            padding-bottom: 0;
        }

        .nav-link + .nav-link {
            border-top: 1px solid var(--borders);
        }

        .nav-icon {
            background: var(--accent);
            color: var(--background);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.4rem;
            border-radius: 0.35rem;
        }

        .boxes-grid {
            grid-area: content;
            display: flex;
            align-items: start;
            gap: 1rem;
        }

        .left-side, .center, .right-side {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            gap: 1rem;
        }

        .box-wrapper {
            background: var(--container);
            border: 1px solid var(--borders);
            padding: 1rem;
        }

        .box-title {
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--borders);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .box-icon {
            display: flex;
            align-items: center;
            background: var(--accent);
            color: var(--background);
            padding: 0.4rem;
        }

        .text {
            font-family: var(--ff-heading);
            font-size: calc(var(--fs-body) + 0.15rem);
            font-weight: 600;
            border-left: 1px solid var(--borders);
            padding-left: 0.4rem;
        }

        .tags-list {
            margin-top: 0.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            flex-wrap: wrap;
        }

        .credit-name {
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            display: flex;
            align-items: center;
            padding: 0.4rem;
            background: var(--text);
            color: var(--background);
            border: 1px solid var(--borders);
            border-radius: 0.5rem;
        }

        .credit-name:hover {
            color: var(--text);
            background: var(--container);
        }

        .tippy-tooltip.custom-theme {
            background-color: var(--text);
            color: var(--background);
            text-align: center;
            margin-block: 0.75rem;
        }

        .tippy-tooltip.custom-theme .tippy-svg-arrow {
            fill: var(--text);
        }

        @media screen and (width >= 800px) {
            #credit {
                display: none;
            }
        }

        @media screen and (width <= 800px) {
            .wrapper {
                padding: 1rem;
            }

            .credit-name {
                display: none;
            }
        }