<!DOCTYPE html>
<html lang="en">
<head>
    <title>chvrchgrim's site!</title>
    <link rel="icon" type="image/x-icon" href="">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.cdnfonts.com/css/assasin-aerox" rel="stylesheet">
    <style>
    
        /* Mobile-first responsive base */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Scrollbar styles */
        * {
            scrollbar-width: thin;
            scrollbar-color: #5DE944 #CBF8C3;
        }
        *::-webkit-scrollbar { width: 8px; }
        *::-webkit-scrollbar-track { background: #CBF8C3; }
        *::-webkit-scrollbar-thumb { background-color: #5DE944; border-radius: 4px; border: 3px solid #ffffff; }

        /* Highlights */
        mark {
            background-image: radial-gradient(#fcfaf6, #5DE944);
            color: #0a7d9c;
            font-weight: 600;
        }

        ::selection {
           color: black;
            text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #5DE944, 1px 1px 0 #5DE944,
                0px 0px 5px #5DE944, 0px 0px 5px #5DE944, 0px 0px 5px #5DE944;
        }

        /* Fonts */
        
        @font-face {
            font-family: BuilderSansLight;
            src: url(/fonts/Builder_Sans/BuilderSans-Light-300.otf) format("opentype");
        }

        @font-face {
            font-family: BuilderSans;
            src: url(/fonts/Builder_Sans/BuilderSans-Medium-500.otf) format("opentype");
        }

        @font-face {
            font-family: FredokaSemiBold;
            src: url('/fonts/Fredoka/static/Fredoka-SemiBold.ttf') format("truetype");
        }

        @font-face {
            font-family: FredokaBold;
            src: url('/fonts/Fredoka/static/Fredoka-Bold.ttf') format("truetype");
        }

        /* Main styles */
        html {
            font-family: 'BuilderSansLight', sans-serif;
            font-size: 15px;
            color: black;
        }

        body {
            background-image: url('https://wallpapercave.com/wp/wp2940950.png');
            background-repeat:no-repeat;
            background-size:cover;
        }

        /* Responsive wrapper */
        .wrap {
            max-width: 911px;
            margin: 5px auto;
            width: 100%;
        }

        /* Container styles */
        #container, #header, #footer {
            border: 1px solid #5DE944;
        }

        #container {
            background-color: #DCE3DC;
            box-shadow: 0px 0px 15px rgba(129, 225, 250, 0.4);
            border-radius: 7px;
            padding: 5px;
            width: 100%;
        }
        
        #header {
            background: center / cover url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/216606cf-f451-44de-b8ee-b5932de1fe1e/dm9gfit-ea65a623-ba81-4ff9-af65-4b16f257094e.png/v1/fill/w_985,h_237,q_80,strp/banner_by_chvrchgrim_dm9gfit-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjM3IiwicGF0aCI6Ii9mLzIxNjYwNmNmLWY0NTEtNDRkZS1iOGVlLWI1OTMyZGUxZmUxZS9kbTlnZml0LWVhNjVhNjIzLWJhODEtNGZmOS1hZjY1LTRiMTZmMjU3MDk0ZS5wbmciLCJ3aWR0aCI6Ijw9OTg1In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.KcqLWgD2p7FlOdbV4Xk_2oZCsjFKrPG-W0kGsVTi0Jo');
            background-repeat: no-repeat;
            height: 120px;
            position: relative;
            margin-bottom: 5px;
            padding: 5px;
            border-radius: 7px 7px 0px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #footer {
            border-radius: 0px 0px 7px 7px;
            height: auto;
            min-height: 30px;
            padding: 10px;
            text-align: center;
            align-content: center;
            font-size: 13px;
            font-weight: bold;
            color: black;
            text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #5DE944, 1px 1px 0 #5DE944;
            background: linear-gradient(0deg, #999999 1%, #3d4240 49%, #3d4240 51%, #99999990%);
            border: 1px solid #5DE944;
        }

        /* Logo */
        #logo {
            content: url('');
            display: block;
            margin: 0 auto;
            max-width: 250px;
            width: 100%;
            height: auto;
            filter: drop-shadow(0px 0px 8px rgba(129, 225, 250, 0.7));
        }
        
        #logo:hover {
            transform: scale(1.1);
            object-fit: contain;
        }
        
        /* Logo container */
        .logo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }
        
        p.sub {
            padding: 5px;
            font-style: italic;
            font-family: 'Assasin Aerox', sans-serif;
            color: white;
            text-shadow: -1px -1px 0 #5DE944, 1px -1px 0 #5DE944, -1px 1px 0 v, 1px 1px 0 #5DE944,
                -2px -2px 0 #5DE944, 2px -2px 0 #5DE944, -2px 2px 0 #5DE944, 2px 2px 0 #5DE944,
                0px 0px 20px rgba(129, 225, 250, 0.7), 0px 0px 20px rgba(129, 225, 250, 0.7), 0px 0px 20px rgba(129, 225, 250, 0.7);
            position: absolute;
            top: 20px;
            right: 20px;
            margin: 0;
        }

        /* Headings */
        h1, h2, h3, h4 {
            font-family: 'FredokaSemiBold', sans-serif;
            margin: 5px;
            font-style: italic;
            color: #1A1A1A;
        }

        /* Titlebar */
        .titlebar, #nav, .marquee {
            background: linear-gradient(0deg, #999999  1%, #3d4240 49%, #3d4240 51%, #999999 90%);
            border: 1px solid #5DE944;
        }

        .titlebar {
            display: flex;
            overflow: hidden;
            font-weight: bold;
            align-content: center;
            letter-spacing: 2px;
            font-style: italic;
        }
        
        .titlebar h1 {
            font-size: 15px;
            color: #1A1A1A;
            text-shadow: -1px -1px 0 #5DE944,
                1px -1px 0 #5DE944,
                -1px 1px 0 #5DE944,
                1px 1px 0 #5DE944;
        }

        /* Navigation */
        #nav {
            gap: 5px;
            display: flex;
            text-align: center;
            justify-content: space-evenly;
            font-size: 16px;
            font-family: 'FredokaSemiBold', sans-serif;
            font-weight: bold;
            letter-spacing: 0.2px;
            text-shadow: -1px -1px 0 #5DE944, 1px -1px 0 #5DE944, -1px 1px 0 #5DE944, 1px 1px 0 #5DE944,
                -1.5px -1.5px 0 #5DE944, 1.5px -1.5px 0 #5DE944, -1.5px 1.5px 0 #5DE944, 1.5px 1.5px 0 #5DE944;
            padding: 5px;
            margin-bottom: 5px;
        }
        
        #nav a {
            text-decoration: none;
            flex: 1;
        }
        
        .navbutton {
            align-content: center;
            border-radius: 4px;
            border: 1px solid #5DE944;
            width: 100%;
            min-height: 26px;
            color: black;
            background: linear-gradient(0deg, #999999  1%, #3d4240 49%, #3d4240 51%, #999999 90%);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px 0;
        }
        
        .navbutton:hover {
            background: linear-gradient(180deg, rgba(195, 233, 248, 1) 1%, rgba(129, 225, 250, 1) 49%, rgba(90, 214, 250, 1) 51%, rgba(217, 242, 252, 1) 90%);
        }
        
        .navbutton#shrines {
        }

        /* Dropdown menu */
        .drop {
            position: relative;
            display: inline-block;
            flex: 1;
        }
        
        .drop-content {
            display: none;
            position: absolute;
            left: -0.1px;
            width: 100%;
            z-index: 1;
            border: 1px solid #5DE944;
            border-top: none;
            border-radius: 0px 0px 4px 4px;
            background: linear-gradient(0deg, #999999 1%, #3d4240 49%, #3d4240 51%, #999999 90%);
        }
        
        .drop-content a {
            text-align: center;
            color: white !important;
            font-size: 12px;
            padding: 5px;
            margin: 5px;
            display: block;
            border-radius: 4px;
            background: linear-gradient(0deg, #999999  1%, #3d4240 49%, #3d4240 51%, #999999 90%);
            border: 1px solid #5DE944;
            text-decoration: none;
        }
        
        .drop-content a:hover {
            background: linear-gradient(180deg, rgba(195, 233, 248, 1) 1%, rgba(129, 225, 250, 1) 49%, rgba(90, 214, 250, 1) 51%, rgba(217, 242, 252, 1) 90%);
        }
        
        .drop:hover .drop-content {
            display: block;
        }

        /* Marquee */
        .marquee {
            display: flex;
            gap: 5px;
            padding: 2px;
            margin: 5px 0;
            justify-content: center;
        }

        .marqueecontainer {
            width: 100%;
            overflow: hidden;
        }
        
        .marqueecontainer .scroller {
            gap: 5px;
            width: fit-content;
            min-width: auto;
            padding-left: 100%;
            display: flex;
            flex-direction: row;
            animation: horizMarquee 30s linear infinite;
        }
        
        .marqueecontainer .scroller:hover {
            animation-play-state: paused;
        }

        @keyframes horizMarquee {
            100% {
                transform: translate(-100%, 0);
            }
        }

        /* Links */
        a {
            color: #0a7d9c;
            font-weight: bold;
            text-decoration-style: dotted;
        }
        
        a:hover {
            color: #5DE944;
        }
        
        a:active {
            color: #CBF8C3;
        }
        
        a:visited {
            color: #0a5c7a;
        }
        
        a:visited:hover {
            color: #0a7d9c;
        }

        /* Flex containers */
        .flex {
            display: flex;
            flex-wrap: wrap;
            height: auto;
            width: 100%;
            gap: 5px;
        }

        /* Content box */
        .content {
            border: 1.5px solid #5DE944;
            border-top: none;
            padding: 5px;
            height: auto;
            overflow-wrap: break-word;
        }

        .inner {
            height: auto;
            min-height: 530px;
        }

        /* Additional elements */
        textarea {
            color: #0a5c7a;
            margin-top: 5px;
            font-family: 'BuilderSansLight', sans-serif;
            font-size: 11px;
            width: 100%;
            height: 48px;
            resize: none;
            background-color: #fcfaf6;
            border: 1px solid #5DE944;
            border-radius: 7px;
            scrollbar-width: none;
        }

        .divider {
            content: url('');
            width: 100%;
            margin: 5px auto;
        }

        /* Gallery */
        .gallery {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .gallery .pic {
            position: relative;
        }
        
        .gallery .pic img {
            opacity: 70%;
            height: 82px;
            border: 1.5px solid #5DE944;
            border-radius: 7px;
            filter: brightness(1.1) grayscale(0.2) saturate(1.5);
            max-width: 100%;
        }
        
        .gallery .pic img:hover {
            opacity: 100%;
            filter: drop-shadow(0px 0px 6px #5DE944);
            transform: scale(1.1);
            object-fit: cover;
        }
        
        .gallery .pic:hover span.g-text {
            display: block;
        }

        .g-text {
            display: none;
            position: absolute;
            z-index: 100;
            background-color: #fcfaf6;
            border: 1px solid #5DE944;
            border-radius: 7px;
            padding: 3px;
            color: #0a7d9c;
            top: -50px;
            left: -50px;
            font-size: 12px;
            width: 150%;
            text-align: left;
        }

        /* Custom styles from original */
        .flex#f1 .content {
            height: 316px;
        }
        
        .flex#f2 .content {
            height: 83px;
        }
        
        img#welcome {
            height: 15%;
            margin-top: 8%;
            filter: sepia(1) hue-rotate(150deg) brightness(1.5) saturate(1.5);
            max-width: 100%;
        }
        
        #webrings.content {
            overflow-x: hidden;
            justify-content: center;
            padding: 5px;
            font-weight: bold;
            overflow-y: scroll;
        }
        
        #webrings.content table {
            margin: auto;
        }
        
        #webrings.content div {
            text-align: center;
            margin: 5px auto;
        }
        
        #webrings.content script:hover,
        #webrings.content img:hover,
        #webrings.content div:hover,
        #webrings.content map:hover,
        #webrings.content object:hover {
        }
        
        #webrings.content,
        #updates.content {
            overflow-y: scroll;
        }
        
        #ncring a:hover {
        }
        
        #aero-ring {
            background: linear-gradient(0deg, #5DE944 0%, #c3e9f8 100%);
            border-radius: 10px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.5),
                inset 0 2px 1px rgba(255, 255, 255, 0.15),
                inset 0 -2px 1px rgba(0, 0, 0, 0.35);
            margin: 10px auto 0px auto;
            padding: 0.75rem;
            max-width: 11rem;
            font-family: sans-serif;
        }
        
        #aero-ring a {
            text-decoration: none;
        }
        
        #aero-ring a,
        #aero-ring a:visited {
            font-size: 12px;
            color: white !important;
        }
        
        #aero-ring a:focus,
        #aero-ring a:hover {
            color: #fcfaf6 !important;
        }
        
        #aero-ring a:active {
            color: #5DE944 !important;
        }
        
        .counter {
            text-align: center;
        }
        
        .counter img {
            filter: grayscale(0.2) brightness(1.1);
            max-height: 75px;
            height: 100%;
            max-width: 100%;
        }
        
        .buttons {
            justify-content: center;
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }
        
        .buttons img {
            height: 100%;
            max-height: 40px;
            filter: grayscale(0.2) brightness(1.4);
            border: 1.5px solid #5DE944;
            max-width: 100%;
        }
        
        .marquee#ads img {
            height: 30px;
            filter: brightness(1.2) saturate(1.1) grayscale(0.5);
            animation-play-state: paused;
            max-width: 100%;
        }
        
        details {
            padding: 5px;
        }
        
        details summary {
            font-weight: bold;
            font-family: 'FredokaSemiBold', sans-serif;
            font-style: italic;
        }
        
        details summary:hover {
        }
        
        details ul {
            margin: 0;
            padding-left: 24px;
        }
        
        details li {
            margin: 5px 0;
            font-size: 13px;
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            body {
                padding: 2px;
            }
            
            .wrap {
                padding: 2px;
                margin: 2px auto;
            }
            
            #container {
                padding: 3px;
            }
            
            #header {
                height: auto;
                min-height: 150px;
                flex-direction: column;
                justify-content: center;
                padding: 10px 5px;
            }
            
            p.sub {
                position: static;
                text-align: center;
                margin-top: 10px;
                padding: 3px;
                order: 2;
            }
            
            .logo-container {
                order: 1;
            }
            
            #nav {
                flex-wrap: wrap;
                gap: 3px;
            }
            
            .navbutton {
                min-height: 30px;
                font-size: 14px;
                padding: 8px 0;
            }
            
            .flex {
                flex-direction: column;
            }
            
            .flex > div {
                width: 100% !important;
                margin-bottom: 10px;
            }
            
            .flex#f1 .content,
            .flex#f2 .content {
                height: auto;
                min-height: 200px;
            }
            
            .inner {
                height: auto;
                min-height: auto;
            }
            
            #guestbox .content {
                height: auto;
                min-height: 326px;
            }
            
            .gallery .pic img {
                height: 60px;
            }
            
            .g-text {
                position: static;
                width: 100%;
                margin-top: 5px;
            }
            
            .marquee#ads img {
                height: 25px;
            }
            
            .buttons img {
                max-height: 30px;
            }
            
            img#welcome {
                height: 50px;
                margin-top: 10px;
            }
            
            .angel {
                max-width: 40px;
            }
            
            #webrings.content {
                max-height: 300px;
            }
            
            #linkme .content {
                max-height: 200px;
            }
            
            #updates .content {
                max-height: 200px;
            }
        }

        /* Desktop specific */
        @media (min-width: 769px) {
            .wrap {
                width: 911px;
            }
            
            .flex {
                flex-wrap: nowrap;
            }
            
            #web-box {
                width: 113%;
            }
            
            #mini-abt {
                width: 150%;
            }
            
            #guestbox {
                width: 121%;
            }
            
            #linkme {
                width: 65%;
            }
            
            #updates {
                width: 100%;
            }
            
            .inner {
                height: 530px;
            }
            
            p.sub {
                top: 20px;
                right: 20px;
            }
        }
    </style>
</head>