body{
  background-image: 
    radial-gradient(#fef1f7 25%, transparent 25%),
    radial-gradient(#fef1f7 25%, transparent 25%);
  background-position: 0px 0px, 30px 30px;
  background-size: 60px 60px;
  background-color: white;
  overflow-x:hidden;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color:#ffe1f0;
border:1px solid #ffc7e4;
border-radius:20px;
}
::-webkit-scrollbar {
width: 15px;
height: auto;
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
height: 15px;
display: block;
background:#ffeaf5;
border:1px solid #ffd0e8;
border-radius:20px;
}
::-webkit-scrollbar-track-piece {
background-color:white;
border-radius:20px;
}
 @font-face {
font-family: hellokitty;
src: url(https://dl.dropbox.com/s/l5kzvuqppwfxa9z/hellokittyfont.ttf);
}
#stats{
 width:200px;
 transform:rotate(-5deg);
 height:200px;
 position:relative;
 background-image:url(https://i.pinimg.com/564x/74/c0/95/74c0955aa518c2b45044202333fe8563.jpg);
 background-size:100%;
 padding:25px;
 font-family:magica;
 font-size:14px;
}
hr{
 border:1px dashed #f9c;
}
#hajime{
 position:absolute;
 right:-350px;
 bottom:-100px;
 z-index:500;
}
#hajime img{
 width:55%;
}
::selection {
  /* Change highlight background color to black */
 color: #f99ecd;
}
#back{
 font-size:25px;
 color:#f9c;
 text-align:left;
 width:400px;
 text-decoration:none;
 font-family:hellokitty;
}
#back:hover{
 font-style:italic;
 text-decoration: underline dotted;
}
 #musicplayer{
display:grid;
grid-template-columns:20px auto;
align-items:center;
width: 80.5%;
font-size:20px;
line-height:140%;
background-color:white;
height: 2em;
border:1px solid #ffdbed;
border-radius: 10px;
padding: 0.125em;
 
}
 
#musictitle{
overflow: hidden;
white-space: nowrap;
display:inline-block;
width: calc(100% - 10px - 1px);
margin-left: calc(15px + 1px);
}
#musictitle span, .playpause{
color:#ffdbed;
font-family:chick;
}
 
#musicpixel{
width:170%;
position:relative;
min-height: 20px;
}
 
 
.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;
}
 
#musicplayer:hover .overlay {
opacity: 1;
transition:0.3s ease;
}
 
.playpause{
position: absolute;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
width:170%;
color:#ffdbed;
}
 
.playpause:hover{
cursor:help;
}
 
#musicpixel img{
display:block;
width:130%;
}
.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
font-size:20px;
color:#ffdbed;
font-weight:bold;
}
@keyframes marquee{
0% {
    transform: translate(0, 0);
}
100% {
    transform: translate(-100%, 0);
}
}
#rightside{
  width:300px;
}
#mags{
 height:265px;
 background-color:white;
 padding:0;
 float:left;
 width:130px;
 margin-top:0px;
 position:relative;
}
#mags img{
 width:100%;
}
#myfavs, #statitle{
  text-style:italic;
 font-size:30px;
 text-align:center;
position:absolute;
 color:#f9c;
 font-weight:normal;
 left:0px;
 top:-30px;
 font-family:hellokitty;
}
#funny{
 background-image:url(https://files.catbox.moe/oa9zwe.png);
 float:left;
left:170px;
 width:300px;
 z-index:50;
 height:295px;
bottom:20px;
 position:absolute;
 background-size:100%;
}
#fact{
 font-family:magica;
 width:200px;
 padding-left:30px;
 padding-right:30px;
 max-height:60px;
 padding-top:130px;
 margin-left:10px;
 height:60px;
 text-align:center;
 color:#493d2f;
}
#show-fact{
 font-family:magica;
 color:white;
 background-color:#f9c;
 border:none;
 margin-top:0;
 font-size:20px;
 font-weight:bold;
 border-radius:15px;
 padding:10px;
}
#profile h1{
 text-style:italic;
 font-size:20px;
 text-align:center;
 margin:0 auto;
 margin-top:-4px;
 color:#f9c;
 font-weight:normal;
 font-family:hellokitty;
}
#profile{
 height:5px;
 background:#ffebf5;
 border-left:1px solid rgb(255, 192, 223);
 border-right:1px solid rgb(255, 192, 223);
 border-top:1px solid rgb(255, 192, 223);
width:300px;
 padding:15px;
  border-top-left-radius:15px;
  border-top-right-radius:15px;
}
#id{
 width:300px;
 background-color:white;
  position:relative;
 padding:15px;
 height:120px;
 border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
border-left:1px solid rgb(255, 192, 223);
 border-right:1px solid rgb(255, 192, 223);
 border-bottom:1px solid rgb(255, 192, 223);
}
#id p{
 font-family:magica;
 float:left;
 padding:5px;
 color:gray;
 margin-top:0px;
 line-height: 20px;
}
#id b{
    color:rgb(255, 192, 223);
  font-size:15px;
}
#container{
  width:800px;
  padding:5px;
  margin: 0 auto;
  position:relative;
  height:600px;
  max-width:800px;
}
  @font-face {
font-family: chick;
src: url(https://dl.dropbox.com/s/wrt1sab5vv6r25n/CHICK___.TTF);
}
.name text{
  margin:auto;
}
#noteback{
  transform: rotate(-5deg);
  z-index:1;
    width:409px;
  position: absolute;
background-image: url(https://i.pinimg.com/564x/a4/d8/55/a4d8558b2f753fc1c00d50c8a78a9d4c.jpg);
background-size:100%;
top:5px;
left:-12px;
  height:222.5px;
}
.name{
  width:110px;
  margin:auto;
  color:#f9c;
  font-family: chick;
  height:30px;
  padding:5px;
                  background-color:#ffe6f2;
                border:1px solid #f9c;
box-shadow: 1px 0.5px 5px #f9c; 
position: absolute;
z-index:10;
border-radius: 4px;
}
.favs b{
   color:rgb(255, 192, 223);
  font-size:15px;
}
#aboutme{
  position: relative;
  margin-top:25px;
}
  @font-face {
font-family: magica;
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}
  .shadow {
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 2px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(0 1px 0px white) drop-shadow(0 -1px 0px white) drop-shadow(1px -1px 0px white) drop-shadow(-1px -1px 0px white);
  }
.favs {
border-width:7px;
line-height: 20px;
padding-top:3px;
position: relative;
width:215px;
 z-index:100;
 margin-left:-30px;
color:rgb(78, 70, 66);
height:140px;
 position:Relative;
border-style:solid;
border-image: 
url("https://scemoboy.carrd.co/assets/images/gallery09/6eb57a69.png?v=2767be4d") 7 fill round;
}
.favs ::-webkit-scrollbar{
 z-index:500;
}
.info{
border-style:solid;
width:180px;
height:105px;
 z-index:500;
font-size:15px;
overflow:auto;
padding:10px;
font-family: magica;
border-width:7px; 
border-image: url("https://scemoboy.carrd.co/assets/images/gallery09/4ad87d85.png?v=2767be4d") 7 fill round;
}
#aboutnote{
  width:309px;
  position: relative;
  padding:55px;
  height:172.5px;
  z-index:2;
  background-image: url(https://i.pinimg.com/564x/19/5e/6e/195e6e2b3000bd0a518e1280973c677f.jpg);
  background-size: 100%;
  transform: rotate(5deg);
}
#aboutnote p{
  font-size:14px;
  margin-top:40px;
  overflow:auto;
  height:120px;
  font-family:magica;
}
#crumbs{
  position: relative;
  z-index:9;
  margin-left:-50px;
}
            #flex {
                display: flex;
                             margin-top:90px;
                             margin-left:-50px;
            }
               @media only screen and (max-width: 700px) {
                #flex {
                    flex-wrap: wrap;
                }
                #aboutme{
                  order:1;
                }
#crumbs{
  order:2;
}
   #rightside{
   order:3;
                 }
               }