HTML, CSS and JavaScript playground

/*Sidebar*/
.side {
  background: #ffffff;
  border: 0.1875em double black;
  max-height:18.75em;
  overflow:auto;
  width:9.6em;
  padding:0.625em 0.75em;
  margin-top:16em;
  position:fixed;
  text-align:center;
  }
  
.side img {
  margin: 0 auto;
  margin-left: -0.1875em; /*border pushes it to the right otherwise*/
  }

/*Prevent image overflow*/  
.main img, .side img {
  max-width: 100%;
  height: auto;
  }

#tab{
  padding:0.625em 0.75em;
  margin-top:11em;
  position:fixed;
  left: 0.5em;
  z-index:9999999999;}
#tab .sp{
    height:1.3em;
    width:12.7em;
    margin:-1.0625em 0 0 -0.625em;
    overflow:hidden;
    position:absolute; background:url(https://31.media.tumblr.com/89d0a73dbfd39d6e6dfcd157efacf73a/tumblr_inline_nc4ltugMJI1rh7826.png);
  }
#tab .nb{
    width:11em;
    margin-bottom:1.25em;
    padding:0.3125em 0.625em 0.3125em 0.625em;
background:url(https://31.media.tumblr.com/905e072082d7e170a96e198cf24af6d9/tumblr_inline_nc4ltqDhD21rh7826.png);
    border:0.0625em solid rgba(0,0,0,0.1);
    -webkit-border-bottom-right-radius: 0.375em;
    -webkit-border-bottom-left-radius: 0.375em;
    -moz-border-radius-bottomright: 0.375em;
    -moz-border-radius-bottomleft: 0.375em;
    border-bottom-right-radius: 0.375em;
    border-bottom-left-radius: 0.375em;z-index:999999;
    box-shadow:rgba(0,0,0,0.07)0.3125em 0.3125em;font-size:0.6875em;
    line-height:1.4em;
  }
   .image2 {
    margin-top:2em;
    margin-left:1.5em;
    position:fixed;
  }
.rotate {
  margin-top:0.2em;
  position:fixed;
  z-index: 999999;
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}
  @font-face {
font-family: wq;
src: url(https://dl.dropbox.com/s/xuj66ilv0kww996/wickedqueen-wyz34.ttf);
}
#slay {
font-family: wq;
font-size: 3em;
color: #fff;
background: -webkit-linear-gradient(-90deg, #C00900 0%, #000 100%);
-webkit-background-clip: text;
-webkit-text-stroke: 4px transparent;
position: fixed;
z-index: 99999;
top: 11.6em;
left: 0.4em;

/*For narrower screens.*/
@media(max-width:850px) {
  .container {
    width:43.75em;
  }
  .main {
    margin-left:10.9375em;
    }
  .side {
    width:6.25em;}
  #tab{
  padding:10px 12px;
  margin-top:14em;
  position:fixed;
  left: -0.3em;
  z-index:9999999999;}
#tab .sp{
    height:1.3em;
    width:11.5em;
    margin:-17px 0 0 -10px;
    overflow:hidden;
    position:absolute; background:url(https://31.media.tumblr.com/89d0a73dbfd39d6e6dfcd157efacf73a/tumblr_inline_nc4ltugMJI1rh7826.png);
  }
#tab .nb{
    width:9.6em;
    margin-bottom:20px;
    padding:5px 10px 5px 10px;
background:url(https://31.media.tumblr.com/905e072082d7e170a96e198cf24af6d9/tumblr_inline_nc4ltqDhD21rh7826.png);
    border:1px solid rgba(0,0,0,0.1);
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;z-index:999999;
    box-shadow:rgba(0,0,0,0.07)5px 5px;font-size:0.7em;
    line-height:13px;
  }
  }
 
</style>
<img src="https://cdn.discordapp.com/attachments/783812437702475776/994009305172942898/Untitled1397_20220705163800.png" class="rotate" width="17%"/>
<img src="https://cdn.discordapp.com/attachments/783812437702475776/994004517731442781/Untitled1396_20220705161855.png" class="image2" width="12%"/>
<div id="tab">
<div class="nb"><div class="sp"></div>
welcome, internet traveler, to the WORST place on the world wide web! we hope you HATE your stay!</div>
</div>
<div class="main">text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here </div>
<div id="slay">MENU</div>
<div class="side">HOME</br>
ABOUT ME</br>BLOG</br>FAV SITES</br>RESOURCES</br>STICKERS</br>SHRINES</br>FUN STUFF</br><img src="https://cdn.discordapp.com/attachments/783812437702475776/994012659701776524/117548d6.gif" width="30%"/>

Check out our Python playground!