@font-face {
    font-family: Eclectic Handwritten;
    src: url('/eclectichandwritten-regular.ttf') format('truetype');
}

@font-face {
        font-family: Open Dyslexic;
        src: url('/OpenDyslexic-Regular.otf') format('opentype');
      }

body {
    font-family: 'Eclectic Handwritten', sans-serif;
    margin: 0;
    background-color: #1A0303;
    background-size: 75%, 50px;
    color: #FFFFFF;
    font-size:20px;
    background-image: url('/images/assets/buckybg.png'), url(/images/assets/bucktile.png);
    background-repeat: repeat, repeat;
}

* {
    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: #F72A2D;
    font-weight: bold;
    
}

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

.header {
    width: 100%;
    height: 100px;
    margin:15px;
}

.headerimg {
  max-height:100px;
}

.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: #120101;
    border:solid 1px #E60003;
    width:16.66%;
    text-align:center;
}

.navbar li a {
    color: #E60003;
    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: rgba(45, 9, 10, 0.75);
    width: 200px;
    padding:20px;
    border:double 4px #E60003;
    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: rgba(69, 20, 21, 0.75);
    flex: 1;
    padding: 20px;
    order: 2;
    margin:10px 5px 10px 5px;
    border:double 4px #E60003;
}

footer {
    background-color: #120101;
    width: 100%;
    height:50px;
    padding: 10px;
    text-align: center;
    margin-bottom:50px;
    border:double 4px #E60003;
}

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

h1 {
    font-size: 25px;
}

strong {
    color: #FF4D50;
}

hr {
  border-top: 2px dashed #E60003;
  border-bottom:hidden;
}

.dash {
  border: 1px dashed #DF2023
}

.sitemap ul {
  list-style: none;
}

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

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

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

.box {
    background-color: #120101;
    border: 2px inset #E60003;
    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: #120101;
}

.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: #120101;
  border: 1px solid #E60003;
  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;
}

.thumbs {
  width:100%;
  object-fit:contain;
}

.pagedoll {
    position: fixed;
    bottom: -3px;
    right:5px;
    width:100%;
    max-width:125px;
    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: #120101;
  border: 1px solid #E60003;
  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) {
    body {
      background-size:100%, 25px;
    }
    
    .flex {
        flex-wrap: wrap;
    }

    .sidebar {
        width: 100%;
    }
    
    .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
    }
    
    .headerimg {
      max-height: 75px;
    }
    
    .break {
      max-width:100%;
    }
}