/* variables */

    :root {

        /* colors */
        --offwhite: #dee4f5;
        --whiteblue: #c8d0e9;
        --lightblue:#99a6cf;
        --blue: #626ea9;
        --darkblue: #343978;
        --blackblue: #0c0a36;

        --whitebrown: #f4d8c4;
        --lightbrown: #cda085;
        --brown: #815c42;
        --darkbrown: #442d1c;

        --lightpink: #ffb6ce;
        --pink: #f481a7;
        --darkpink: #a02a52;

        --lightyellow: #ffeac8;
        --yellow: #fac674;

        --lightgreen: #c3d693;
        --green: #96aa62;
        --darkgreen: #3e572a;

        --site-width: 1000px;

        scrollbar-color: var(--root-scroll-handle) var(--root-scroll-main);
    }

    @font-face {
        font-family: Nunito;
        src: url('/fonts/Nunito-Regular.ttf');
    }

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

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

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

    *:focus-visible {
        border: #0c0a36;
    }

    * {
        box-sizing: border-box;
        margin:0;
        padding:0;
        text-decoration:none;
    }

    img {
        user-select: none;
    }

    body {
        font-family: 'Nunito', sans-serif;
        margin: 0;
        background-color: var(--body-bg-color);
        background-size: 65px;
        color: var(--main-text);
        background-image: var(--body-bg-image);
        cursor: url('/cursor/default.png'), auto;
        scrollbar-color: var(--body-scroll-handle) var(--body-scroll-main);
        overflow: hidden;
        font-size: 16px;
        display: flex;
        flex-direction: row;
        height:100vh;
    }

    #flex {
        display: flex;
        max-width: var(--site-width);
        margin: auto;
        margin-bottom: 10px;
    }

    main {
        background-color: var(--main-bg);
        border: 5px solid var(--main-border);
        border-radius: 20px;
        flex: 1;
        padding: 20px;
        order: 2;
    }

    aside, .sidebar {
        background-color: var(--aside-bg);
        border: 5px solid var(--aside-border);
        border-radius: 20px;
        width: 20%;
        min-width:200px;
        padding: 20px;
        font-size: smaller;
        color: var(--aside-text);
    }

    #leftSidebar {
        order: 1;
        margin-right: 10px;
    }

    #rightSidebar {
        order: 3;
        margin-left: 10px;
    }

    #container {
        overflow: auto;
        width: 100%;
        position: relative;
    }

    #container a {
        color: var(--link);
        font-weight: bold;
        text-decoration: underline dashed 2px;
    }

    #container a:hover {
        cursor: url('/cursor/pointer.png'), pointer;
        color: var(--link-hover);
    }

    @keyframes floaty {
        0% {position: relative; top: 20px;}
        100% {position: relative; top: 5px;}
      }

    #header {
        width: 500px;
        background-color: transparent;
        background-image: var(--header-image);
        background-size: 100%;
        background-repeat: no-repeat;
        margin: auto;
        margin-top: 0px;
        min-height: 310px;

        animation-name: floaty;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @media (prefers-reduced-motion) {
        #header {
            animation-name: none;
        }
      }
      

    /* navigation start */

    #burger {
        display:none;
        height: 50px;
        position:fixed;
        z-index: 20;
    }

    #burger[open] {
        position:fixed;
        height:100%;
    }

        
    #burger nav {
        width: 250px;
        overflow:auto;
        height: calc(100% - 60px)
    }
    
    #burger summary {
        display: flex;
        cursor: url("/cursor/pointer.png"), pointer;
        width: 250px;
        height: 50px;
        margin-bottom: 10px;
        background-color: var(--nav-bg);
        border: 5px solid var(--nav-border);
        border-radius: 0px 25px 25px 0px;
        color: var(--nav-link);
        font-weight: bold;
        font-size: 24;
        align-items: center;
        padding-left: 15px;
    }

    #burger summary:hover, #burger summary:focus  {
        border: 8px solid var(--nav-border);
    }
    
    #burger summary::-webkit-details-marker {
        display: none;
    }
    
    #burger summary::before {
        content: url('/emoji/menu.png');
    }
    
    #burger[open]>summary::before {
        content: url('/emoji/x.png');
    }


    .desktopmenulink { display:inline; }
    .mobilemenulink { display:none; }
        
    @media only screen and (max-width: 1400px) {
        #header {
            margin-top: 50px;
        }
        #mainNav {
            display: none;
        }

        #burger {
            display: block;
        }

        .desktopmenulink { display:none; }
        .mobilemenulink { display:inline; }
    
    }

    .skip {
        color: transparent;
        font-size: 14px;
        text-align: center;
    }

    .skip:focus .skip:focus-visible {
        color: var(--nav-link);
    }

    nav {
        position: fixed;
        z-index: 20;
        overflow: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        height: 100%;
        width: 200px;
        background-color: var(--nav-bg);
        border: 5px solid var(--nav-border);
        border-radius: 0px 25px 25px 0px;
        padding: 5px;
    }

    nav h2 {
        background-color: transparent;
        border: none;
        border-top: 3px dashed var(--nav-border);
        border-radius: 0px;
        margin: 0px;
        text-align: left;
    }

    nav a {
        display: block;
        color: var(--nav-link);
        font-weight: 800;
        text-decoration: none !important;
        text-align: right;
        padding: 10px;
    }

    nav img{
        width: 100%;
        max-width: 100px;
        margin:20px;
    }

    nav a:hover, nav a:focus, nav button:focus {
        outline: none;
        border-radius: 5px;
        color: var(--nav-link-hover);
        border-bottom: dashed 3px var(--nav-link-hover);
        cursor: url('/cursor/pointer.png'), pointer;
    }

    /* navigation end */

    
    /* styleswitcher start */

    #switcherBurger {
        height: 50px;
        position:fixed;
        right:0;
        z-index: 20;
    }

    #switcherBurger summary {
        display: flex;
        cursor: url("/cursor/pointer.png"), pointer;
        width: 210px;
        height: 50px;
        margin-bottom: 10px;
        background-color: var(--nav-bg);
        border: 5px solid var(--nav-border);
        border-radius: 25px 0px 0px  25px;
        color: var(--nav-link);
        font-weight: bold;
        font-size: 24;
        align-items: center;
        padding-left: 15px;
    }

    #switcherBurger summary:hover, #switcherBurger summary:focus  {
        border: 8px solid var(--nav-border);
    }

    #switcherBurger summary::after {
        content: url('/emoji/switch.png');
    }

    #styleswitcher form {
        background-color: var(--nav-bg);
        border: 5px solid var(--nav-border);
        border-radius: 15px;
        padding: 10px;
        margin: 10px;
        text-align: center;
    }

    #styleswitcher select {
        font-family: 'Nunito', sans-serif;
        width: 100%;
        padding: 5px;
        margin: 5px auto;
        display: block;
        background-color: var(--nav-bg);
        border: 2px solid var(--nav-border);
        border-radius: 5px;
        color: var(--nav-link);
        font-weight: bold;
        transition: 0.2s;
        cursor: url("/cursor/pointer.png"), pointer;
    }

    #styleswitcher option {
        font-family: sans-serif;
    }

    #styleswitcher label {
        color: var(--nav-link);
        font-weight: bold;
        cursor: url("/cursor/default.png"), default;
    }

    #styleswitcher input {
        background-color: inherit;
        font-family: inherit;
        font-weight: bold;
        border: inherit;
        color: var(--nav-link);
        border-width: 2px;
        border-radius: 10px;
        padding: 5px;
        transition: 0.2s;
        cursor: url("/cursor/pointer.png"), pointer;
    }

    #styleswitcher input:hover, #styleswitcher input:focus, #styleswitcher select:hover, #styleswitcher select:focus {
        background-color: var(--nav-link-hover);
        outline: 1px solid var(--nav-border);
        color: var(--nav-bg);
    }

    /* styleswitcher end */

    /* footer start */

    footer, header {
        background-color: var(--footer-bg);
        border: 5px solid var(--footer-border);
        border-radius: 10px;
        max-width: var(--site-width);
        width: 100%;
        height: auto;
        padding: 10px;
        margin: auto;
        margin-bottom: 10px;
        color: var(--footer-text);
        font-weight: bold;
        display: flex;
        justify-content: space-evenly;
    }
    footer a {
        color: var(--footer-link) !important;
    }

    footer a:hover {
        color: var(--footer-link-hover) !important;
    }

    /* footer end */

    section {
        background-color: var(--main-bg);
        padding: 15px;
        border: 5px solid var(--main-border);
        border-radius: 20px;
    }

    h1, h2, h3, h4 {
        font-style: italic;
    }

    h2, h3, h4 {
        text-align: center;
    }

    h1 {
        font-size: 32px;
        color: var(--h1-text);
        border-bottom: 5px dotted var(--h1-bottom);
        text-align: left;
    }

    h2 {
        font-size: 24px;
        background-color: var(--h2-bg);
        border-radius: 15px;
        border-bottom: 5px solid var(--h2-shadow);
        border-right: 5px solid var(--h2-shadow);
        max-width: 1000px;
        margin: auto;
        margin-bottom: 15px;
        margin-top: 15px;
        padding: 5px;
        color: var(--h2-text);
    }

    h3 {
        font-size: 20px;
        border-top: 5px solid var(--h3-top);
        border-bottom: 5px dashed var(--h3-bottom);
        padding: 5px;
        color: var(--h3-text);
    }

    h4 {
        font-size: 18px;
        color: var(--h4-text);
    }

    p {
        text-align: center;
    }

    strong {
        color: var(--text-strong);
    }

    hr {
       border:2px dashed var(--hr-color);
    }

    .button-link {
        display: block;
        background-color: var(--updates-bg);
        border: 5px solid var(--updates-border);
        border-radius: 15px;
        padding: 10px;
        color: var(--updates-text);
        scrollbar-color: var(--updates-scroll-handle) var(--updates-scroll-main);
        margin: auto;
        width: 200px;
        height: 100px;
    }

    .center-image{
        display: block;
        margin: auto;
    }

    .rounded-corners {
        border-radius: 15px;
    }

    /* updates start */

    .updates {
        background-color: var(--updates-bg);
        border: 5px solid var(--updates-border);
        border-radius: 15px;
        padding: 15px;
        padding-left: 30px;
        overflow: auto;
        color: var(--updates-text);
        max-height: 800px;
        width: 100%;
        scrollbar-color: var(--updates-scroll-handle) var(--updates-scroll-main);
    }

    .updates h2 {
        max-width: 100%;
        border: none;
        border-radius: 15px;
        text-align: left;
        padding: 5px;
        background-color: var(--updates-h2-bg);
        color: var(--updates-h2-text);
    }

    .updates a {
        color: var(--updates-link) !important;
    }

    .updates a:hover {
        color: var(--updates-link-hover) !important;
    }

    .updates li:nth-child(1), .updates li:nth-child(1n+4) {
        list-style-image: url('/emoji/ball-pink.png');
    }

    .updates li:nth-child(2), .updates li:nth-child(2n+4) {
        list-style-image: url('/emoji/ball-yellow.png');
    }

    .updates li:nth-child(3), .updates li:nth-child(3n+4) {
        list-style-image: url('/emoji/ball-green.png');
    }

    .updates li:nth-child(4), .updates li:nth-child(4n+4) {
        list-style-image: url('/emoji/ball-blue.png');
    }

    /* updates end */

    #whisper {
        opacity: 50%;
    }

    #wobble {
        background-color: var(--yellow);
        border: 3px dashed var(--blue);
        margin: 10px auto;
        max-width: fit-content;
        padding: 10px;
    }

    /* about start */

    #interests {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    #favs {
        width: 45%;
        padding: 10px;
        margin: 5px auto;
        border-radius: 25px;
        background-color: var(--favs-bg);
        height: auto;
    }

    #favs ul {
        margin: 10px;
        padding: 0;
        text-align: left;
    }

    #favs h2 {
        margin-top: 0px;
    }

    /* about end */

    .hearts ul {
        list-style-image: url('/emoji/heart-pink.png');
        list-style-position: inside;
    }

    .stars ul {
        list-style-image: url('/emoji/star.png');
        list-style-position: inside;
    }

    /* tab start */

    .tab {
        background-color: none;
        padding: 10px;
        text-align: center;
        width: 100%;
        align-items: center;
        
    }

    .tab button {
        display: block;
        background-color: var(--tab-btn);
        border-bottom: 5px solid var(--tab-btn-border);
        border-right: 5px solid var(--tab-btn-border);
        border-top: none;
        border-left: none;
        border-radius: 10px;
        color: var(--tab-btn-text);
        font-family: 'Nunito', sans-serif;
        outline: none;
        padding: 5px;
        cursor: url('/cursor/pointer.png'), pointer;
        transition: 0.3s;
        width: 120px;
        height: 50px;
        float: left;
        margin: 5px;
        font-weight: bold;
    }

    .tab button:hover, .tab button.active, .tab button:focus {
        background-color: var(--tab-btn-hover);
        border-bottom: 5px solid var(--tab-btn-border-hover);
        border-right: 5px solid var(--tab-btn-border-hover);
    }

    .tab button:hover, .tab button:focus {
        outline: 2px solid var(--tab-btn-border-hover);
        transition: 0s;
    }

    .tabcontent {
        border-radius: 20px;
        padding: 10px;
        overflow: auto;
        text-align: center;
        width: 100%;
        height: auto;
        min-height: 500px;
    }

    .tabcontent a {
        text-decoration: none;
    }

    /* tab end */

    /* to-do start */

    .todo-box {
        background-color: var(--todo-bg);
        border: 10px double var(--todo-border);
        border-radius: 3px 30px 3px 30px;
        width: 100%;
        max-width: 500px;
        margin: auto;
        padding: 10px;
        color: var(--todo-text);
    }

    .todo-box ul {
        list-style-position: inside;
        margin: 0;
        padding: 0;
        font-weight: 600;
    }

    .todo-box li {
        margin-top: 5px;
    }

    .half {
        width: 50%;
        padding: 5px;
    }
    /* to-do end */

    /* status cafe start */
    #statuscafe {
        border: 5px dotted var(--main-border);
        border-radius: 5px 15px 5px 15px;
        padding: 10px;
    }

    #statuscafe-username {
        margin-bottom: 10px;
    }
    #statuscafe-content {
        text-align: center;
    }
    /* status cafe end */

    #monstermash img{
        max-width: 300px;
    }
    
    /* decoration */

    .shelf a{
        background-image: url("/images/shelf.png");
        height: 60px;
        display: inline-block;
        margin: 5px;
        margin-top: 25px;
    }

    #floating-character {
        background-color: none;
        background-image: var(--character-image);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: fixed;
        bottom:50px;
        right: 20px;
    }    

    @media only screen and (max-width: 1400px) {
        #floating-character {
            display: none;
        }
    }

    @media only screen and (max-width: 900px) {
        #flex {
            flex-wrap: wrap;
        }

        aside, .sidebar {
            width: 100%;
        }

        #switcherBurger {
            position: relative;
            float: right;
        }

        #favs {
            width: 100%;
        }

        .tab button {
            width: auto;
            min-width: 50px;
        }

        #abt-container {
            width: 100%;
        }

        #header {
            width: 400px;
            min-height: 250px;
        }

        main {
            order: 2;
        }

        #leftSidebar {
            order: 1;
            margin-right: 0;
            margin-bottom: 15px;
        }

        #rightSidebar {
            order: 3;
            margin-left: 0;
            margin-top: 15px;
        }

        #temporary {
            width: 100%;
        }

    }