/* 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." */
  
/*   
* {
    box-sizing: border-box;
}
*/

/* containers beginning with the period . are for classes while the hastags # are for id*/

/* D48469 This is the red color*/

/* fonts */

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Edu SA Beginner */

.edu-sa-beginner {
  font-family: "Edu SA Beginner", cursive;
  font-weight: 700;
  font-style: normal;
}

/* The yellow rectangle box thing */

#rcorners1 {
  border-radius: 10px 5px;
  background: #FFBF68;
  padding: 3px; 
  width: 200px;
  height: auto;
  text-align: left;
  color: #403D3C;
}

#rcorners2 {
  border-radius: 10px 5px;
  border-style: solid;
  /*background: #555454;*/
  padding: 3px; 
  width: 200px;
  height: auto;
  text-align: left;
  color: #555454;
}

#rcorners3 {
  margin: 0px;
  border-radius: 0px;
  background: #8f6c59;
  padding: 3px; 
  max-width: 100%;
  height: auto;
  text-align: left;
  color: white;
}

body {
  padding: 0;
  margin: auto;
  max-width: 1000px; /* sets the max width of the page */
  background-repeat: repeat;
  background-size: 400px 400px;
  background-attachment: fixed;
  background-image: url("backgroundimage.png");
}

#main-container {
  /* background-color: ; #C1BCBA; */
  margin: 10;
  padding: 10px;
  color: #403D3C;
  border-radius: 10px;
  text-align: center;
  height: auto;
}

#header {
  margin: 0;
  width: 100%;
  padding: 0;
  background-color: blue;
  background-image: url("backgroundimage.png");
}

#banner {
  position: absolute;
}

/*navigation bar style*/

#navbar-container {
  margin: 0;
  padding: 0;
  width: 100%;
  border-radius: 0 0 5px 5px;
  display: inline-block;
  background-color: #2A2E27;
}

.navbar-text {
  padding: 0;
  justify-content: center;  /* centers the list items */
  list-style-type: none;    /* remove bullet points from list */
  line-height:15px;         /* Sets the vertical position of the text */
}

ul.navbar-text li {
  display: inline-block;
}  

ul.navbar-text a {
  color: white;          /* recolors the text to white */
  font-size: 30px;       /* resize the font */
  margin-right: 40px;    /* Gives 20px spacing to the right of each text item */
  text-decoration: none; /* removes the underscore from the text */
}

/* main body container */

#page-container {
  height: auto;
  padding: 10px 0px;
  margin: 10px 0;
  border-radius: 5px;
  display: flex;
  /*background-color: #4A4A4A;*/
}

#sidebar-container {
  margin-right: 10px;
  padding: 10px;
  width: 25%;
  text-align: left;
  align-self: stretch;
  border: 5px;
  border-style: solid;
  border-radius: 5px 5px;
  border-color: #4A4A4A;
  background-color:  #EAEAEA;
  display: inline-block;
}

#rightbar-container {
  padding: 10px;
  width: 75%;
  align-self: stretch;
  color: black;
  border: 5px;
  border-radius: 2px 2px;
  display: inline-block;
  background-color: #EAEAEA;
    border-style: solid;
  border-color: #4A4A4A;
}

#site-updates {
  margin: 0px;
  padding: 10px;
  border: 1px;
  width: 90%;
  height: 200px;
  /*align-self: stretch;*/
  color: black;
  display: inline-block;
  overflow: hidden;
  overflow-y: scroll;
  border-style: solid;
  /*border-radius: 10px;*/
  /*border-color: #4A4A4A;*/
  /*background-color: #4A4A4A;*/
}


#emi {
  transform: scaleX(-1);
}


#footer {
  margin: 0; 
  padding: 0;
  width: 100%;
  color: white;
  display: inline-block;
  border-radius: 5px;
  background-color: #2A2E27;
  background-repeat: no-repeat;
  background-image:  url("../images/ket.png");
  background-size: 100px;
}