:root {
                /* These variables exist so you can make quick and simple style changes without much CSS knowledge */

                /* applies to all areas */
                --font-family: Consolas,Hack,"Liberation Mono",monospace;
                --font-size: 14px;
                --line-height: 1.3em;
                --font-color: black;
                --link-color: #370808;
                --link-text-decoration: none;
                --border-color:#A53860;

                /* main content (between sidebars) */
                --content-padding: 25px;
                --content-bg-color: ;

                /* header */
                --header-height: 150px;
                --header-background: url();
                /* if img is a gif -> background-size: contain   if img is a png -> background-size: cover *background-size is in #header-contained* */
                --header-margin-bottom: 10px;
                --header-margin-top: 10px;

                /* sidebar */
                --sidebar-margin: 10px;
                --sidebar-width: 150px;
                --sidebar-padding: 15px;
                --sidebar-bg-color: #EDBEC8;

                /* footer */
                --footer-height: 30px;
                --footer-bg-color: #EDBEC8;

                /* navbar */
                --navitems-alignment: center;
                --space-between-navitems: 20px;
                --navbar-margin-bottom: 10px;
                --nav-bg-color: #EDBEC8; 

                /* container */
                --container-width: 800px;
                

                /* controls the gap between the content and the footer */
                --row-gap: 5px;

                /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */

                --sidebar-height: 100%;
                --sidebar-overflow: visible;
                --background-color: #EDBEC8;
                
            }

            html,
            body {
                margin: 0;
                padding: 0;
                background-image: url(https://i.pinimg.com/736x/34/9b/dc/349bdc30a04a67286da179b0e0b1bef1.jpg);
                background-color: var(--background-color);
                font-family: var(--font-family);
                font-size: var(--font-size);
                line-height: var(--line-height);
                color: var(--font-color);
            }

            body a {
                color: var(--link-color);
                font-weight: bold;
                text-decoration: var(--link-text-decoration);
            }

            .box{
                border: solid;  
                border-color: var(--border-color);
                border-radius: 7px;
                contain:layout;
                background-color: #f5dbc7;
                margin-bottom: 7px;
                text-align: center; 
                width: 100%;
                box-shadow:  #FFA5AB 0px 0px 15px;
            }
            .log {
                border: solid;
                border-color: #C25B51;
                border-radius: 7px;
                height: min-content;
                background-color: #f5d7;
                margin-bottom:7px;
                text-align: center;              
            }
            a:hover{
                text-decoration: underline;
            }
            a:hover img{
                filter: drop-shadow(0 0 5px #C25B51);
            }

            [title]:after{
             content: attr(title);
             position: absolute;
             left: 50%;
             bottom: 100%; /* put it on the top */
             background-color: yellow;
             width: max-content;
             opacity: 0;
             transition: opacity 0.10s ease-in-out; /* 👈 Change the time to meet your requirements. */
            }

            #main-container {
                max-width: var(--container-width);
                margin: 0 auto;
                background-color: var(--container-bg-color);
                position: relative;
                z-index: 1;
            }

            .flex {
                display: flex;
                margin-bottom: var(--row-gap);
            }

            .content-wrap {
                margin-top: var(--content-margin-top);
            }
            .main-title{
                font-family: starborn;
                text-align: center;
                font-size: 3em;
                color: #DA627D; 
            }
        

            #content-container {
                width: 60%;
                margin-bottom: var(--row-gap);
                background-color: var(--content-bg-color);
            }

            #left-sidebar {
                width: var(--sidebar-width);
                margin-right: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
               /* background-color: var(--sidebar-bg-color);*/
                /* border: var(--border-color); */
                position:relative;
                z-index: 1;
            }
            #statuscafe {
                padding: auto;
                background-color: #f5dbc7;
                height:40%;
                border: var(--border-color);
                border-radius: 7px;
            }
            #statuscafe-username {
                margin-bottom: .5em;
            }
            #statuscafe-content {
                margin: 0 ;
            }
            #nenemermaid {
                position: absolute;
                top: 100px;
                right: 30px;
                width: 140px;
                z-index: 2;
            }
            #bottompfp {
                position:absolute;
                top: 220px;
                right: 65px;
                width: 150px;
                z-index: 2;
            }
            #right-sidebar {
                width: var(--sidebar-width);
                margin-left: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
            }
            #links {
                max-height: 170px; /* Set a maximum height before scrolling starts */
                overflow-y: auto; /* Add vertical scrollbar when content overflows */
                border: solid var(--border-color); 
                -ms-overflow-style: none;
            }
            #links::-webkit-scrollbar  { /*Hide scrollbar for chrome*/
                width: 6px;
                height:5px;

            }
            #links::-webkit-scrollbar-track{
                display: none;
                border: 3px solid transparent; 
                background-clip: padding-box;
            }
            #links::-webkit-scrollbar-thumb {
                 background: #C25B51;
                 border-radius: 2px;
            }
            
            #links a {
                margin: 0em;
                padding: 0em;
            }

            #todolist{
                background-image: url(https://toyboxy.carrd.co/assets/images/image29.png?v=fdbdf8d2);
                background-size: cover;                 /* Ensures the image covers the entire div */
                background-position: center;            /* Centers the image within the div */
                height: 90px;                                                                 
                padding: 10px; 
                margin-bottom: 10px;
            }
            #todolist ul {
                list-style-type: "☐";
                margin: 0px;
                padding: 0px;
                list-style-position: inside; /* positions markers inside the line box */
            }
            #header-contained {
                position:relative;
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                margin-top: var( --header-margin-top);
                background-color: none;
         
      
            }

            #footer {
                height: var(--footer-height);
                text-align: center;
                color: var(--font-color);
                background-color: var(--footer-bg-color);
                z-index: 1;
                overflow: visible;
            }

            #header-full {
                display: none;
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
            }

            #navbar-contained {
                margin-bottom: var(--row-gap)
            }

            #navbar-full {
                display: none;
            }

            .nav {
                margin-left: 0;
                text-align: var(--navitems-alignment);
                margin-top: 0;
                margin-bottom: var(--navbar-margin-bottom);
                padding-top: 1em;
                padding-bottom: 1em;
                background-color: var(--nav-bg-color);
                border-radius: 70px;
            }

            .nav li {
                display: inline-block;
                padding-right: var(--space-between-navitems);
            }
            #pfp2{
                z-index: 2;
            }

            .wrapper {
                margin-bottom: 7px;
                padding: var(--content-padding);
                padding-top: var(--sidebar-padding);
                background-color: #EDBEC8;
                border: solid var(--border-color); 
                z-index: 1;
            }
        
            #blinkies{
                background-color: #EDBEC8;;
                text-align-last: center;
                object-fit:fill;
                padding-top: 3px;
                border-radius: 3px;
            }

            .sidebar-wrapper {
                padding: var(--sidebar-padding);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: var(--sidebar-bg-color);
                border: solid var(--border-color); 
                position: relative;
                z-index: 1;
            }

            .footer-wrapper {
                padding: 5px;
            }
            
            /*ABOUT PAGE STYLES -----------------------------------------------------------------*/
            .decoimage{
                position:absolute;
                top: 410px;
                left: 450px;
                width: 100px;
                z-index: 2;
            }
            .aboutsummary{
                width: 100%;
                min-height: 150px;
                padding: 15px;
                padding-top: 23px;
                box-sizing: border-box;
                list-style: none;
                color: black;
            }
           .polaroidframe{
            background: #fff;
            width:100px;
            padding: 5px 5px 20px 5px; /* Top, right, left padding: 1rem. Bottom padding: 3rem (taller) */
            box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2); /* Subtle shadow for depth */
            display: inline-block; /* Allows side-by-side display */
            margin: 5px; /* Spacing between multiple polaroids */
            text-align: center; /* Center the caption */
            box-sizing: border-box; /* Ensure padding is included in the element's total width/height */
           }
           .polaroidframe img{
             max-width: 100%;
             height: auto;
             display: block; 
             height:90px;
             width: 90px;
             object-fit: cover;
           }
           .preferences{
            margin-left: 50px;
           }
           .preferences img{
            width:200px;
            height:100px;
           }
           /* PROJECTS PAGE STYLES -------------------------------------------------------------*/ 
           #sleepingbunny{
            width: 130px;
            z-index: 2;
            position:absolute;
            right: 50px;
            bottom: -3px;
           }
            /* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat985.cur), auto !important;} /* End https://www.cursors-4u.com */
            
            /* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
            @media only screen and (max-width: 800px) {
                .flex {
                    flex-wrap: wrap;
                }

                #left-sidebar {
                    width: 100%;
                    display: block;
                    order: 2;
                    margin-right: 0;
                    margin-bottom: 10px;
                }

                #right-sidebar {
                    width: 100%;
                    display: block;
                    order: 3;
                    margin-left: 0;
                    margin-bottom: 10px;
                }

                #content-container {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                }
            

            }