* {
    margin: 0;
    padding: 0;
}

/* Start https://www.cursors-4u.com */
* {cursor: url(https://cur.cursors-4u.net/symbols/sym-2/sym185.ani), url(https://cur.cursors-4u.net/symbols/sym-2/sym185.png), auto !important;} /* End https://www.cursors-4u.com */

@font-face {
    font-family: Adelia;
    src: url(https://willdotjpg.gay/fonts/ADELIA.OTF);
}

@font-face {
    font-family: Daisywheel;
    src: url(https://willdotjpg.gay/fonts/daisywhl.otf);
}

@font-face {
  font-family: sidebar-font;
  src: url(fonts/Suncos.ttf);
}

body {
    background-image: url('/images/background.jpg');
    background-size: cover; /* Scales the image to cover the entire container, maintaining aspect ratio */
    background-position: center center; /* Centers the image both horizontally and vertically */
    background-repeat: no-repeat; /* Prevents the image from repeating */
      background-attachment: fixed; /* Keeps the background image fixed while the content scrolls */
  min-height: 100vh; /* Ensures the body takes up at least the full viewport height */
}

h2{
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #88273e;
    text-decoration-thickness: 0.1rem;
    font-size: 30px;
}

.title {
    font-family: 'Adelia';
    position: absolute;
    margin-left: 500px;
    margin-top: 235px;
    z-index: 1;
    font-size: 30px;
}

.bear1 {
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 200px;
    margin-left: 1200px;
    margin-top: 210px;
}

.bear2 {
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 200px;
    margin-left: 420px;
    margin-top: 700px;
}

.main {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%);
    width: 800px;
    height: 500px;
    background-color: rgba(185, 67, 127, 0.5);
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Daisywheel';
    color: white;
}

.vl {
    border-left: 1px solid #000;
    height: 400px;
    position: absolute;
    margin-left: 250px;
    margin-top: 50px;
}

.content {
    position: absolute;
    margin-left: 270px;
    width: 510px;
    height: 450px;
    padding 10px;
    margin-top: 40px;
    overflow-y: auto;
    overflow-x: visible;
}

.content a {
  color: #eb7aae;
}

.navigation {
    position: absolute;
    width: 230px;
    height: 500px;
    padding: 10px;
    margin-top: 40px;
    overflow: auto;
    color: white
}

.category {
    font-family: 'Daisywheel';
    color: white;
    font-size: 20px;
    width: 200px;
    background-color: #c23858;
    border: none;
    border-radius: 5px;
}

  /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 100%;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #ED64F5;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

            #header {
                width: 100%;
                background-color: #5e4e8c;
                /* header color here! */
                height: 150px;
                /* this is only for a background image! */
                /* if you want to put images IN the header, 
      you can add them directly to the <div id="header"></div> element! */
                background-image: var(--header-image);
                background-size: 100%;
            }

            /* navigation section!! */
            #navbar {
                height: 40px;
                background-color: rgba(185, 67, 127, 0.5);
                /* navbar color */
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            /* navigation links*/
            #navbar li a {
                color: #fff;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
                  font-family: 'sidebar-font';
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #96294f;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }