:root {
                --body-bg-image: url('/STATS/BlogScreen.png');

            }
        


                @font-face {
    font-family: 'Fixedsys Excelsior 3.01';
    font-style: normal;
    font-weight: normal;
    src: url('FSEX300.woff') format('woff');
    }
            body {
                font-family: 'Fixedsys Excelsior 3.01';
                margin: 0;
                background-image: url('/STATS/BlogScreen.png');
                background-repeat: no-repeat;
                background-size: cover;
                background-color: black;
                background-position: 100% 8%;
            
              
            }

            * {
                box-sizing: border-box;
            }


  .date {
    color:#1fb867;
    font-size:220%;
    text-align:left;
    margin-left:20px;
    letter-spacing:3px
  }
    
  .text {
    color:#259450;
    font-size:190%;
    text-align:left;
    margin-left:30px;
    letter-spacing:0px;
    margin-top:-20px;
  }
  
    a {
      text-decoration:none;
      color:#259450;
      font-family: 'Fixedsys Excelsior 3.01';
    }


 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 50%;
  padding: 2px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}      

.dropbtn {
  background-color: transparent;
  padding: 10px 10px;
  font-size: 220%;
  border: 1px solid transparent; 
  color: #1fb867;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover {
  background-color:#1d59313b;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(9, 26, 11, 0.856);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content button {
  background-color:transparent;
  font-size: 120%;
  padding: 10px 10px;
  margin-left:3px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content button:hover {background-color: transparent;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

  .btnEmpty {
    color:#4d3a19;
    padding: 10px 10px;
  }
  .btnEmpty:hover {background-color: transparent;
}


/* sctollbar direction */

.btn-group {
    width:250px;
    height:500px;
    overflow:auto;
    position:fixed;
    top:160px;
    right:1200px;
}

/* Add a background color on hover */
.btn-group button {
  font-family: 'Fixedsys Excelsior 3.01';
  font-size:220%;
  letter-spacing:3px;
  text-align: left;
  background-color: transparent; 
  border:1px solid transparent; 
  color: #1fb867;  
  display: block; 
  padding: 10px 10px;
  cursor: pointer;  
}

/* Add a background color on hover */
.btn-group button:hover {
  border-color: #1fb867;
}


    /* Scrollbar styles */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
border: 2px;
border-radius: 6px;
}

::-webkit-scrollbar-thumb {
background: #0f2d1a;  
border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
background: #259450;  
}


            #container {
                max-width: 950px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
             
                /* this centers the entire page */
            }
 
            /* 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: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                /* 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;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }