:root {
  --white: #fdf7ff;
  --black: #271928;
  --pink: #EB55AF;
  --teal: #42DA9D;
  --whiteoutline: drop-shadow(1px 1px 0 var(--white)) 
  drop-shadow(-1px 1px 0 var(--white)) 
  drop-shadow(0 2px 0 var(--white)) 
  drop-shadow(0 -1px 0 var(--white)) 
  drop-shadow(0 1px 1.5px var(--white)) 
  drop-shadow(0 -1px 1.5px var(--white)) 
  drop-shadow(1px -1px 1.5px var(--white)) 
  drop-shadow(-1px -1px 1.5px var(--white));  
  --inset: inset 0 7px 7px -5px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
}

/* ==== GLOBAL ==== */
html {
  background-color: var(--white);
  background-image: 
    radial-gradient(rgb(0, 0, 0, 0.2) 28.8%, transparent 28.8%),
    radial-gradient(rgb(0, 0, 0, 0.2) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 3px 3px;
  background-size: 6px 6px;
}

@font-face {
  font-family: narrow;
 src: url(https://cdn.jsdelivr.net/fontsource/fonts/lexend:vf@5.3.0/latin-wght-normal.woff2) format('woff2-variations');
}

body {
  font-family: narrow;
  margin-left: auto;
  margin-right: auto;
  text-align: center;


}

/* ==== WINDOW  ==== */
.window {
    border: 2px solid var(--black);
    padding: 5px;
    margin-top: 5px;
    position: relative;
    box-shadow: var(--inset);
    text-shadow: 0px 0px 4px rgba(0,0,0, .9);
    color: var(--white);
    border-radius: 5px;
}

.window:before {
    content:"X";
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid var(--black);
    border-top: none;
    border-right: none;
    border-radius: inherit;
    background: white;
    box-shadow: var(--inset);
    font-size: 15px;
    color: var(--black);text-shadow: 0px 0px 4px rgba(0,0,0, .4);
    width: 15px;
    text-align: center;
    padding: 2px;
    height: 17px;
}

.window.pink {
  background-image: 
    radial-gradient(rgb(119, 0, 63, 0.5) 28.8%, transparent 28.8%),
    radial-gradient(rgb(119, 0, 63, 0.5) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
  background-color: rgb(235, 85, 175);  
}

.window.teal {
    background-image: 
    radial-gradient(rgb(38, 116, 93, 0.6) 28.8%, transparent 28.8%),
    radial-gradient(rgb(38, 116, 93, 0.6) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
  background-color: rgb(66, 218, 157); 
}

  .window .inside {
      display: block;
      border: 2px solid var(--black);
      background: white;
      font-size: 12px;
      text-shadow: none;
      color: var(--black);
      padding: 5px;
      border-radius: inherit;
      margin-top: 5px;
      box-shadow: var(--inset);
  }


/* ==== BACKGROUNDS ==== */
.polka {
  background-image: 
    radial-gradient(#ff57bc50 30.4%, transparent 30.4%),
    radial-gradient(#ff57bc50 30.4%, transparent 30.4%),
    radial-gradient(#42DA9D50 30.4%, transparent 30.4%),
    radial-gradient(#42DA9D50 30.4%, transparent 30.4%);
  background-position: 0px 0px, 0px 0px, 0px 0px, 18px 22px;
  background-size: 40px 40px;
  background-color: var(--white);
}

.pinktone {
  background-image: 
    radial-gradient(rgb(119, 0, 63, 0.5) 28.8%, transparent 28.8%),
    radial-gradient(rgb(119, 0, 63, 0.5) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
  background-color: rgb(235, 85, 175);
}

.tealtone {
  background-image: 
    radial-gradient(rgb(38, 116, 93, 0.6) 28.8%, transparent 28.8%),
    radial-gradient(rgb(38, 116, 93, 0.6) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
  background-color: rgb(66, 218, 157);
}

  .halftone {
  background-image: 
    radial-gradient(rgb(0, 0, 0) 28.8%, transparent 28.8%),
    radial-gradient(rgb(0, 0, 0) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
}

/* ==== ANIMATIONS ==== */
@keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0);
            }
}

/* ==== HOLDIMG ==== */
.holdimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  border-radius: 10px;
  aspect-ratio: 4.5 / 1;
  overflow: hidden;
  background-image: url(https://imgh.in/host/3mkupi);
  background-size: 100%;
  position: relative;
  text-align: right;
  box-shadow: var(--inset);
  border: 5px solid var(--black);
}

.holdimg img {
  width: 100%;
  margin-top: -500px;
    animation: float 5s infinite;
  margin-left: 300px;
}

.holdimg img.chib {
    position: absolute;
    width: 25%;
    margin-top: 0px;
    margin-left: 0px;
    top: 0;
    right: 0;
    filter: var(--whiteoutline);
    animation: none;
}

img.chib:hover {
    animation: float 0.5s infinite;
}

.holdimg .info {
  position: relative;
  float: left;
  width: 25%;
  text-align: left;
aspect-ratio: 1 / 0.5;
  margin: 20px;
  -webkit-box-shadow: 0px 0px 0px 5px #000000; 
box-shadow: 0px 0px 0px 3px var(--black);

  background: var(--teal);
  padding: 10px;
  box-shadow: var(--inset), 0px 0px 0px 3px var(--black);
  padding-top: 45px;
  border-radius: 20px;

}

.holdimg .info span {
    display: inline-block;
    letter-spacing: -1px;
    transform: scaleY(2.5);
    font-weight: 300;
    text-shadow: 0px 0px 4px rgba(0,0,0, .4);
    overflow: auto;
    line-height: 13px;
    transition: 1s;
}

.holdimg .info:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 42px solid transparent;
	border-left-color: var(--teal);
	border-right: 0;
	border-bottom: 0;
	
	margin-top: -21px;
	margin-right: -42px;
}

.holdimg .info span:hover {
    transform: scaley(3.5);
    margin-top: 15px;
}

.holdimg .info:before {
    content:'* i hate msi, just a good song';
    position: absolute;
    bottom: 0;
    font-size: 10px;
    margin: 5px;
    right: 0;
}

/* ==== SITE NAME ==== */
sitename {
    display: inline-block;
    font-size: 50px;
    margin-top: -20px;
    margin-bottom: 5px;
position: relative;
z-index: 3;
    color: var(--pink);
    transition: 1s;
    transform: scaleX(1.25) scaleY(.8);
    
 filter: drop-shadow( 0 3px var(--black)) drop-shadow( 2px 0 var(--black)) drop-shadow( 0 -1px var(--black)) drop-shadow( -1px 0 var(--black)) drop-shadow( 0 5px white) drop-shadow( 5px 0 white) drop-shadow( 0 -5px white) drop-shadow( -5px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #424242);

 } 
 
 span.float {
     display: block;
       animation: float 3s ease-in-out infinite;
 }

sitename:hover {
    transform: scaleX(1.25) scaleY(1);
}

/* ==== BUTTONHOLD ==== */
  buttonhold {
      display: block;
      position: relative;
      margin-left: auto;
      box-shadow: var(--inset);
      background: white;
      margin-right: auto;
      border-radius: 10px;
      z-index: 1;
      border: 3px solid;
      width: 974px;
      aspect-ratio: 15 / 1;
      margin-top: -10px;
      padding: 10px;
  }
  
  
  buttonhold a {
      display: inline-block;
      width: calc(20% - 29px);
      border: 2px solid var(--black);
      aspect-ratio: 4 / 1;
      padding: 10px;
      font-size: 30px;
      box-shadow: var(--inset);
      border-radius: 20px;
      transition: .5s;
      text-decoration: none;
      color: var(--white);
      text-shadow: 0px 0px 4px rgba(0,0,0, 1);
  }
  
  flex {
      display: flex;
  }
  
  
  flex left, flex right, flex middle {
      display: block;
  }
  flex left, flex middle {
      margin-right: 5px;
  }
  
  buttonhold a:hover {
      filter: brightness(1.15);
      transform: translateY(-5px);
      box-shadow: var(--inset), 0px 5px 0px 0px rgba(0,0,0,0.3);
  }
  
  buttonhold a:active {
      filter: brightness(1);
      transform: translateY(-5px) scaleY(.95);
  }

/* ==== MAIN ==== */
     main {
         display: block;
         background: var(--white);
         width: calc(900px - 26px);
         border: 3px solid var(--black);
         border-top: none;
         margin-left: auto;
         border-radius: 0px 0px 10px 10px;
         box-shadow: var(--inset);
         margin-right: auto;
         padding: 10px;
         text-align: left;
     }
     
     flex.one left, flex.one right {
         width: calc(25% - 5px);
     }
     
     flex.one middle {
         width: 50%;
     }
     
     .about {
         background: white;
         border: 2px solid var(--black);
         padding: 5px;
         border-radius: 10px;
         font-size: 12px;
         box-shadow: var(--inset);
     }
     
     main mark {
         background: none;
         font-size: 1.2em;
     }
     
     main mark:nth-of-type(even) {
        color: var(--teal);
     }
     main mark:nth-of-type(odd) {
        color: var(--pink);
     }

/* ==== SITEMAP ==== */
     .sitemap {
         width: 92%;
         padding: 5px;
         border: 2px solid var(--black);
         border-radius: 5px;
         background: white;
         box-shadow: var(--inset);
         padding-top: 10px;chib
     }
     
     .sitemap a {
         display: inline-block;
         width: calc(75% - 14px);
         border: 2px solid var(--black);
         padding: 5px;
         margin-bottom: 8px;
         border-radius: inherit;
         box-shadow: var(--inset);
         color: var(--white);
         font-weight: 500;
         text-shadow: var(--black) 0px 0px 5px;
         transition: .5s;
     }
     
     .sitemap a:nth-of-type(odd) {
           background-image: 
    radial-gradient(rgb(119, 0, 63, 0.3) 28.8%, transparent 28.8%),
    radial-gradient(rgb(119, 0, 63, 0.3) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
  background-color: #fa9bd4;
 
     }
     
     .sitemap a:hover {
      transform: translateY(-5px) translateX(20px) scaleX(1.25);
      filter: brightness(1.15);
      box-shadow: var(--inset), 0px 5px 0px 0px rgba(0,0,0,0.3); 
     }
    
     
     .sitemap a:nth-of-type(even) {
           background-image: 
    radial-gradient(rgb(38, 116, 93, 0.3) 28.8%, transparent 28.8%),
    radial-gradient(rgb(38, 116, 93, 0.3) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
  background-color: #95f5ce;
 
     }
     
     .sitemap a:active {
      filter: brightness(1);
      transform: translateY(-5px) scaleY(.95);
  }

/* ==== CHIBI  ==== */
     .chibi {
         background: white;
         box-shadow: var(--inset);
         margin-top: 5px;
         aspect-ratio: 1 / 1;
         border: 2px solid var(--black);
         border-radius: 5px;
         overflow: auto;
     }
     
     .chibi img {
       width: 100%;
     }
     
     .chibi::-webkit-scrollbar {
    display: none;
}

.info span::-webkit-scrollbar {
    display: none;
}

.buttons flex left::-webkit-scrollbar, .buttons flex middle::-webkit-scrollbar, .buttons flex right::-webkit-scrollbar {
    display: none;
}

/* ==== BUTTONS BOX ==== */
     .buttons {
         display: block;
         padding: 5px;
         border: 2px solid var(--black);
         background: white;
         box-shadow: var(--inset);
         border-radius: 5px;
         margin-top: 5px;
     }
     
     .buttons:before {
         content:"buttons, blinkies and stamps, oh my!!";
         display: block;
         margin-bottom: 5px;
         border-radius: 5px 5px 0px 0px;
         background-image: 
    radial-gradient(rgb(119, 0, 63, 0.3) 28.8%, transparent 28.8%),
    radial-gradient(rgb(119, 0, 63, 0.3) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
  color: var(--white);
  padding: 5px;
  padding-left: 20px;
         font-weight: 500;
         text-shadow: var(--black) 0px 0px 5px;
  background-color: #fa9bd4;
     }
     
     .buttons flex middle, .buttons flex left, .buttons flex right {
         width: calc(35% - 5px);
         height: 200px;
         overflow: auto;
     }
     
     .buttons flex img {
         width: 100%; margin-bottom: 3px;
         transition: 1s;
        
     }
     
     .buttons flex left img:nth-of-type(even), .buttons flex right img:nth-of-type(even), .buttons flex middle img:nth-of-type(odd) {
         filter: sepia(1) hue-rotate(90deg) drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.9));

     }
     
     .buttons flex left img:nth-of-type(odd), .buttons flex right img:nth-of-type(odd), .buttons flex middle img:nth-of-type(even) {
         filter: sepia(1) hue-rotate(-80deg) drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.9));
     }
     
     .buttons flex left img:hover, .buttons flex middle img:hover, .buttons flex right img:hover {
         filter: none;
                   transform: scaley(1.15);
                   margin-bottom: 8px;
     }

/* ==== WEBRINGS ==== */
     .inside.webrings img, .inside.webrings div {
         width: 100%;
         margin-bottom: 3px;
     }

/* ==== LYRICS ==== */
     .lyrics {
         border: 2px solid var(--black);
         box-shadow: var(--inset);
         border-radius: 5px;
         padding: 5px;
         font-size: 0.8em;
         background: white;
         margin-top: 5px;
     }

/* ==== MISC LAYOUT ==== */
     flex.two, flex.three {
         margin-top: 5px;
     }
     
     .cbox {
         border: 2px solid var(--black);
         border-radius: 5px;
         padding: 2px;
         box-shadow: var(--inset);
     }
     
     flex.three left, flex.three middle, flex.three right {
         width: 33%;
     }
     
     .lyrics.mood {
  }

/* ==== UPDATE ==== */
     .inside.update {
         aspect-ratio: 1 / 1;
         overflow: auto;
         position: relative;
     }
     
     .inside.update span.uptitle {
         display: inline-block;
         font-size: 1.5em;
         position: sticky; 
         top: 0;
         border-radius: 5px 5px 0px 0px;
         padding: 5px;
         padding-left: 30px;
         width: calc(100% - 35px);
        background-image: 
    radial-gradient(rgb(119, 0, 63, 0.3) 28.8%, transparent 28.8%),
    radial-gradient(rgb(119, 0, 63, 0.3) 28.8%, transparent 28.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
  color: var(--white);
         font-weight: 500;
         text-shadow: var(--black) 0px 0px 5px;
  background-color: #fa9bd4;
  margin-bottom: 5px;

     }

/* ==== GUESTBOOK ==== */
       a.guest {
      display: inline-block;
      border: 2px solid var(--black);
      aspect-ratio: 8 / 1;
      padding: 10px;
      width: 60%;
      font-size: 1.2em;
      box-shadow: var(--inset);
      border-radius: 20px;
      margin: 10px;
      transition: .5s;
      text-decoration: none;
      margin-top: 15px;
      color: var(--black);
      text-shadow: 0px 0px 4px rgba(255,255,255, 1);
      animation: float 5s infinite;
  }
  
  a.guest:hover {
      filter: brightness(1.15);
      transform: translateY(-5px);
      box-shadow: var(--inset), 0px 5px 0px 0px rgba(0,0,0,0.3);
  }
  
  a.guest:active {
      filter: brightness(1);
      transform: translateY(-5px) scaleY(.95);
  }

/* ==== CRT / LOADING ==== */
  .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 20;
  background-size: 100% 2px, 3px, 100%;
  pointer-events: none;
}

.load {
 position: absolute;
 z-index: 19;
 background-color: var(--white);
 width: 100vw;
 bottom: -5px;
 left: 0;
 height: calc(100vh - 5px);
 background-image: url(https://myimgs.org/storage/images/34146/loading.gif);
 background-repeat: no-repeat;
 background-size: 10%;
 border-top: 5px solid var(--pink);
 background-position: 50% 50%;
  animation: close 1s ease-out forwards;
 animation-delay: 3.5s;
}

@keyframes close {
    0% {
        height: calc(100vh - 5px);
    }
    
    99% {
        height: 0vh;
    }
    100% {
        height: 0vh;
        display: none;
    }
}