main {
  width: 650px;
  margin: auto;
}

#boximg {
 border: 2px solid black;
  width: 300px;
  height: auto;
  padding: 0px;
  float: left;
  img {
  width: 100%;
  }
}

#main {
 width: 300px;
 height: 477px;
  border: 2px solid black;
  position: relative;
  float: right;
}

audio {
  filter: contrast(1.3) invert(100);
  background: white;
  border: 1px solid black;
  border-radius: 6px !important;
  height: 50px;
  width: 250px;
}

#textbox {
 width: 300px;
 height: 290px;
  border-radius: 5px;
  overflow: auto;
    -webkit-mask-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  text-align: center;
}

#textbox::-webkit-scrollbar {
 display: none; 
}


body {
 background: black; 
}

.text-container {
 background: black; 
}

#extend:hover {
  height: 200px;
  overflow: scroll;
  transition: 1s ease;
}

#float {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  	display: flex;
    justify-content: center;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 8px); }
    100%   { transform: translate(0, -0px); }    
}

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

*, a {
 font-family: chalk;
  color: white;
  font-weight: normal !important;
}

.button, .button:hover {
  background: none;
  color: white;
}

#e {
background: rgba(148, 148, 148, 0.45);
}

b {
  font-weight: bold !important;
}

.site-footer, .paste-info, #theme-toggle {
  display: none;
}

header.site-header { 
display: flex;
justify-content: center;
}

    @media screen and (max-width: 500px) {
 main {
   width: 355px;
      }
      #imgbox {
        margin-bottom: 5px;
      }
      
      #main {
        margin-top: 5px;
      }
}