*{
  box-sizing: border-box;
}
body{
  background: url('https://bettysgraphics.neocities.org/images/backgrounds/pattern%20575.gif');
}
.container{
  max-width: 850px;
  position:relative;
  margin: 0 auto;
} 
#flex{
  display:flex;
}
main{
  flex: 1;
  padding: 12px;
  border-width: 6px;
  border-style: solid;
  border-image: url("https://64.media.tumblr.com/0bf9b5b1bc56ef2bd4a443aeec3dab08/e7a46821cfe7af87-12/s250x400/d314d89c3d9fb927d552b57cf19abec1d0b29c13.png") 8 fill round;
  position: relative;
  color: white;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset 0 0 0 1px #fffa;
}

.header {
  margin: 15px;
  font-size: 45px;
  font-family: "starborn";
  font-weight: bold;
  color: rgb(139, 184, 221);
  text-align: center;
  text-shadow: -1px 1px 0 white, 1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
  filter: drop-shadow(0px 0px 10px #b5e4ffa1) drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.534));
}
#introduction{
  max-width: 750px;
  display:flex;
  margin: 0 auto;
  padding-bottom: 25px;
  margin-top: -30px;
  
}

#introduction p{
  text-align: left;
  position: a;
  color: #000000;
  font-family: 'wiindows';
  line-height: 0.87;
}
#interests{
  background-color: #ffffff;
  background-image: url('https://64.media.tumblr.com/b9ef774215defe34fa1eadae852cc6d2/a85fe60ddff75350-24/s250x400/b64d5dd5df20a885a15cf9316b3345d17304340d.png'),radial-gradient(circle, rgba(255, 255, 255, 0.73) 0%, rgba(248, 251, 254, 0.76) 38%, rgba(242, 248, 255, 0.74) 60%, rgba(221, 233, 255, 0.71) 81%);
  border-width: 4px;
  border-style: solid;
  border-image: url("https://file.garden/ZZ2PUl9MPilKgIvB/collection/borders/xnxzti-1.png") 8 fill round; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 5px;
  display:flex;
  max-height: 400px;
  overflow: auto;
}
#interests{
  margin: auto!important;
  top: 15px;
  max-width: 50%;
  display: block;
  justify-content: center;
  position: relative;
  padding-right: 10px;
  float:left;
  left: 50px;
}
#interests a{
  text-decoration: underline wavy;
  color: rgb(115, 187, 255);
}
#interests a:hover{
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-shadow: -1px 0 SkyBlue, 0 1px SkyBlue, 1px 0 SkyBlue, 0 -1px SkyBlue;
}
#interests ul{
  margin-left: 10px;
}
li{
  list-style-image: url('https://pixelsafari.neocities.org/favicon/food/rice10.gif');
  margin-left: -10px;
  font-family: 'wiindows'
}
#interests h1{
  color:#7ca5d3;
  text-decoration: double underline;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.144);

}
#interests h1::before{
  content: url('https://keiism.nekoweb.org/logs/blog/blog%20images/leftwing.webp');
  padding: 5px;

}
#interests h1::after{
  content: url('https://keiism.nekoweb.org/logs/blog/blog%20images/rightwing.webp');
  padding: 5px;
}
h1{
  font-size: 20px;
  font-family:'wiindows';
}
#interests hr{
    border: 0;
    border-bottom: 1px dashed #d1e3ff;
    background: rgb(94, 163, 202);
    width: 50%;
}
#tv-books,
#games,
#music,
#food{
  max-width: 360px;
  padding-bottom: 10px;
}
#online{
  position: relative;
  z-index: 999;
  margin-left: 125px;
  top: 14px;
  margin-top: 18px;
}
.smolbadges{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 70%;
  justify-content: center;
  top:  174px;
  left: 204px;
  position: absolute;
  z-index: 99;
}
.smolbadges img:hover{
  z-index: 10;
  scale:1.1;
  image-rendering: optimizeQuality;
}
#personal-wrapper{
  max-width: 1200px !important;
  margin: auto;
}
#kinlist{
  background-color: #ffffff;
  background-image: url('https://64.media.tumblr.com/b9ef774215defe34fa1eadae852cc6d2/a85fe60ddff75350-24/s250x400/b64d5dd5df20a885a15cf9316b3345d17304340d.png'),radial-gradient(circle, rgba(255, 255, 255, 0.73) 0%, rgba(248, 251, 254, 0.76) 38%, rgba(242, 248, 255, 0.74) 60%, rgba(221, 233, 255, 0.71) 81%);
  border-width: 2px;
  border-style: solid;
  border-image: url("https://file.garden/ZZ2PUl9MPilKgIvB/collection/borders/xnxzti-1.png") 8 fill round; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 5px;
}
#kinlist{
  margin: auto!important;
  top: 15px;
  left: 65px;
  justify-content: center;
  position: relative;
  padding-right: 10px;
  padding-left: 10px;
  float: left;
  max-width: 343px;
  max-height: 400px;
  overflow-y: scroll;
}
.kinimgs{
  margin-top: 5px;
  display: inline-block;
}
.kinimgs img{
  max-width: 150px;
  max-height: 150px;
  border: 1px  solid rgb(0, 0, 0);
  position: relative;
  object-fit: cover;
}
.kinimgs img:hover{
  z-index: 10;
  scale: 1.05;
  image-rendering: optimizeQuality;
  filter: drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 10px white);
}
.likeme{
  margin-left: 720px;
  margin-top: -3px;
  rotate: -5deg;
  position: absolute; 
  z-index: 99;
  font-family: 'starborn';
  color: rgb(0, 0, 0);
}
.smaller-boxes-container{
  display: grid;
  grid-template-columns: 100%;
  width:auto;
  float:left;
  display:flex;
  margin-bottom: 50px;
  
}
.boxes-containers {
  background:white;
  border-width: 6px;
  border-style: solid;
  border-image: url("https://64.media.tumblr.com/0bf9b5b1bc56ef2bd4a443aeec3dab08/e7a46821cfe7af87-12/s250x400/d314d89c3d9fb927d552b57cf19abec1d0b29c13.png") 8 fill round;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family:"discipline_notes";
  width: 755px;
  position: relative;
  margin: auto!important;
  top: 30px;
  left: 50px;
}
.oshilist{
  margin: auto 0 !important;
  justify-content: center;
  position: relative;
  
}
.oshilist p{
  text-align: center;
  position: relative;
  color: rgb(17, 69, 110);
  padding-left: 15px;
  font-family: 'discipline_notes';
}
.oshiimgs{
  margin-top: 5px;
  display: flexbox;
  margin: 10px;
  align-items: center;
  justify-content: center;
  width: 700px;
  left: 40px;
  position: relative;

}
.oshiimgs img{
  max-width: 150px;
  max-height: 150px;
  border: 1px  solid rgb(0, 0, 0);
  position: relative;
  object-fit: cover;
  margin-right: 3px;
}
#tests {
  position: relative;
  text-align: center;
  z-index: 1009;
  margin-bottom: 20px;
}
#tests h1{
  font-family: 'les_flos_chaos';
  font-size: 1.5rem;
  color: rgb(116, 148, 197); 
  text-shadow: 2px 2px 0px #c1d7ff;
  text-transform: uppercase;
}
#tests h1::after{
  content: url('https://artwork.neocities.org/pixels/tiny/8OlFPP8.gif');
  margin-left: 5px;
}
#importantiframe{
  width: fit-content; 
  height: fit-content;
  border:none;
  margin-left: 10px;
  z-index: 3;
  height: 250px;
  width: 410px;
}
.teststyle {
  background: linear-gradient(to bottom, 
    #c5d9ff 0%, 
    #8fa7cc 55%,
    #6095d3 55%, 
    #283e7a 100%
);
  border: 1px solid #949494;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px #fffc;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  min-height: 26px;
  width: 135px;
  padding: 0 12px;
  position: relative;
  text-align: center;
  z-index: 0;
  align-content: center;
}

.teststyle a {
  font-weight: normal !important;
  color: rgb(0, 0, 0);
  font-family: 'wiindows';
  text-decoration: none;
}

.teststyle a:hover {
  color: #5987ac !important;
}

.teststyle:hover {
  background: linear-gradient(#eaf6fd 45%, #becafd 0, #a7b9f5);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px #fffc;
  transition: opacity 1s linear;
}

.teststyle:active {
  transition: opacity .3s;
  background: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db);
  border-radius: 7px;
  box-shadow: inset 1px 1px 0 #0003, inset -1px 1px 0 #0001;
}
.pet{
  position: absolute;
  z-index: 99;
  background: white;
  left: -290px;
  top: 340px;
  border-width: 6px;
  border-style: solid;
  border-image: url("https://64.media.tumblr.com/91839efccb4451d91e1794c1ab58a6b4/e7a46821cfe7af87-0a/s250x400/e70d1a1cb07ec1edba271b5137a67dbad74338d8.png") 8 fill round;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#musicplayer{
  position: absolute;
  z-index: 99;
  display:block;
  max-width: 55%;
  left: 790px;
  top: 310px;
  rotate: -4deg;
  pointer-events: none;
}
#chosenvideo{
  position: absolute;
  left: 895px;
  bottom: -422px;
  rotate: -4deg;
}
lastfm-tracks {
  box-sizing: border-box;
  width: 272px;
  height: 160px;
  position: absolute;
  left: 877px;
  bottom: -210px;
  rotate: -4deg;
}
.stickers{
  position: absolute;
  pointer-events: none;

}

  .animated-rainbow{
  background: linear-gradient(to left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
  animation: rainbow-move-left-right 5s linear infinite alternate;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
  @keyframes rainbow-move-left-right{
    0% {background-position: 0 0    }
    100% {background-position: -500px 0}
}
/* Scrollbar styles */
	::-webkit-scrollbar {
		width: 12px;
		height: 12px;
		background: #f1f6fc;
		}
	::-webkit-scrollbar-track {
		background: #f1f6fc;
		border-radius: 0px;
		width: 0px;
		border: 1px dotted #779ebe;
		}
	::-webkit-scrollbar-thumb {
		background: #d0e7f0;
		border: 1px dotted #778abe;
		border-radius: 0px;
		}