@import url('https://fonts.googleapis.com/css2?family=VT323');


body {
    font-family: 'VT323';
    font-size:24px;
    font-weight:strong;
    color:#dddddd;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    display:none;
}

.mainbody {
  background-image:url(/images/backgrounds/starbg.gif);
  background-size:cover;
}

.subbody {
  background-color:black;
  padding-left:3%;
  padding-right:3%;
}

.button:hover {
    -webkit-filter: invert(85%);
    filter:invert(85%);
}

.header {
    background-color:#00ffff;
    color:black;
    font-weight:bold;
    text-align:left;
    padding-left:2%;
    padding-bottom:0;
    margin-bottom:0;
    margin-top:0;
}

.logpost {
    margin-top:0;
}

li {
    font-size:17px;
}

a {
    color:cyan;
    /*display:inline-block;*/
}

a:hover {
  animation: glitch 175ms;
}

a:visited {
    color:rgb(1, 216, 216);
}

.biglink {
  font-size:1.5em;
}

img,div {
  max-width:100%;
}

@keyframes glitch {
    0% { margin-top: -3px; margin-left: -1; color: cyan; transform: translateY(-3px) translateX(-1); }
    25% { margin-top: -6px; margin-left: 0; transform: translateY(-3px) translateX(-1); }
    33% { margin-top: 2px; margin-left: 2px; color: red; text-transform: lowercase; transform: translateY(-3px) translateX(-1); }
    50% { margin-top: 1px; margin-left: 5px; transform: translateY(-3px) translateX(-1); }
    66% { margin-top: 0px; margin-left: -3px; color: white; text-transform: lowercase; transform: translateY(-3px) translateX(-1); }
    75% { margin-top: -2px; margin-left: -1px; color: cyan; text-transform: uppercase; transform: translateY(-3px) translateX(-1); }
    100% { margin-top: 9px; margin-left: 0px; color: white; transform: translateY(-3px) translateX(-1); }
}


.glitch-anim {
    animation-name: glitch;
    /*animation-iteration-count: infinite;*/
    animation-duration: 175ms;
}


#content {
    width: 50%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    overflow-x: hidden;
    padding-top: 2%;
    box-sizing:border-box;
}
#mainleft {
    width: 15%;
    height:88%;
    /*height: 80%;*/
    float: left;
    padding-left: 0px;
    box-sizing:border-box;
    /*padding-top:23px;*/
    /*background-image:url(images/backgrounds/blackgranite.gif);*/
}
#mainright {
    height: 88%;
    width: 82%;
    margin-left: 18%;
    text-align: left;
    font-size: 18px;
    box-sizing:border-box;
    /*background-image:url(images/backgrounds/blackgranite.gif);*/
}
#mainContent {
  border:2px solid cyan;
  box-sizing:border-box;
}
#navbar {
    height:100%;
    background-color:black;
    border: 2px cyan;
    border-style:solid;
    box-sizing:border-box;
}
#title {
    background-color:black;
    border: 2px cyan;
    border-style:solid;
    padding-top:4%;
    margin-bottom:3%;
    box-sizing:border-box;
}
.clear {
    clear: both;
}
#musictoggle {
    /*height: 100%;*/
    width: 85%;
    border: none;
    /*background-size: contain;
    background-position: center;*/
}
.play{content: url('images/buttons/play.png') no-repeat;}
.pause{content: url('images/buttons/pause.png') no-repeat;}

#mainright { display: flex; flex-direction: column; }
#title { /* remove the height */ }
#mainright iframe { flex: 1 }