html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Arial";
            color: #040110;
            background: #ffffff;
            font-size: 14px;
            cursor: url("../cursors/cur_default.cur"), auto;
            margin: 0;
            padding: 0;
            background-image: url("../backgrounds/bg_bluedots2.png");
            background-size: 130px;
        }

        * {
            box-sizing: border-box;
        }

        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #02acd7;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #3a8ea4;
        }

        #container {
            max-width: 1100px;
            margin: 0 auto;
        }


        a {
            color: #02acd7;
            text-decoration: none;
            cursor: url("../cursors/cur_link.cur"), auto;
            transition: color 0.2s ease;
        }

        a:hover {
            color: #3a8ea4;
            cursor: url("../cursors/cur_link.cur"), auto;
        }

        #header {
            width: 100%;
            height: 215px;
            background-image: url("../images/img_rainbow_nyanheadergif.gif");
            background-size: 100%;
            margin-top: 20px;
            background-repeat: no-repeat;
            background-position: bottom;
            animation: float 3s ease-in-out infinite;
        }

        #flex {
            display: flex;
        }

        .blue_note {
            padding: 20px;
            background-image: url("../backgrounds/bg_bluedots.png");
            background-size: 35px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 1px;
            overflow: hidden;
            overflow-wrap: break-word;
        }

        .blue_note a {
            color: rgb(255, 77, 154);
        }

        .blue_note a:hover {
            color: #3a8ea4;
        }

        .blue_note strong {
            color: rgb(255, 77, 154);
        }

        .pink_note {
            padding: 20px;
            background-image: url("../backgrounds/bg_pinkdots.png");
            background-size: 35px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 1px;
            overflow: hidden;
            overflow-wrap: break-word;
        }

        .green_note {
            padding: 20px;
            background-image: url("../backgrounds/bg_greendots.png");
            background-size: 35px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 1px;
            overflow: hidden;
            overflow-wrap: break-word;
        }

        .yellow_note {
            padding: 20px;
            background-image: url("../backgrounds/bg_yellowdots.png");
            background-size: 35px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 1px;
            overflow: hidden;
            overflow-wrap: break-word;
        }

        .yellow_note ul {
            list-style: disc;
            padding-left: 20px;
            margin: 0;
        }

        .yellow_note ul li {
            margin: 4px 0;
            line-height: 1.6;
        }

        .yellow_note ul h3 {
            margin: 10px 0 4px 0;
        }

        .yellow_note details {
            margin-bottom: 5px;
        }

        main {
            border-top: 4px solid #543323;
            border-bottom: none;
            background-image: url("../backgrounds/bg_corkboard.jpg");
            background-size: 250px;
            flex: 1;
            min-width: 0;
            padding: 14px;
            order: 2;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #right_sidebar {
            order: 3;
            width: 300px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            border: 4px solid #543323;
            border-left: none;
            border-bottom: none;
            border-radius: 0 50px 0 0;
            background-image: url("../backgrounds/bg_corkboard.jpg");
            background-size: 250px;
            padding: 14px;
            overflow: hidden;
        }

        #left_sidebar {
            order: 1;
            width: 180px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            border: 4px solid #543323;
            border-right: none;
            border-bottom: none;
            border-radius: 50px 0 0 0;
            background-image: url("../backgrounds/bg_corkboard.jpg");
            background-size: 250px;
            padding: 14px;
            overflow: hidden;
        }

        #left_sidebar > div:has(button) {
            animation: hover 3s ease-in-out infinite;
        }

        #nav_button1 {
            font-size: 14px;
            width: 100%;
            padding: 10px;
            background-image: url("../backgrounds/bg_yellowdots.png");
            background-size: 35px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 5px;
            border: none;
            text-align: left;
            transition: background-image 0.2s ease, transform 0.2s ease, color 0.2s ease;
            margin-top: 5px;
            margin-bottom: 5px;
            cursor: url("../cursors/cur_link.cur"), pointer;
        }

        #nav_button1:hover {
            background-image: url("../backgrounds/bg_bluedots.png");
            transform: scale(1.10) rotate(-2deg);
            color: rgb(255, 77, 154);
            cursor: url("../cursors/cur_link.cur"), auto;
        }

        #nav_button2 {
            font-size: 14px;
            width: 100%;
            padding: 10px;
            background-image: url("../backgrounds/bg_pinkdots.png");
            background-size: 35px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 5px;
            border: none;
            text-align: left;
            transition: background-image 0.2s ease, transform 0.2s ease, color 0.2s ease;
            margin-top: 5px;
            margin-bottom: 5px;
            cursor: url("../cursors/cur_link.cur"), pointer;
        }

        #nav_button2:hover {
            background-image: url("../backgrounds/bg_bluedots.png");
            transform: scale(1.10) rotate(-2deg);
            color: rgb(255, 77, 154);
            cursor: url("../cursors/cur_link.cur"), auto;
        }

        #nav_button3 {
            font-size: 14px;
            width: 100%;
            padding: 10px;
            background-image: url("../backgrounds/bg_greendots.png");
            background-size: 35px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 5px;
            border: none;
            text-align: left;
            transition: background-image 0.2s ease, transform 0.2s ease, color 0.2s ease;
            margin-top: 5px;
            margin-bottom: 5px;
            cursor: url("../cursors/cur_link.cur"), pointer;
        }

        #nav_button3:hover {
            background-image: url("../backgrounds/bg_bluedots.png");
            transform: scale(1.10) rotate(-2deg);
            color: rgb(255, 77, 154);
            cursor: url("../cursors/cur_link.cur"), auto;
        }

        .nav_active {
            pointer-events: none;
        }

        strong {
            color: #02acd7;
            font-weight: bold;
        }

        footer {
            width: 100%;
            border: 4px solid #543323;
            border-top: none;
            border-radius: 0 0 50px 50px;
            background-image: url("../backgrounds/bg_corkboard.jpg");
            background-size: 250px;
            padding: 14px;
            text-align: center;
            margin-bottom: 20px;
        }

        h1 {
            font-size: 20px;
        }

        h2 {
            font-size: 16px;
        }

        h3 {
            font-size: 14px;
        }

        .grid {
            padding: 20px;
            background-color: #ffffff;
            background-image: url("../backgrounds/bg_grid.png");
            background-size: 17px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 1px;
            animation: hover 3s ease-in-out infinite;
        }

        @keyframes hover {
            0%, 100% { transform: translateY(3px) rotate(0deg); }
            50% { transform: translateY(-3px) rotate(0deg); }
        }

        @keyframes left2right {
            0%, 100% { transform: translateX(-3px) rotate(0deg); }
            50% { transform: translateX(3px) rotate(0deg); }
        }


        @media only screen and (max-width: 1000px) {
            #container {
                margin: 20px;
            }
            
            #flex {
                flex-wrap: wrap;
            }

            main {
                order: 2;
                width: 100%;
                border: 4px solid #543323;
                border-top: none;
                border-bottom: none;
                border-radius: 0 0 0 0;
            }

            main .grid:first-of-type {
                border-radius: 0 0 0 0 !important;
            }

            main .blue_note {
                border-radius: 0 0 0 0 !important;
            }

            main .green_note {
                border-radius: 0 0 0 0 !important;
            }

            main .pink_note {
                border-radius: 0 0 0 0 !important;
            }

            main .yellow_note {
                border-radius: 0 0 0 0 !important;
            }

            #left_sidebar {
                order: 1;
                width: 100%;
                border: 4px solid #543323;
                border-bottom: none;
                border-radius: 50px 50px 0 0;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 14px;
            }

            #left_sidebar > * {
                flex: 1 1 auto;
                min-width: 150px;
            }

            #left_sidebar > br {
                display: none;
            }

            #raymond {
                display: none !important;
            }

            #left_sidebar > div:has(button) {
                flex: 1 1 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: stretch;
            }

            #left_sidebar > div:has(button) a,
            #left_sidebar > div:has(button) > button {
                width: auto;
                flex: 1 1 auto;
                margin: 2px;
            }

            #left_sidebar > div:has(button) a button {
                width: 100%;
                height: 100%;
                margin: 0;
            }

            #left_sidebar .grid:first-of-type {
                border-radius: 50px 50px 0 0 !important;
            }

            #left_sidebar > .grid:not(:first-of-type) {
                flex: 1 !important;
                max-width: 33%;
                min-width: 120px;
                margin-top: 0 !important;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            #left_sidebar > .grid img[src*="sherbsleep"] {
                width: 60%;
            }


            #left_sidebar button:hover {
                transform: scale(1.03) rotate(-1deg);
            }

            #right_sidebar {
                order: 3;
                width: 100%;
                border: 4px solid #543323;
                border-radius: 0 0 0 0;
                border-top: none;
                border-bottom: none;
            }

            #right_sidebar .green_note:first-of-type {
                border-radius: 0 0 0 0 !important;
            }

            footer {
                margin-bottom: 3px;
                border: 4px solid #543323;
                border-top: none;
            }

            #header {
                margin: 20px;
            }
            
        }

        #left_sidebar > .grid:last-of-type {
            flex: 1;
        }

        .hover_icon {
            transition: transform 0.3s ease;
        }

        .hover_icon:hover {
            transform: rotate(5deg) scale(1.15);
        }

        .piece {
            position: absolute;
            width: calc(50% - 5px);
            opacity: 0;
            transition: opacity 0.8s ease;
        }

        .piece.loaded {
            opacity: 1;
        }

        :root {
            --album_of_the_moment: url("../images/img_black_album_floss.jpg");
        }

        .socials {
            background-image: url("../backgrounds/bg_bluedots.png");
            background-size: 35px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.573);
            border-radius: 1px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .socials a img {
            transition: transform 0.3s ease;
        }

        .socials a img:hover {
            transform: rotate(5deg) scale(1.15);
        }

        .album_of_the_moment {
            width: 150px;
            height: 150px;
            overflow: visible;
            margin: 10px auto;
            transition: transform 0.2s ease;
        }

        .album_of_the_moment:hover {
            transform: scale(1.05);
        }

        #top_bar {
            width: 100%;
            height: 30px;
            padding: 10px;
            font-size: smaller;
            background-color: #13092D;
        }

        #statuscafe {
            padding: .5em;
            background-color: azure;
            border: 1px solid #0d65a0;
        }

        #statuscafe-username {
            margin-bottom: .5em;
        }

        #statuscafe-content {
            margin: 0 1em 0.5em 1em;
        }

        @media only screen and (max-width: 600px) {
                    main [style*="grid-template-columns"] {
                        grid-template-columns: 1fr !important;
                        grid-template-rows: auto !important;
                    }
                }