.crt::before {
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
        z-index: 2;
        background-size: 100% 2px, 3px 100%;
        pointer-events: none;
    }
    
    body {
    background-image: url(/images/purplesky.gif);
    background-blend-mode: darken;
    color: white;
    font-size: 1.1em;
}

.center {
    text-align: center;
    align-content: center;
}

/*Contains everything*/
.wrapper {
    width: 1150px;
    background-color: #020103;
    margin: 0 auto;
    top: 0;
    margin-top: -10px;
    border-left: 0px solid #12282f;
    border-right: 0px solid #12282f;
    margin-bottom: -10px;
}

/*Contains main and sidebar divs*/
.wrapper-2 {
    position: relative;
}

/*Header and footer images*/
.header,
.footer {
    height: 200px;
    overflow: hidden;
    background-color: #141414;
    background-image: url("/images/lainheader.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.footer {
    height: 50px;
}

.header img {
    border-top: 0px;
}

/*Big title at the top of the page.*/
.title {
    padding: 15px 10px 10px 20px;
    filter: drop-shadow(0 1px 3px);
    
}

/*Override default margins/padding for headings.*/
.title h1,
.title h2,
.title h3 {
    padding: 0;
    margin: 0;
    font-family: "Sixtyfour", sans-serif;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 33px;
    text-align: center;
    text-decoration: underline;
}

h3 {
    font-size: 25px;
    text-decoration: underline;
}

/*Container for top row of links.*/
.links {
    padding: 5px;
    padding-top: 3px;
    padding-bottom: 5px;
}

/*Div style for individual links.*/
.link {
    text-align: center;
    display: inline-block;
    list-style-type: none;
    float: none;
    font-weight: bold;
    font-size: 1.16em;
    padding: 5px;
    margin-right: 10px;
    margin-left: 10px;
}

.link a {
    text-decoration: none;
    color: slateblue;
    text-shadow: -1px 0 whitesmoke, 0 1px whitesmoke, 1px 0 whitesmoke, 0 -1px whitesmoke;
}

.link a:hover {
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #B889C5;
}

a:hover {
    cursor:help;
    letter-spacing:1.5px;
    transition:0.3s;
    color: slateblue;
    text-shadow: 2px 2px purple;
}

ul.cute {
    list-style-type: none;
    list-style-position: inside;
    margin-bottom: 6px;
    list-style-image: url("/images/mouse.gif");
}

hr {
    border: 1px solid mediumpurple;
}

hr.style2 {
    width: 95%;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #141414, aliceblue, cadetblue, blueviolet, cadetblue, aliceblue, #141414);
}

marquee img:hover {
    transform: scale(1.1);
}

.small {
    font-style: italic;
    font-size: 0.9em;
    color: aliceblue;
}

.highlight {
    background-color: #451571;
    color:white;
}

.sptitle {
    background-color: #451571;
    color: white;
    text-align: center;
    align-content: center;
    font-size: 1.3em;
    padding-left: 10px;
    padding-right: 10px;
}

.blog {
    font-style: italic;
    font-family: Riffic;
    text-decoration: bold, underline;
    font-size: 1.1em;
    padding-bottom: 20px;
    padding-top: 2px;
    line-height: 22px;
    color: aliceblue;
}

.date {
    font-style: italic;
    font-family: monospace;
    color: violet;
    font-size: 0.9em;
    text-decoration: none; 
    line-height: 22px;
    padding-bottom: 3px;
}

.changelog {
    height: 200px;
    overflow-y:scroll;
    overflow-x: hidden;
    line-height: 1.5;
}

.tracks {
    height:150px;
    width:60%;
    overflow: scroll;
    overflow-x: hidden;
    border:4px solid rebeccapurple;
    line-height: 1.8;
}

#statuscafe {
    padding: 5px;
}

#statuscafe-username {
    color: darkmagenta;
    font-family: strawberry muffins;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
    padding-bottom: 6px;
}

#pop{
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    color: #fff;
    -webkit-animation: pop 1s ease-in-out infinite alternate;
    animation: pop 1s ease-in-out infinite alternate;
    -moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}

.glitch {
  position: relative;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
  animation: glitch 725ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  15% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  16% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  50% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  99% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  100% {
    text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
      -0.04em -0.025em 0 #fffc00;
  }
}


/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.main,
.sidebar-right {
    display: inline-block;
}

.sidebar-left,
.sidebar-right {
    width: 200px;
    position: absolute;
    top: 0;
}

.sidebar-left {
    margin-left: 10px;
}

.main {
    margin-left: 220px;
    width: 710px;
}

.sidebar-right {
    margin-right: 10px;
    margin-left: 10px;
}

/*Box used for individual sections in the sidebar, center column, etc.*/
.box {
    background: #090909;
    color: #fff;
    border-top: 5px solid blueviolet;
    border-bottom: 5px solid blueviolet;
    border-left: 3px solid grey;
    border-right: 3px solid darkorchid;
    margin: 10px 0px 15px 0px;
}

.boxtwo {
    background: #090909;
    color: #fff;
    border-top: 5px solid blueviolet;
    border-bottom: 5px solid blueviolet;
    border-left: 3px solid grey;
    border-right: 3px solid darkorchid;
    margin: 10px 0px 15px 0px;
    overflow-y: scroll;
    height: 230px;
}

.boxthree {
    background: #090909;
    color: #fff;
    border-top: 5px solid blueviolet;
    border-bottom: 5px solid blueviolet;
    border-left: 3px solid grey;
    border-right: 3px solid darkorchid;
    margin: 10px 0px 15px 0px;
    overflow-y: scroll;
    height: 450px;
}

.chatbox {
    background: #090909;
    color: #fff;
    border-top: 5px solid blueviolet;
    border-bottom: 5px solid blueviolet;
    border-left: 3px solid grey;
    border-right: 3px solid darkorchid;
    margin: 10px 0px 15px 0px;
    height: 400px;
}

/*Prevent overflow of large images in main text areas.*/
.box img {
    max-width: 100%;
    height: auto;
}

.box img:hover {
    transform: scale(1.1);
}

.boxtwo img:hover {
    transform: scale(1.1);
}

/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
    padding: 5px 10px 0px 10px;
}

/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
@media (max-width: 1180px) {
    .wrapper {
        width: calc(440px + 50vw);
    }
    .main {
        width: 50vw;
    }
}

@media (max-width: 910px) {
    .wrapper {
        width: calc(360px + 52vw);
    }
    .sidebar-left,
    .sidebar-right {
        width: 160px;
    }
    .main {
        margin-left: 180px;
        width: 52vw;
    }
}

/* Mobile compatibility. Puts everything into a standard vertical layout. */
@media (orientation: portrait) {
    .wrapper {
        width: 96vw;
        margin: 0 auto;
        padding: 0;
        position: relative;
    }
    .wrapper-2 {
        width: 94vw;
        margin: 0 auto;
        padding: 0;
        position: relative;
    }
    .sidebar-left,
    .main,
    .sidebar-right {
        position: relative;
        width: 92vw;
        margin: 0.25rem 1vw;
    }
    .sidebar-left,
    .sidebar-right {
        font-size: 0.95em;
    }
}