:root {
  --header-image:url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
  --body-bg-image:url('https://sadhost.neocities.org/images/tiles/purplesky.gif');
  --content:#43256E;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

body {
  font-family:'Nunito', sans-serif;
  margin:0;
  background-color:#08031A;
  background-size:65px;
  color:#fceaff;
  background-image:var(--body-bg-image);
}

* {
  box-sizing:border-box;
}

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

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

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

#navbar {
  height:40px;
  background-color:#13092D;
  width:100%;
}

#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:#ED64F5;
  font-weight:800;
  text-decoration:none;
}

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

#flex {
  display:flex;
}

aside {
  background-color:#241445;
  width:200px;
  padding:20px;
  font-size:smaller;
  height:600px;
  overflow:auto;
}

main {
  background-color:#43256E;
  flex:1;
  padding:20px;
  order:2;
  height:600px;
  overflow:auto;
}

#leftSidebar {
  order:1;
}

#rightSidebar {
  order:3;
}

footer {
  background-color:#13092D;
  width:100%;
  height:40px;
  padding:10px;
  text-align:center;
}

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

h1 {
  font-size:25px;
}

strong {
  color:#ED64F5;
}

.box {
  background-color:#13092D;
  border:1px solid #ED64F5;
  padding:10px;
}

#topBar {
  width:100%;
  height:30px;
  padding:10px;
  font-size:smaller;
}

@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap:wrap;
  }
  
  aside {
    width:100%;
  }
  
  main {
    order:1;
  }
  
  #leftSidebar {
    order:2;
  }
  
  #rightSidebar {
    order:3;
  }
  
  #navbar ul {
    flex-wrap:wrap;
  }
}