/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #342612;
  color: black;
  font-family: Helvetica, Arial, sans-serif;
}

body {
  background-image: url('images/tilebg2.png');
  background-repeat: repeat; /* Default behavior */
}

#container {
  max-width: 1000px;
  margin: 0 auto;
}

main {
    background: #e0cdad;
    flex: 1;
    padding: 20px;
    order: 2;
}


aside {
    background-color: #baaa8f;
    color:white;
    width: 200px;
    padding: 20px;
    font-size: smaller;
    border: 1px solid white;
}

#navbar {
    height: 40px;
    background-color: #614d30;
    /* navbar color */
    width: 100%;
}

a:link {
  color: #2f7842;
}

a:visited {
  color: #614d30;
}

a:hover {
  color: #9e8560;
}

.logocont {
  background: #756042;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1,
h2,
h3 {
    color: #2f7842;
}

h1 {
    font-size: 25px;
}

strong {
    /* this styles bold text */
    color: #2f7842;
}



#footer {
    background-color: #614d30;
    color: white;
    width: 100%;
    height: 40px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

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

#navbar li {
    padding-top: 10px;
}

#navbar li a {
    color: white;
    font-weight: 800;
    text-decoration: none; /* this removes the underline */
}

#navbar li a:hover {
    color: #9e8560;
    text-decoration: underline;
}

#flex {
    display: flex;
}



 #leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

.box {
    background-color: #756042;
    color:white;
    border: 1px solid white;
    padding: 10px;
}


@media only screen and (max-width: 900px) { /* make 100 less than max-width of container */
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }
    
    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

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


.wrapimg {
    float: left;
    margin: 0 12px 8px 0;
    max-width:100px;
    height: auto;
}

.imgbox {
    overflow: auto;
}

/*Grid stuff*/
.gamearea {
  margin-left:3%;
  Margin-right:3%;
  /*height: 600px;*/
  background-color: #baaa8f;
  border: 1px solid #342612;
  /*overflow:auto;*/
  /*overflow-x: hidden; */
}

.gamearea p {
  text-align:left;
  margin:10px
}

.gamearea h1 {
  text-align:left;
  margin:10px
}

.gamearea h2 {
  text-align:left;
  margin:10px
}

.gamearea h3 {
  text-align:left;
  margin:10px
}

 .gamearea h4 {
  text-align:left;
  margin:10px
}

.gamearea td {

 /* border: double thick rgb(131, 34, 55); */
            border: 20px solid transparent ;
}

.gamepicture {
  max-width: 350px; 
  max-height: 350px; 
  width: auto; 
  height: auto;
  
}

.float-text-r5 {
  padding-left: 10px;
  margin-top:0px;
  float: left;
}

hr {
  margin-top:10px;
}


iframe {
  width:100%; 
  height:600px; 
  border:1px solid #000;
  border-radius: 10px;
}

.visitor-counter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.visitor-header {
  margin:0px;
  color:white;
}