html {
  font-size: 1em;
  font-family: ms gothic;
}

body {
  margin:0;
  padding:0;
  background-color: #000;
  background-image: url('https://qso404.neocities.org/imgs/star.gif');
  background-repeat: repeat;
  background-size: 200px;
  image-rendering: pixelated;
}

@media only screen and (max-width: 1533px) {
    .midflexsp {
        display: none;
    }
    
    .charmmy {
        display: none;
    }
    
}

#xenicRing {
	font-size: 0.7em; /* GO UP (1, 2, 3 ETC) FOR LARGER AND GO INTO DECIMALS (0.9, 0.8 ETC) FOR SMALLER. */
}


/* base */

.topbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background: #000;
     border-bottom: 1px solid rgba(41, 41, 41);
    }

.main {
  border-image: url(/imgs/cloud.png) 9 fill round;
  border-width: 9px;
  border-style: solid;
  filter: drop-shadow(0px 0px 5px rgba(199, 244, 151, 1));
  border-radius: 15px 15px 0 0;
  margin: auto;
  margin-top: 30px;
  width: 65%;
  height: 650px;
}

.header {
  background-color: #bbb;
  background-image: url('/imgs/city2kki.jpg');
  background-size: 450px;
  height: 100px;
  border-radius: 15px 15px 0 0;
  padding-left: 10px;
}

.flex {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  background-image: url('/imgs/kittims.jpg');
  background-repeat: repeat;
  background-size: 250px;
  border-radius: 0 0 15px 15px;
}

.left {
  flex: 15%;
  margin-top: 5px;
  margin-right: 5px;
  height: 545px;
  border-radius: 0 0 0 15px;
  overflow: scroll;
  scrollbar-width: none;
}

.center {
  flex: 60%;
  margin-top: 5px;
  height: 545px;
  overflow: scroll;
  scrollbar-width: none;
}

.centercoll {
  flex: 85%;
  margin-top: 5px;
  height: 545px;
  overflow: scroll;
  scrollbar-width: none;
}

.right {
  flex: 25%;
  margin-top: 5px;
  margin-left: 5px;
  height: 545px;
  border-radius: 0 0 15px 0;
  overflow: scroll;
  scrollbar-width: none;
}


.box {
  padding: 10px;
  color: #fff;
  background-color: rgba(1, 1, 1, 0.5);
  border: 1px solid rgba(41, 41, 41);
  text-align: left;
  border-radius: 15px;
}

.midbox {
  padding: 10px;
  color: #fff;
  background-color: rgba(1, 1, 1, 0.5);
  border: 1px solid rgba(41, 41, 41);
  text-align: left;
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
}

.cheetahbox {
  padding: 10px;
  color: #fff;
  border: 1px solid rgba(41, 41, 41);
  text-align: left;
  border-radius: 15px;
  background-image: url('/imgs/plaid.jpg'); 
  background-repeat: repeat; 
  background-size: 250px; 
}

/* decorations etc */

.charmmy {
  position: fixed;
  z-index: 99;
  bottom:0; margin-bottom:10px;
  right:0; margin-right:75px;
}


/* text */

p {
  color: #fff;
}
    
a {
  color: #bcd6a0;
  text-decoration: underline;
}

a:hover {
  color: #bcd6a0;
  text-decoration: underline;
}

strong {
  color: #a4bff9;
  text-decoration: none;
}

bold {
  color: #a4bff9;
  text-decoration: none;
}

pre {
  font-size: 15px;
  color: #bcd6a0;
  text-shadow: -1px 0 5px #bcd6a0, 0 1px 5px #bcd6a0, 1px 0 5px #bcd6a0, 0 -1px 5px #bcd6a0;
}

::-moz-selection { 
  color: #000;
  background: #bcd6a0;
}

::selection {
  color: #000;
  background: #bcd6a0;
}

/* etc */

.midflex {
  
}

.midflexsp {
  
}


#statuscafe {
    padding: .5em;
    height: 90px;
    overflow: scroll;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    font-size: smaller;
}

#button {
  border-bottom: 1px dotted #c0bdfc;
  font-size: smaller;
  display: flex;
  flex-wrap: wrap;
  padding: 3px;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* GEMWORLD player by lovermonth, modified from glenthemes player 02 */
     
    @font-face {
    font-family: emoji;
    src: url(https://cinni.net/directory/EmojiFont.ttf);
    }
     
    @font-face {
    font-family: pokemonred;
    src: url(https://dl.dropbox.com/s/cwniaatr9tgsrvv/pokemonred.ttf);
    }
     
    /*-------MUSIC PLAYER BY GLENTHEMES-------*/
    #glenplayer02 {
    position:fixed;
    bottom:0;margin-bottom:20px;
    left:0;margin-left:20px;
    display:flex;
    z-index:99;
    }
    #glenplayer02 a {text-decoration:none;}
     
    #glenplayer02 > div {
    align-self:center;
    -webkit-align-self:center;
    }
     
    .music-controls {
    user-select:none;
    -webkit-user-select:none;
    width:17px;
    color: #fff;
    font-family: emoji;
    font-size:30px;
    cursor:pointer;
    }
     
    .playy, .pausee {
    color: #bcd6a0;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
     
    @keyframes floating {
    0% { transform: translate(0, 0px); }
    50% { transform: translate(0, 7px); }
    100% { transform: translate(0, -0px); }
    } /* color of play & pause buttons */
     
    .pausee {display:none;}
     
    .sonata {
    margin-left:10px;
    margin-top: 10px;
    width:170px;
    font-size: 11px;
    font-family: pokemonred;
    color:#fff; /* color of music note symbol */
    }
     
    .labeltext {
    margin-left:8px;
    font-family: pokemonred;
    font-size:7px;
    color:#fff; /* color of song title */
    }