@font-face {
        font-family: Eclectic Handwritten;
        src: url('/fonts/eclectichandwritten-regular.ttf') format('truetype');
      }
      
@font-face {
        font-family: Open Dyslexic;
        src: url('/fonts/OpenDyslexic-Regular.otf') format('opentype');
      }
      
@font-face {
        font-family: Times New Roman;
        src: url('/fonts/times.ttf') format('truetype');
      }

body {
    font-family: Eclectic Handwritten;
    margin: 0;
    background-color: #1A0303;
    background-size: 465px;
    color: #FFFFFF;
    font-size:20px;
    background-image:url(/images/assets/bloodtile.gif);
}

* {
    box-sizing: border-box;
}

.container {
    max-width: 1000px;
    /* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
    margin: 0 auto;
}

.container a {
    color: #E60000;
    font-weight: bold;
    
}

.container a:hover {
    color: #FFFFFF;
    transition:0.5s;
    cursor:pointer;
}

.header {
    width: 100%;
    height: 252px;
    background-image: url(/images/assets/header.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.navbar {
    height: 40px;
    width: 100%;
    margin-bottom:5px;
}

.navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

.navbar li {
    padding: 10px;
    background-color: #120102;
    border:solid 1px #E60000;
    width:16.66%;
    text-align:center;
}

.navbar li a {
    color: #E60000;
    font-weight: 800;
    text-decoration: none;
}

.navbar li a:hover {
    color: #FFFFFF;
    transition: 0.5s
}

.flex {
    display: flex;
    flex-wrap:wrap;
}

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

.sidebar {
    background-color: #2D090A;
    width: 200px;
    padding:20px;
    border:solid 1px #E60000;
    font-size: smaller;
    /* this makes the sidebar text slightly smaller */
}

#leftSidebar {
    order: 1;
    margin:10px 5px 10px 0px;
}

#rightSidebar {
    order: 3;
    margin:10px 0px 10px 5px;
}

main {
    background-color: #451415;
    flex: 1;
    padding: 20px;
    order: 2;
    margin:10px 5px 10px 5px;
    border:solid 1px #E60000;
}

footer {
    background-color: #120102;
    width: 100%;
    height:40px;
    padding: 10px;
    text-align: center;
    margin-bottom:10px;
    border:solid 1px #E60000;
}

h1,
h2,
h3 {
    color: #FF4D4F;
}

h1 {
    font-size: 25px;
}

strong {
    color: #FF4D4F;
}

hr {
  border: 1px solid #E60000;
}

.dash {
  border: 1px dashed #DF2020
}

.sitemap ul {
  list-style: none;
}

.sitemap li {
  padding: 0 0 0 30px;
  background-image: url("/images/assets/star.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 20px;
  margin:10px 0 0 -30px;
}

.sitemap li a {
    color: #E60000;
    font-weight: 800;
}

.sitemap li a:hover {
    color: #FFFFFF;
    transition: 0.5s
}

.box {
    background-color: #120102;
    border: 1px solid #E60000;
    padding: 10px;
    margin:5px 0 5px 0;
}

.boxlist {
  margin:2px 5px 2px 5px;
}

.topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #120102;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.scroll-container {
  background-color: #120102;
  border: 1px solid #E60000;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
  max-width:500px;
  margin-top:10px;
}

.scroll-container img {
  padding: 10px;
  max-height:615px;
}

.gif {
  width: 160px;
}

.portrait {
  max-width:48%;
  margin:5px;
  object-fit: contain;
}

.landscape {
  max-width:90%;
  margin:5px;
  object-fit: contain;
}

.pagedoll {
    position: fixed;
    bottom: 0;
    right:0;
    width:100%;
    max-width:230px;
    z-index:2;
}

.lilbutt {
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    max-width:45px;
    z-index:2;
}



#statuscafe {
  margin-top:10px;
  padding: .5em;
  background-color: #120102;
  border: 1px solid #E60000;
  overflow-wrap:break-word;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}


/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/

@media only screen and (max-width: 900px) {
    .flex {
        flex-wrap: wrap;
    }

    .sidebar {
        width: 100%;
    }
    
    .alert {
      top:25%;
      height:50%;
    }
    
    .column {
      flex: 100%;
      max-width: 100%;
    }
    
    .scroll-container {
      max-width:400px;
    }
    
    .scroll-container img {
      padding: 10px;
      max-height:500px;
    }

    /* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
    main {
      order: 1;
      margin:0;
    }

    #leftSidebar {
      order: 2;
      margin:0;
    }

    #rightSidebar {
      order: 3;
      margin:0;
    }
    
    .navbar {
      height:100%;
    }

    .navbar ul {
      flex-direction:column;
    }
    
    .navbar li {
      padding:5px 0 5px 0;
      width:100%;
    }
    
    .portrait {
      max-width:90%;
    }
    
    .hide {
      display:none
    }
    
    .header {
      height: 100px;
    }
    
    .break {
      max-width:100%;
    }
}