:root {
  --darkest: #6b2136;
  --lightpinkgrad: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 217, 224, 1) 50%, rgba(242, 184, 196, 1) 52%, rgba(250, 207, 214, 1) 70%, rgba(255, 230, 240, 1) 96%, rgba(255, 255, 255, 1) 99%);
 --lightyellowgrad: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 239, 217, 1) 50%, rgba(242, 212, 184, 1) 52%, rgba(250, 230, 207, 1) 70%, rgba(255, 242, 230, 1) 96%, rgba(255, 255, 255, 1) 99%);
 --lightpurpgrad: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(246, 217, 255, 1) 50%, rgba(218, 184, 242, 1) 52%, rgba(233, 207, 250, 1) 70%, rgba(250, 230, 255, 1) 96%, rgba(255, 255, 255, 1) 99%);
}

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

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

html {
  background: url(https://i.pinimg.com/originals/f9/a1/1e/f9a11ebe687afb1849693994548747b0.gif);
  background-size: 20%;
  cursor: url(https://cur.cursors-4u.net/games/gam-12/gam1113.cur), auto !important;
}
body {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid var(--darkest);
  background: url(https://i.pinimg.com/1200x/4c/9d/5d/4c9d5d9ce5b9911bee1abd3a521b6cda.jpg);
  margin-top: 30px;
  font-family: mali;
  color: var(--darkest);
  padding: 5px;
  border-radius: 10px;
}

.blinkieholder {
  border: 1.5px solid var(--darkest);
  border-radius: 5px 5px 0px 0px;
  padding: 2px;
  height: 22px;
  margin-bottom: 10px;
}

.blinkieholder marquee {
  height: 20px;
}

.blinkieholder:hover {
  animation-play-state: paused;
}

.flex {
display: flex;
width: 100%;

}

.left1 {
border: 1px solid var(--darkest);
width: 20%;
height: 400px;
margin-right: 10px;
text-align: center;
overflow: hidden;

}


#smallerflex .left1, #smallerflex .right1 {
width: 60%;
border: 1.5px solid var(--darkest);
margin-right: 5px;
padding: 3px;
background: var(--lightpinkgrad);
font-size: .8em;
  text-align: left;

}

#smallerflex .right1 {
width: 40%;
margin-right: 0px;
border: none;
background: none;
padding: 0px;

}

.quizzes {
  width: 97%;
background: white;
border: 1.5px solid var(--darkest);
padding: 2px;
height: 240px;
overflow: auto;
text-align: center;
margin-bottom: 5px;
font-size: .5em;
}

.right2{
background: var(--lightyellowgrad);
padding: 7px;
width: 93.5%;
border: 1.5px solid var(--darkest);

}

.right2 .inside {
  border-width:7px;
border-style:solid;
border-image: url("https://file.garden/ZXJkOcYwORXn2d9V/IMG_2697.png") 8 fill round;
background: white;


}

.quizzes img {
filter: sepia(1) hue-rotate(-120deg);
transition: .2s filter;
width: 100%;

}

.quizzes img:hover {
filter: none;

}

#smallerflex #inside {
  background: white;
  height: 390px;
  width: 98%;
  margin-right: none;
  font-size: 0.9em;
  text-align: center;
overflow: auto;
}

.left1 .pfp {
border-radius: 50%;
border: 1px solid var(--darkest);
width:100px;
margin-top: 5px;

}

.left1 mark {
  font-family: wobbly;
  color: #ffadc2;
  background: none;
  text-decoration: underline;
}


.marquee, .marqueeb {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  border-radius: 22px;
  background: white;
  white-space: nowrap;
}

.marquee--inner, .marquee--innerb {
  display: block;
  width: 208%;
  position: absolute;
  animation: marquee 5s linear infinite;
}

.marquee--innerb {
animation: marqueeb 5s linear infinite;
width: 200%;

}
  
 .marquee--inner:hover, .marquee--innerb:hover {
    animation-play-state: paused;
  }


.marquee span, .marqueeb span {
  float: left;
  width: 50%;
  overflow: hidden;
}

@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -104%;
  }
}

@keyframes marqueeb {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}


.lyrics {
border-width:7px;
border-style:solid;
border-image: url("https://file.garden/ZXJkOcYwORXn2d9V/IMG_2697.png") 8 fill round;
background: rgb(250, 233, 255);
text-align: center;
transition: .5s letter-spacing;

}

.lyrics:hover {

  letter-spacing: 2px;
}

.galimage {
width: 160px;
animation: float 3s ease-in-out infinite;

}

@keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(5px);
            }

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

        #inside mark {
background: var(--lightpurpgrad);
color: var(--darkest);
text-decoration: none;
font-family: mali;

        }

        ul.a { border: 1px solid var(--darkest); margin-top: 15px; list-style-position: inside; list-style: none; margin: 0px; padding: 0; width: 90%; border-radius: 5px; margin-left: auto; text-align: left;
        margin-right: auto;}
ul.a li:first-of-type {
border-radius: 5px 5px 0px 0px;
}
ul.a li { border-bottom: 1px solid var(--darkest); padding: 2px; transition: .3s letter-spacing;}
ul.a li:hover {
letter-spacing: 3px;
}
ul.a li:last-of-type {
border-bottom: none; border-radius: 0px 0px 5px 5px;}

ul.a li:nth-child(3n+2) {
background: var(--lightyellowgrad);
}
ul.a li:nth-child(3n + 1){
background: var(--lightpinkgrad);
}
ul.a li:nth-child(3n +3) {
background: var(--lightpurpgrad);

}

ul.a li a:active {
color: rgb(184, 116, 139);

}

ul.a li a {
color: var(--darkest);
text-decoration: none;

}

.discord {
display: none;
}


ul.a li:last-child:hover .discord {
display: block;
letter-spacing: 0px;
font-size: .8em;

}

.leftimg {
background: pink;
width: 96%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
height: 100px;
border: 1px solid var(--darkest);
filter: sepia(1) hue-rotate(-5deg);


}

.lyricsbottom {
border: 1.5px solid var(--darkest);
border-radius: 0px 0px 5px 5px;
margin-top: 10px;
padding: 2px;
color: rgb(245, 157, 172);

}


#ongaku {
position: absolute;
margin: auto;
width:35px;
height:35px;
z-index:9999;
border:4px double #ccc; /*Border Colour*/
background-color:#ffffff; /*Music Tab Background Colour*/
border-radius:50px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
 
#gaku {
width:24px;
height:24px;
margin-top:3px;
margin-left:3px;
overflow:hidden;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
 
#kero {
height:26px;
}
 
#kero img {
margin-right:10px;
margin-left:3px;
margin-top:3px;
}
 
#kero embed {
margin-top:-5px;
}
 
#kero embed, #kero {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
 
#ongaku:hover {
 
width:80px;
}
 
#ongaku:hover #gaku {
width:74px;
}
 
#ongaku:hover #kero {
margin-left:-50px;
}
 
.playy, .pausee {
margin-left:7px;
margin-top:4px;
position:relative;
left:20px;
font-size:15px;
color:#FFF; /* play & pause buttons color */
cursor:pointer;
text-shadow: -1px 0 #2e2e2e, 0 1px #2e2e2e, 1px 0 #2e2e2e, 0 -1px #2e2e2e;
 
}
 
.pausee {display:none;}

.home {
  color: pink;
  font-size: .7em;
}