::-webkit-scrollbar {
  width: 8px;
    border:solid #E2D1FF 1px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px pink; 
  border-radius: 8px;
  border:solid #E2D1FF 1px;
}
 
::-webkit-scrollbar-thumb {
  background-image: linear-gradient(#AF69FF, #E2D1FF);
  border-radius: 8px;
  border:solid #8D0EE6 1px;
}

::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(#E2D1FF, #8D0EE6);
}

body {
      background-image: url("/starrybg_light.gif");
      background-size: cover;
      background-attachment: fixed;
      text-align: center;
      font-family: "Comic Sans MS", "Comic Sans";
      font-size: 15px;
      color: #8b11e0;
}

.main {
      display:table;
      margin-top:20px !important;
      width: 710px;
      height: 890px;
      margin: auto;
      border: 5px solid MediumPurple;
      background-image: url("/purplestripebackground.jpg");
      border-radius: 5px;
      border-image: url("/cloudborder.png") 4 round;
      
}

.banner {
      border: 5px double MediumPurple;
      border-radius: 10px;
      width: 700px;
      height: 150px;
      margin: auto;
      background-color:#e0d2f1
}

.box1 {
    width: 195px;
    height: 250px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: left;
    background-image: url("/BETTERcheckerboard.png");
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: auto; 
}
    
    .box2 {
    width: 310px;
    height: 250px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: left;
    background-image:url("/BETTERcheckerboard.png");
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: auto
    }
    
    .box3 {
    width: 165px;
    height: 250px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: right;
    background-image:url("/BETTERcheckerboard.png");
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    overflow: auto
    }
    
    .stampdivider {
      width: 700px;
    height: 57px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    background-image:url("/BETTERcheckerboard.png");
    margin-top: 10px;
    overflow: hidden
    }
    
    .column {
    width: 255px;
    height: 127px;
    margin: auto;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: auto
    }
    
    .big1 {
    width: 255px;
    height: 255px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: left;
    background-image:url("/BETTERcheckerboard.png");
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: auto
    }
    
    .bigmiddle {
    width: 150px;
    height: 255px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float:left;
    background-image:url("/BETTERcheckerboard.png");
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: auto
    }
    
    .big2 {
    width: 255px;
    height: 255px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: right;
    background-image:url("/BETTERcheckerboard.png");
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    overflow: auto
    }
    
    .blinkiedivider {
      width: 700px;
    height: 20px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    background-image:url("/BETTERcheckerboard.png");
    margin-top: 10px;
    overflow: hidden
    }
    
    .footer {
      width: 700px;
    height: 20px;
    border: 5px double MediumPurple;
    border-radius: 15px;
    margin: auto;
    background-image:url("/BETTERcheckerboard.png");
    margin-top: 10px;
    overflow: hidden
    }
    
.heading {
    border: 1px solid MediumPurple;
    background: linear-gradient(#AF69FF , #DAC6F7 40%, #AF69FF); 
    color: #FFFFFF;
    text-shadow: 2px 2px 3px #8D0EE6;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    flex-shrink: 0;
}

@font-face {
  font-family: 'Comic Sans MS';
  src: url("/comic-sans-ms/ComicSansMS3.ttf");
}

.button {
  text-align: center;
  width: 163px;
  height: 50px;
  overflow: hidden;
  border: 1px solid MediumPurple;
  border-radius: 5px;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
}

.scroll-area {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;      
    box-sizing: content-box;
    flex-grow: 1;
}

#statuscafe {
    padding: .5em;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.audiobox {
    width: 200px;
    height: 50px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: left;
    background-image:url("/BETTERcheckerboard.png");
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden
    }
    
    .finalbox1 {
    width: 230px;
    height: 240px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: left;
    background-image:url("/BETTERcheckerboard.png");
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: scroll
    }
    
  .finalbox2 {
    width: 230px;
    height: 240px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: left;
    background-image:url("/BETTERcheckerboard.png");
    margin-bottom: 10px;
    overflow: hidden;
    }
    
    .additionalbox {
    width: 230px;
    height: 180px;
    border: 5px double MediumPurple;
    border-radius: 10px;
    margin: auto;
    float: left;
    background-image:url("/BETTERcheckerboard.png");
    margin-top:10px;
    margin-bottom: 10px;
    overflow: hidden
    }
    
    .ocwrap {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}