@font-face {
  font-family: 'Quicklove';
  src: url('https://files.catbox.moe/ftsl9a.ttf');
}

@font-face {
  font-family: 'Gaegu';
  src: url('https://file.garden/aBmRn5dbGjS8LzBr/Gaegu-Regular.ttf');
}

@font-face {
  font-family: 'Lunadaisy';
  src: url('https://file.garden/aBmRn5dbGjS8LzBr/cursive.ttf');
}

@font-face {
  font-family: 'Girlystuff';
  src: url('https://file.garden/aBmRn5dbGjS8LzBr/girlystuff.ttf');
}

@font-face {
  font-family: "pen-letters";
  src: url('https://file.garden/aBmRn5dbGjS8LzBr/mikiyu-newpenji-p.ttf');
}

@font-face {
  font-family: "Slackey";
  src: url('https://file.garden/aBmRn5dbGjS8LzBr/Slackey-Regular.ttf');
}

@font-face {
  font-family: "Schoolbell";
  src: url('https://file.garden/aBmRn5dbGjS8LzBr/Schoolbell-Regular.ttf');
}


#flex {
  display: flex;
}

.center {
  text-align: center;
}

.floatright {
  float: right;
}
      
.floatleft {
  float: left;
}

* {
  box-sizing: border-box;
}
        
.pixelated {
  image-rendering:pixelated;
}

html {
  scrollbar-color: #ffc2d2 white ;
}

body {
  font-family: 'Gaegu', Verdana;
  color: black;
  font-size: 1em;
}

h1  {
  font-size: 1.4em;
  margin: 0 0 8px 0;
  overflow: hidden;
}

h2, h3, h4, h5, h6 {
  font-size: 1.2em;
  margin: 0 0 8px 0;
  overflow: hidden;
}

p {
  margin: 6px 0;
}
      
a {
  color: black;
}

ul {
  margin: 6px 0;
}

button, input[type=button], input[type=submit] {
  padding: 4px;
  cursor: pointer;
  margin: 5px 0;
}

.quicklove {
  font-family: 'Quicklove', 'Verdana';
}

.cursive {
  font-family: 'Lunadaisy', 'Verdana';
}

hr {
  border-top: 1px dashed black;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  margin: 16px 0;
}

figure {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

figcaption {
  margin: 4px 0;
}

.pagedoll {
  z-index: 1;
  position: fixed;
  bottom: 2px;
  right: 2px;
}

.filter {
  display: none;
}

.show {
  display: block;
}

.up a {
  z-index: 2;
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: 1.5em;
  background: black;
  color: white !important;
  padding: 6px;
  border-radius: 100%;
}

.mark {
  background: #eee;
  border-left: 2px solid black;
  padding: 4px 6px;
  margin: 10px 0;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }
  
  .floatright, .floatleft {
    float: none;
  }

  .pagedoll {
    display: none;
  }
  
  aside {
    width: 100% !important;
    flex-shrink: 1;
  }
  
  .hidden-sm-screen {
    display: none !important;
  }
}