/****** fonts ******/
@font-face { 
    font-family: "Spectral-Regular"; 
    src: url("/fonts/Spectral-Regular.woff2") format("woff2"), 
        url("/fonts/Spectral-Regular.woff") format("woff"), 
        url("/fonts/Spectral-Regular.ttf") format("truetype"); 
    font-weight: normal;
    font-style: normal; 
    font-display: swap; 
}

@font-face { 
    font-family: "HappyLilFont"; 
    src: url("/fonts/HappyLilFont.woff2") format("woff2"), 
        url("/fonts/HappyLilFont.woff") format("woff"), 
        url("/fonts/HappyLilFont.ttf") format("truetype"); 
    font-weight: normal;
    font-style: normal; 
    font-display: swap; 
}

.bebe {
      bottom: 630px;
      position: absolute;
      left: 560px;
      height: 100px;
      width: 120px;
      transform: rotate(50deg);
      object-fit: contain;
      pointer-events: none;
      z-index: 9999;
      filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 0px white);
    }

    .bebe2 {
      top: 1160px;
      position: absolute;
      right: 735px;
      height: 100px;
      width: 100px;
      object-fit: contain;
      pointer-events: none;
      z-index: 9999;
      filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 0px white);
    }

#top-lace {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 300px; /* Adjust to your lace image height */
  background-image: url('https://file.garden/afur3PEpvWUTiMvr/Dividers/byblinkies12.png');
  background-repeat: repeat-x; /* Repeats the lace horizontally */
  z-index: 9999; /* Keeps it on top of other content */
  pointer-events: none; /* Allows users to click through the lace to links below */
}

/****** scrollbar ******/
::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-thumb{
    background:#d9dfff;
    border-radius:0;
}

::-webkit-scrollbar-track{
    background:inherit;
    border-radius:0;
}

/****** select hightlight ******/
::selection{
    background:#bec5e8;
    color:white;
}

::-moz-selection{
    background:#bec5e8;
    color:white;
}

html {
cursor: url('https://file.garden/afur3PEpvWUTiMvr/Cursors/bluemoon.png'), auto !important;
}
*{

/****** body ******/
body {
    background-color:#d2bcd7;
    background-image:url(https://file.garden/afur3PEpvWUTiMvr/Backgrounds/blueflowers4.webp);
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    color:#484e6f; /* default font color */
    font-family:"Spectral-Regular"; /* default font */
    font-size:15px; /* default font size */
    padding:10px;
}

/****** links ******/
a{
    text-decoration:none;
    color:#e8ebff;
    transition:0.3s;
    text-shadow:-1px 0 #9aa0c8, 0 1px #9aa0c8, 1px 0 #9aa0c8, 0 -1px #9aa0c8;
}

a:hover{
    cursor: url(https://file.garden/afur3PEpvWUTiMvr/Cursors/bluemoon.png), progress !important;
    font-style: italic;
    cursor:pointer;
    transition:0.1s;
    color:#8c95c3;
    text-shadow:-1px 0 #e6eaff, 0 1px #e6eaff, 1px 0 #e6eaff, 0 -1px #e6eaff;
}

/****** wrappers ******/
#wrapper{
    max-width:700px; /* width of entire page - can be changed but i don't recommend anything bigger than 1000! got to make sure the page fits on the screen */
    max-height:100%;
    width:fit-content;
    height:fit-content;
    animation:fadeEffect 1s;
    margin:auto;
}

@keyframes fadeEffect{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

#mainwrapper{
    text-align: center;
    margin-top:20px; /* space between containers */
    display:flex;
    gap:20px; /* space between containers */
    justify-content:space-between;
}

/****** main containers ******/
#header{
    width:100%; /* automatically resizes header image to the size of the wrapper (in this case 900px) */
}

#header img{
    max-width:100%;
    max-height:100%;
    display:block;
    object-fit:cover;
    box-sizing:border-box;
}

#title{
    color:#f598b5; /* color of title */
    text-shadow:-1px 0 #f6d695, 0 1px #f6d695, 1px 0 #f6d695, 0 -1px #f6d695;
    font-size:70px; /* font size of title */
    text-align:center;
    font-family:"HappyLilFont"; /* font of title */
    width:100%;
    animation:pop 1s ease-in-out infinite alternate;
}

@keyframes pop{
    from{
        transform:scale(0.95);
    }
    50%{
        transform:scale(1);
    }
    to{
        transform:scale(0.95);
    }
}

#main{
    width:85%; /* width of main container - should add up to 100 when added to #sidebar width */
    max-height:985px; /* you can make this taller if you'd like */
    float:left;
    border-width: 7px; 
    border-style: solid; 
    border-image: url(https://file.garden/afur3PEpvWUTiMvr/Backgrounds/whiteborder.png) fill 7 round;
    padding:10px;
    overflow:auto;
    background-color:; /* background color of main container */
}

#sidebar{
    width:30%; /* width of sidebar - should add up to 100 when added to #main width */
    float:left;
    display:flex;
    flex-direction:column;
    gap:30px; /* space between containers */
    position:relative;
}

/****** sidebar containers ******/
.subtitle{
    text-align:center;
    font-family:"HappyLilFont"; /* font of subtitle */
    font-size:35px; /* font size of subtitle */
    margin-top:-16px; /* should be about half of the subtitle font size */
    width:100%;
    position:absolute;
    color:#e3e6f9; /* color of subtitle */
    text-shadow:-1px 0 #8d96c6, 0 1px #8d96c6, 1px 0 #8d96c6, 0 -1px #8d96c6;
    animation:pop 1s ease-in-out infinite alternate;
}

.links{
    border-width: 7px; 
    border-style: solid; 
    border-image: url(https://file.garden/afur3PEpvWUTiMvr/Backgrounds/whiteborder.png) fill 7 round;
    padding:10px;
    background-color:;
    text-align:center;
}

.box{
    border-width: 7px; 
    border-style: solid; 
    border-image: url(https://file.garden/afur3PEpvWUTiMvr/Backgrounds/whiteborder.png) fill 7 round;
    padding:10px;
    background-color:#ebeeff;
    text-align:center;
}

.banner{
    max-width:100%;
    max-height:100%;
}

/****** mobile settings ******/
@media only screen and (max-width: 600px){
    #sidebar, #main{
        width:100%; /* makes all container 100% to fit screen */
    }

    #mainwrapper{
        flex-wrap:wrap;
    }

    .banner{
        max-width:60%; /* reduces image size of banners on mobile so they look nicer */
        margin:auto;
    }
}