:root {
  --header-image: url("/assets/images/art/Ice\ belt\ world\ Map\ land\ NOBELT.jpg");
  --body-bg-image: url("");
  --content: #314035;
}

/* Font */
@font-face {
  font-family: "Aubrey";
  src: url("../assets/fonts/Aubrey-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


body {
  font-family: "Aubrey", sans-serif;
  margin: 0;
  background:radial-gradient(1700px circle at 47.45% 51.76%, #2e3903 0%, #d7e891 100%);
  background-color: #a3b18a;
}

* {
  box-sizing: border-box;
}

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

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

#header {
  width: 100%;
  background-color: #243c2b;
  height: 150px;
  background-image: var(--header-image);
  background-size: 100%;
}

/* navigation section!! */
#navbar {
  height: 40px;
  background-color: #3a5a40;
  width: 100%;
}

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

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

/* navigation links*/
#navbar li a {
  color: #F3FFE1;
  font-weight: 800;
  text-decoration: none;
}

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

#flex {
  display: flex;
}

/* Sidebars */
aside {
  background-color: #3a5a40;
  width: 200px;
  padding: 20px;
  font-size: larger;

}

/* Main */
main {
  background-color: #3a5a40;
  flex: 1;
  padding: 20px;
  order: 2;
}


*/ #leftSidebar {
  order: 1;
}

#rightSidebar {
  order: 3;
}

footer {
  background-color: #474B24;
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;

}

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

h1 {
  font-size: 35px;
}

strong {
  
  color: #F4F1BB;
}

.box {
  background-color: #344e41;
  border: 1px solid #000000;
  padding: 10px;
}

/* CSS for extras */

#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  background-color: #13092d;
  font-size: larger;
}

/*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: 1400px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }

      */
  main {
    order: 1;
  }

  #leftSidebar {
    order: 2;
  }

  #rightSidebar {
    order: 3;
  }

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