@font-face {
  font-family: "EcuyerR";
 src: url("/fonts/EcuyerR.TTF") format("truetype");
}

@font-face {
  font-family: "Blisstwin";
 src: url("/fonts/Blisstwin.ttf") format("truetype");
}

@font-face {
  font-family: "Mungo";
 src: url("/fonts/Mungo.ttf") format("truetype");
}

@font-face {
  font-family: "Porto-Qastelo";
 src: url("/fonts/Porto-Qastelo.ttf") format("truetype");
}

body {
  background-color: #28245d;
}

p {
  font-family: "Blisstwin";
  color: white;
  font-size: 1.3em;
}

h1 {
  font-family: "Porto-Qastelo";
  color: white;
  font-size: 5em;
}

h2 {
  font-family: "Mungo";
  color: black;
  font-size: 3em;
}

a:link {
   color: white;
  	text-decoration: none;
}

/* following layout code HEAVILY used sadgrlonline's layout builder */
#container {
  width: 50em;
  margin: 0 auto;
}

#container a {
  color: white;
  text-decoration:none;
}

#header {
  width: 100%;
  height: 250px;
  z-index: 10;
  background-color: black;
}

#header2 {
  width: 100%;
  height: 113px;
  margin-top:-8em;
  z-index:0;
}

#navbar {
  height: 50px;
  background-color: #5743b3;
  width:100%;
  font-family: "Blisstwin";
  color: white;
  font-size: 1.3em; 
}

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

#navbar li {
  padding-top: 0.6em;
}

#navbar li a {
  color: white;
  font-weight: 800;
  text-decoration: none;
}

#navbar li a:hover {
  color: white;
  text-shadow:4px 2px #463888; 
}

#flex {
  display:flex;
}

#main {
  width:90%;
  background-color: #3e3891;
  padding-top:1%;
  padding-bottom:1%;
  padding-left: 5%;
  padding-right: 5%;
}

#headerimg {
  margin: 1em;
  width: 70%;
}
  
  
@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;
                }
            }