:root{
            --site-max-width: 960px;
            --site-padding-x: 20px;
            --gutter: 20px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
		
		@font-face {
                font-family: Nunito;
                src: url("/assets/fonts/Nunito-Regular.ttf");
            }

            @font-face {
                font-family: Nunito;
                src: url("/assets/fonts/Nunito-Bold.ttf");
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url("/assets/fonts/Nunito-Italic.ttf");
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url("/assets/fonts/Nunito-BoldItalic.ttf");
                font-style: italic;
                font-weight: bold;
            }

	/* font used to be 'MS PGothic', monospace; */
        body {
			cursor: url("https://kitschymew.neocities.org/assets/mew%20cursor.png"), auto;
            font-family: 'Nunito', sans-serif;
            font-size: 14px;
            background-image: url("https://i.imgur.com/gbQ5isv.png");
            background-size: cover;
            background-attachment: fixed;
            background-repeat: none;
            background-color: rgba(179, 196, 255, 0.7);
            background-blend-mode: overlay;
            color: #333;
        }
		
		a[href], input[type='submit'], input[type='image'], label[for], select, button {
			cursor: url("/assets/cursor shiny point1.png"), pointer;
			-webkit-animation: cursor 380ms infinite;
			animation: cursor 380ms infinite;
		}
			
		@-webkit-keyframes cursor {
			0% {cursor: url("/assets/cursor shiny point1.png"), auto;}
			20% {cursor: url("/assets/cursor shiny point1.png"), auto;}
			100% {cursor: url("/assets/cursor shiny point2.png"), auto;}
		} 

		@keyframes cursor {
			0% {cursor: url"/assets/cursor shiny point1.png"), auto;}
			20% {cursor: url("/assets/cursor shiny point1.png"), auto;}
			100% {cursor: url("/assets/cursor shiny point2.png"), auto;}
		}

        /* scrollbar */
        ::-webkit-scrollbar { width: 12px; }
        ::-webkit-scrollbar-track { background: #e9ecef; border-radius: 6px; }
        ::-webkit-scrollbar-thumb { background: #a8c8e8; border-radius: 6px; border: 2px solid #e9ecef; }
        ::-webkit-scrollbar-thumb:hover { background: #90b6e0; }
		
		@font-face {
			font-family: RomanceA;
			src: url("https://kitschymew.neocities.org/assets/fonts/RomanceA.ttf");
		}

        .container {
            max-width: var(--site-max-width);
            padding: 0 var(--site-padding-x);
        }

        header.header {
            margin: 20px 0;
            display: block;
        }

        .header-panel {
            background: linear-gradient(135deg, #7eb4e8, #6aa2d6);
            padding: 10px 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 6px;
        }
		
		.header-panel span {
			font-family: RomanceA;
			font-weight: normal;
		}

        .logo {
            color: white;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .navbar {
            background: rgba(255,255,255,0.9);
            padding: 8px 12px;
            border-radius: 4px;
        }

        .navbar a {
            color: #0048bd;
            text-decoration: none;
            margin-right: 15px;
            padding: 4px 8px;
            border-radius: 3px;
            transition: background-color 0.2s;
        }

        .navbar a:hover {
            background-color: #e8f2f8;
            color: #4a6c8a;
            font-weight: bold;
        }

        .main-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: var(--gutter);
            margin: 20px auto 0 auto;
        }

        .content-section {
            background: white;
            border: 1px solid #c8ddf0;
            border-radius: 6px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .section-header {
            background: linear-gradient(135deg, #c8ddf0, #d5e4f2);
            padding: 8px 15px;
            border-bottom: 1px solid #b5cde5;
            font-weight: bold;
            border-radius: 5px 5px 0 0;
            color: #0867c7;
        }

        .section-content {
            padding: 15px;
            overflow-y: auto;
            line-height: 1.5;
        }

        .section-content p { margin-bottom: 12px; }
        .section-content p:last-child { margin-bottom: 0; }

        .section-content ul {
            list-style-image: url("https://kitschymew.neocities.org/assets/wing.gif");
            padding-left: 26px;
            margin-bottom: 0;
        }

        .section-content li {
            margin-bottom: 8px;
            color: #011d4a;
        }
        
        .section-content li strong {
        	color: #00138f;
        }
        
        .section-content a {
        	text-decoration: none;
        	color: #0059b3;
        }
        
        .section-content a:hover {
        	text-decoration: underline;
        }
		
		.section-content iframe {
			margin: 0;
			border-style: none;
			height: 75px;
			overflow: visible;
		}

        .img-left { float: left; margin: 0 15px 10px 0; max-width: 150px; height: auto; }
        .img-right { float: right; margin: 0 0 10px 15px; max-width: 150px; height: auto; }
        .img-center { display: block; margin: 10px auto; max-width: 100%; height: auto; }
        .section-content::after { content: ""; display: table; clear: both; }

        .main-content { display: flex; flex-direction: column; height: fit-content; }
        
        .main-content .content-section:first-child .section-content {
		overflow-y: auto; 
        }

        .sidebar { display: flex; flex-direction: column; }
        .sidebar .section-content { max-height: 150px; }

        .button-section {
            background: white;
            border: 1px solid #c8ddf0;
            border-radius: 6px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .button-section .section-header { padding: 8px 15px; }

        .button-content { padding: 15px; }
        .button-area { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
        .site-button { width: 88px; height: 31px; border-radius: 3px; flex-shrink: 0; }
        .button-code {
            flex: 1;
            width: 100%;
            height: 60px;
            font-family: 'MS PGothic', monospace;
            font-size: 11px;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 5px;
            resize: vertical;
        }

        footer.footer {
            margin: 20px 0 10px 0;
            display: block;
        }

        .footer-panel {
            background: linear-gradient(135deg, #4c92d9, #d5e4f2);
            padding: 20px 16px;
            text-align: center;
            border-top: 1px solid #e0e0e0;
            font-size: 12px;
            color: #02193d;
            border-radius: 6px;
        }
        
        /* this is to make it mobile friendly. uhh idk what i'm doing with this let me know if it doesn't work */

        @media (max-width: 768px) {
            :root { --site-padding-x: 10px; }
            .main-container { grid-template-columns: 1fr; gap: 12px; margin: 10px auto 0 auto; }
            header.header { margin: 10px 0; }
            footer.footer { margin: 30px 0 10px 0; }
            .navbar a { display: block; margin: 2px 0; }
            .button-area { flex-direction: column; }
            .main-content .content-section:last-child { height: auto; }
            .main-content .content-section:last-child .section-content { max-height: 200px; }
            .img-left, .img-right { float: none; display: block; margin: 10px auto; }
        }
		
		#bg {
			position:fixed;
			bottom: 0px;
			right: 0;
			z-index: -1;
		}
		
		.main-content img {
			max-width: 530px;
		}