:root {
    --header-bg: url('images/rathersleep.jpg');
    --main-bg: url('images/nothing.png');
    --side-bg: url('images/kariert.png');
    --paper-bg: url('images/paper.png');
    --accent-color: darkslateblue;
    --button-color:#464657;
    --link-color: mediumpurple;
    --bg-color: #fff;
    --bg-color2: #272343;
    --text-color: violet;
    --text-color2: white;
    --text-effect: rgba(255, 255, 255, 0.5); 
}

* {
    color: var(--text-color);
    font-family: bahnschrift;
    box-sizing: border-box;
}

::selection {
    background: var(--accent-color);
    color: var(--bg-color);
}

a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

a {
    color: var(--link-color)
}

.star {
  position: fixed;
  top: -40px;

  width: 28px;
  height: 28px;

  clip-path: polygon(
    50% 0%,
    61% 30%,
    95% 35%,
    68% 57%,
    79% 92%,
    50% 72%,
    21% 92%,
    32% 57%,
    5% 35%,
    39% 30%
  );

  opacity: 0;
  pointer-events: none;
  z-index: 99999;

  animation: star-fall linear infinite;

}

.star:nth-child(1)  { left:5%;  width:24px;height:24px;background:#fbb6c2;animation-duration:7s;  animation-delay:0s;   }
.star:nth-child(2)  { left:12%; width:34px;height:34px;background:#f9c6cf;animation-duration:9s;  animation-delay:1.2s; }
.star:nth-child(3)  { left:20%; width:20px;height:20px;background:#fcd6dc;animation-duration:6s;  animation-delay:2.5s; }
.star:nth-child(4)  { left:28%; width:30px;height:30px;background:#f8b4be;animation-duration:10s; animation-delay:0.7s; }
.star:nth-child(5)  { left:36%; width:22px;height:22px;background:#fce4e8;animation-duration:8s;  animation-delay:3.1s; }
.star:nth-child(6)  { left:44%; width:38px;height:38px;background:#f9c6cf;animation-duration:11s; animation-delay:1.8s; }
.star:nth-child(7)  { left:52%; width:24px;height:24px;background:#fbb6c2;animation-duration:7.5s;animation-delay:4.2s; }
.star:nth-child(8)  { left:60%; width:28px;height:28px;background:#fcd6dc;animation-duration:9.5s;animation-delay:0.4s; }
.star:nth-child(9)  { left:68%; width:20px;height:20px;background:#f8b4be;animation-duration:6.5s;animation-delay:2.9s; }
.star:nth-child(10) { left:76%; width:34px;height:34px;background:#fce4e8;animation-duration:8.5s;animation-delay:5s; }
.star:nth-child(11) { left:84%; width:26px;height:26px;background:#f9c6cf;animation-duration:10s; animation-delay:1.5s; }
.star:nth-child(12) { left:91%; width:22px;height:22px;background:#fbb6c2;animation-duration:7s;  animation-delay:3.7s; }
.star:nth-child(13) { left:8%;  width:32px;height:32px;background:#fcd6dc;animation-duration:12s; animation-delay:6.1s; }
.star:nth-child(14) { left:23%; width:24px;height:24px;background:#f8b4be;animation-duration:9s;  animation-delay:4.8s; }
.star:nth-child(15) { left:40%; width:18px;height:18px;background:#fce4e8;animation-duration:6s;  animation-delay:7.2s; }
.star:nth-child(16) { left:57%; width:38px;height:38px;background:#f9c6cf;animation-duration:11s; animation-delay:2.3s; }
.star:nth-child(17) { left:72%; width:22px;height:22px;background:#fbb6c2;animation-duration:8s;  animation-delay:5.9s; }
.star:nth-child(18) { left:88%; width:28px;height:28px;background:#fcd6dc;animation-duration:10s; animation-delay:0.9s; }

@keyframes star-fall {
  0% {
    opacity: 0;
    transform:
      translateY(0)
      translateX(0)
      rotate(0deg);
  }

  5% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.75;
  }

  100% {
    opacity: 0;
    transform:
      translateY(105vh)
      translateX(60px)
      rotate(420deg);
  }
}

body {
    margin: 0;
    background-color: var(--bg-color);
    background-image:
    linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
    linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;}

body::after {
    content: "";
    position: fixed;
 
    /* Position: Adjust these to place it in your preferred corner or sum  */
    bottom: 20px;  /* ddistance from the bottom screen edge */
    right: 20px;   /* istance from the right screen edge (change to 'left'  u want) */
 
    /* image settings */
    background-image: url(/images/floatie.PNG);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
 
    /* dimensions: adjust based on your image's proportions or hwhatever  */
    width: 300px;  
    height: 300px;
 
    /* layering & interaction */
    z-index: 9999; /* keeps it on top of other profile elements or sum */
    pointer-events: none; /* allows users to click "through" it so it doesn't block links */
 
    /* smooth entry or hover transitions */
    transition: all 0.3s ease-in-out;
}
 
/* opt: subtle bounce animation to make it lively */
@keyframes chibiFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
 
body::after {
    animation: chibiFloat 4s ease-in-out infinite;
}

p {
    line-height: 1.5em;}

header {
    background: var(--header-bg);
    background-size: 100%;
    background-position: center;
    max-width: 960px;
    min-height: 200px;
    margin: 0 auto;
    padding: 0 1em;
    border-radius: 1em;
    box-shadow: var(--button-color) 2px 2px 5px;
}

header h1 {
    padding: .5em;
    border-radius: .3em;
    max-width: 900px;
    font-size: 3em;
    text-align: right;
    color: var(--bg-color);
    text-shadow: var(--accent-color) 4px 4px .5em;
}


#content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    max-width: 960px;
    margin: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar-bio {
    grid-area: 1 / 1 / 3 / 2;
    background-image: var(--side-bg);
    background-repeat: repeat;
    image-rendering: auto;
    background-blend-mode: multiply;
    background-color: var(--bg-color2);
    min-width: 220px;
    max-width: 220px;
    max-height: 370px;
    margin: 1em;
    padding: 1em;
    border: 2px;
    box-shadow: var(--button-color) 2px 2px 5px;
    border-radius: 2em;
    overflow-x: hidden;
    overflow-y: auto;
}

#sidebar-bio p {
    margin: 1em;
    padding: 4px;
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
    text-shadow:
      0 .15ch 15px var(--bg-color2),;

}

#avatar {
    margin: .5em auto;
    max-width: 164px;
    max-height: 164px;
    border-radius: 8em;    
}
#avatar img {
    background: var(--bg-color2);
    border: 2px solid var(--button-color);
    max-width: 160px;
    border-radius: 8em;
}

#avatar:hover {
    transition: all 4s ease-in-out infinite;
    animation: avatar 4s ease-in-out infinite;
}

@keyframes avatar {
     0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#sidebar-navigation {
    grid-area: 3 / 1 / 4 / 2;
    background: var(--bg-color2);
    min-width: 220px;
    max-width: 220px;
    max-height: 370px;
    margin: 1em;
    padding: 1em;
    border: 2px;
    box-shadow: var(--button-color) 2px 2px 5px;
    border-radius: 2em;
    overflow-y: scroll;
}

#sub-selection img {
    background: var(--bg-color2);
    max-width: 20px;
}

#index-body {
    grid-area: 1 / 2 / 6 / 5;
    background-image: var(--main-bg);
    background-repeat: repeat;
    image-rendering: pixelated;
    background-color: var(--bg-color2);
    margin: 1em;
    padding: 1em;
    border: 2px;
    box-shadow: var(--button-color) 2px 2px 5px;
    border-radius: 2em;
    max-height: 600px;
    overflow:auto;
}

#index-body-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 360px 210px;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    padding: 15px;
}

#index-body-main {
    grid-area: 1 / 2 / 6 / 6;
}

.emoji-sweat {
    filter: none;
}

.pagedoll {
    grid-area: 1 / 1 / 1 / 1;
    max-width: 200px;
    transition: all 0.7s ease-in-out;
}

.pagedoll:hover {
    transition: all 0.7s ease-in-out;
    animation: pagedoll 0.7s ease-in-out;
}

@keyframes pagedoll {
     0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
    80% { transform: translateY(0px);}
}


#sidebar-sticker {
    filter: blur(0.5px);
    grid-area: 1 / 5 / 2 / 7;
    padding-top: 20px;
    padding-left: 20px;
    transition: all 0.3s ease-in-out;
    
}

#sidebar-sticker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
}


#sidebar-sticker:hover {
    transform: rotate(15deg);
    transition: all 0.3s ease-in-out;
    animation: sticker normal;
}