/* ===== BACKGROUND & SITE ===== */

body {
  /* Resets default browser margins and padding */
  margin: 0;
height: 100vh;
display: flex;
  /* Centers the content within the viewport */
  margin-left: auto;
  margin-right: auto;
  /* Sets a maximum width for the content area */
  max-width: -600px; /* Adjust this value as needed for your design */
  /* Adds some padding on the sides for smaller screens to prevent content from touching the edges */
  padding-left: 20px;
  padding-right: 20px;
  /* Ensures padding and borders are included in the element's total width/height */
  box-sizing: border-box;
  background-color: white;
  }
  
 /* Mobile-first responsive base */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Scrollbar styles */
        * {
            scrollbar-width: thin;
            scrollbar-color: #6C757D #E9ECEF;
        }
        *::-webkit-scrollbar { width: 8px; }
        *::-webkit-scrollbar-track { background: #c3e9f8; }
        *::-webkit-scrollbar-thumb { background-color: #81e1fa; border-radius: 4px; border: 3px solid #ffffff; }

        /* Highlights */
        mark {
            background-image: radial-gradient(#fcfaf6, #81e1fa);
            color: #6C757D;
            font-weight: 600;
        }

        ::selection {
            color: #fcfaf6;
            text-shadow: -1px -1px 0 #81e1fa, 1px -1px 0 #81e1fa, -1px 1px 0 #81e1fa, 1px 1px 0 #81e1fa,
                0px 0px 5px #81e1fa, 0px 0px 5px #81e1fa, 0px 0px 5px #81e1fa;
        }

        /* 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: #0a7d9c;
        }

        body {
            
            background-image: url('images/posed.png');
            background-attachment: fixed;
            background-position: right bottom;
            padding: 5px;
            background-repeat: no-repeat;
        }

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

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

        #container {
            background-color: #fcfaf6;
            box-shadow: 0px 0px 15px rgba(129, 225, 250, 0.4);
            border-radius: 7px;
            padding: 5px;
            width: 100%;
        }
        
        #header {
            background: center / cover url('images/sakamatobanner.jpg');
            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: white;
            text-shadow: -1px -1px 0 #81e1fa, 1px -1px 0 #81e1fa, -1px 1px 0 #81e1fa, 1px 1px 0 #81e1fa;
            background: linear-gradient(0deg, #495057 1%, #ADB5BD 49%, #DEE2E6 51%, #495057 90%);
            border: 1px solid #81e1fa;
        }

        /* 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 #81e1fa, 1px -1px 0 #81e1fa, -1px 1px 0 #81e1fa, 1px 1px 0 #81e1fa,
                -2px -2px 0 #81e1fa, 2px -2px 0 #81e1fa, -2px 2px 0 #81e1fa, 2px 2px 0 #81e1fa,
                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: #0a7d9c;
        }

        /* Titlebar */
        .titlebar, #nav, .marquee {
            background: linear-gradient(0deg, #c3e9f8 1%, #81e1fa 49%, #5ad6fa 51%, #d9f2fc 90%);
            border: 1px solid #81e1fa;
        }

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

        /* 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 #81e1fa, 1px -1px 0 #81e1fa, -1px 1px 0 #81e1fa, 1px 1px 0 #81e1fa,
                -1.5px -1.5px 0 #81e1fa, 1.5px -1.5px 0 #81e1fa, -1.5px 1.5px 0 #81e1fa, 1.5px 1.5px 0 #81e1fa;
            padding: 5px;
            margin-bottom: 5px;
        }
        
        #nav a {
            text-decoration: none;
            flex: 1;
        }
        
        .navbutton {
            align-content: center;
            border-radius: 4px;
            border: 1px solid #81e1fa;
            width: 100%;
            min-height: 26px;
            color: white;
            background: linear-gradient(0deg, #fcfaf6 1%, #c3e9f8 49%, #81e1fa 51%, #fcfaf6 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 #81e1fa;
            border-top: none;
            border-radius: 0px 0px 4px 4px;
            background: linear-gradient(0deg, #c3e9f8 1%, #81e1fa 49%, #5ad6fa 51%, #d9f2fc 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, #fcfaf6 1%, #c3e9f8 49%, #81e1fa 51%, #fcfaf6 90%);
            border: 1px solid #81e1fa;
            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: #81e1fa;
        }
        
        a:active {
            color: #c3e9f8;
        }
        
        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 #81e1fa;
            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 #81e1fa;
            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 #81e1fa;
            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 #81e1fa);
            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 #81e1fa;
            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, #81e1fa 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: #81e1fa !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 #81e1fa;
            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;
            }
        }