@font-face {
  font-family: Angelic Peace;
  src: url(https://files.catbox.moe/ogg5n1.ttf);
}

   * {cursor: url(/cursor/default.png), auto;}
A:hover{cursor: url(/cursor/hover.png), auto;}

  body {
      background-image: url('/bgs/angelic.png');
    }

      .container {
      display: flex;
      flex-direction: column;
      height: 999px;
      width: 1000px;
      margin: auto;
      background-image: url('https://64.media.tumblr.com/f3d4f9100ec5dd1070048e2e1e86c190/54dbdd530a69c1c9-f8/s75x75_c1/554afeed0758997760577ced06f2027841b0b628.pnj');
      border: 4px groove pink;
    }

    .header {
      color: #f097c9;
      width:100%;
      height: 170px;
      position: sticky;
      background-image: url('https://i.pinimg.com/736x/79/0b/1e/790b1ed31a018b12bf178b7199fde6b3.jpg');
      background-size: cover;
      background-position: left center;
      float: none;
      font-family: Angelic Peace;
    }
.flex {
  display: flex;
  gap: 5px;
}
    .left {
      flex-direction: column;
      width: 275px;
      height: 100%;
    }
    .navi {
      width: 275px;
      height: 260px;
      border: 2px ridge pink;
      background-color: #ffffff;
    }
    .nav {
      width: 275px;
      height: 20px;
        border-width:2px;
        border-color:pink;
        background-image:url('https://i.imgur.com/Oz54l9w.gif');
        overflow:hidden;   
    }
    .buttons {
      background-image: linear-gradient(to bottom, #f7c3db, #f2c2e0);
      width: 275px;
      height: 20px;
    }
    a {
      color: #f07aaf;
      text-decoration: none;
    }
    a:hover {
      color: #f54e99;
      text-decoration: none;
    }
    .stats {
      overflow-y: scroll;
      width: 275px;
      height: 200px;
    }
.magazine {
      width: 275px;
      height: 400px;
      background-image: url('https://i.pinimg.com/474x/a8/82/16/a882167ac034f5268d15e86ff2630ec3.jpg');
      background-size: 100% 100%;
    }
 
    .center {
      flex-direction: column;
      flex: 1;
      width: 350px;
    }
    .about {
      width: 100%;
      height: 250px;
      overflow-y: scroll;
    }
    .updates {
      width: 100%;
      height: 200px;
    }
    .button {
      width: 100%;
      height: 50px;
    }
    .etc {
      width: 100%;
      height: 100px;
    }
    .nav2 {
      width: 100%;
    }
    .button2 {
      background-color: #fad9ef;
      width: 75px;
      text-align: center;
      border: transparent;
    }
    .section {
  display: none;
}
.section.active {
  display: block;
}

.sites {
  margin-top: 20px;
  height: 200px;
  overflow-y: scroll;
}

    .right {
      flex-direction: column;
      width: 250px;
      height: 100%;
    }
    .chatbox {
      width: 250px;
      height: 250px;
    }
  #status {
    height: 75px;
    padding: .5em;
    background-color: #fce8f2;
    border: 10px solid transparent;
    border-image: url(https://file.garden/aE45oVdAxAp36qM8/IMG_5821.png) 35 round; /* credits to rentry.co/border for this border */
    }
    #statuscafe-username {
        margin-bottom: .5em;
    }
    #statuscafe-content {
        margin: 0 1em 0.5em 1em;
    }
    .calendar {
      width: 250px;
      gap: 0;
    }
    table {
    width: 250px;
    height: 150px;
    }
    .poll {
      width: 250px;
    }

.stamps {
  width: 250px;
}
    /* for the snowflakes, i found the layout on spacehey. i want to link it here, but spacehey is banned where i live. feel free to take this...*/
    .snowflake {
font-size: 16px;
}

    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
    
/* thank you to w3schools for this!! i edited it to fit my site's theme */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px pink;
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #f2a5c6; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #eb75a8; 
}

.decor {
  background-image: url('https://i.postimg.cc/TYhp9CQ1/vx8q4i.gif');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1000;
  height: 250px;
  width: 150px;
  top: 0px;
  left: -20px;
  pointer-events: none;
}