@font-face {
font-family: csoft;
src: url('fonts/csoftbold.otf');
}
            
@font-face {
font-family: csoft;
src: url('fonts/csoftbold.otf');
font-weight: bold;
}
            
            
@font-face {
font-family: Strasua;
src: url('fonts/Strasua.otf');
}
            
@font-face {
font-family: Mumbo;
src: url('fonts/MUMBSB__.TTF');
}
            
@font-face {
font-family: boc;
src: url('fonts/boc.otf');
}
           
@font-face {
font-family: Taxon;
src: url('fonts/Taxon-Regular.otf');
}
          
@font-face {
font-family: TaxonBold;
src: url('fonts/Taxon-Bold.otf');
}
        
@font-face {
font-family: TaxonExtraBold;
src: url('fonts/Taxon-ExtraBold.otf');
}
          
@font-face {
font-family: FDBO;
src: url('fonts/FuturaDemiBoldOblique.otf');
}
          
@font-face {
font-family: Poppins;
src: url('fonts/Poppins-SemiBold.ttf');
}
@font-face {
font-family: CameraObscura;
src: url('fonts/CameraObscura.otf');
}
           
           
@font-face {
font-family: C64;
src: url('fonts/C64.ttf');
}

@font-face {
font-family: Famifont;
src: url('fonts/FamifontBold-j8Oj.ttf');
}
            
@font-face {
font-family: MT;
src: url('fonts/mt.otf');
}
            
@font-face {
font-family: Goudy;
src: url('fonts/Goudy.otf');
}

@font-face {
font-family: Magic;
src: url('fonts/MagicalNight.ttf');
}
          
@font-face {
font-family: gameboy;
src: url('fonts/gameboy.ttf');
}

@font-face {
font-family: C64;
src: url('fonts/C64.ttf');
}
     
@font-face {
font-family: Oceanside;
src: url('fonts/Oceanside\ Typewriter.ttf');
}
@font-face {
font-family: Sundori;
src: url('fonts/Sundori.ttf');
}
          
body {
  margin: 0;
  background-color: #000000;
  background-image: url(assets/c0.jpg);
  color: #000000;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

* {
  box-sizing: border-box;
}

 #container {
  max-width: 800px;
  margin: 0 auto;
  
  border-radius: 5px 5px 5px 5px;
}

#container a {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}

#header { 
  width: 100%;
  background-color: #FFFFFF;
  height: 125px;
  background-image:url('assets/header.png');
  background-size: 100%;
  background-position: left;
  border-radius: 5px 5px 0px 5px;
}

#navbar {
  height: 40px;
  background-color: #faebcc;
  width: 100%;
  border-radius: 5px 0px 5px 5px;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-items: left;
}

#navbar li {
 padding-top: 10px;
 transition:all 1s ease;
 display: table-cell;
}

#navbar a {
  color: black;
  font-weight: 800;
  text-decoration: none;
  display:block;
  transition:color 0.2s ease-in-out;
  }
#navbar li:hover a{
  color: #008543;
}

#flex {
  display: flex;
}
 aside {
  background-color: transparent;
  width: 200px;
}

main {
  background-color: #faebcc;
  flex: 1;
  padding: 10px;
  order: 2;
  border-radius: 5px;
  height: auto;
}

mainphoto {
  background-color: #faebcc;
  flex: 1;
  padding: 10px;
  order: 2;
  border-radius: 5px;
  height: 589px;
}

 footer {
  display: flex;
  background-color: #dbc7a6;
  width: 100%;
  height: 40px;
  padding: 5px;
  border-radius: 5px 5px 5px 5px;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0; 
}

footernonstick {
  display: flex;
  background-color: #dbc7a6;
  width: 100%;
  height: 40px;
  padding: 5px;
  border-radius: 5px 5px 5px 5px;
  justify-content: center;
  align-items: center;
}

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

h1 {
font-size: 25px;
}

strong {
  color: #000000;
}

.box {
  background-color: #dbc7a6;
  padding: 10px;
  border-radius: 5px;
}

.box2 {
  background-color: #faebcc;
  padding: 10px;
  border-radius: 5px;
}

.todobox {
  background-color: #dbc7a6;
  height: 105px;
  width: auto;
  padding: 10px;
  border-radius: 5px;
}
            
.scrollbox {
  background-color: #dbc7a6;
  padding: 10px;
  border-radius: 5px;
  height: 180px;
  overflow: scroll;
}
            
.narrow {
  float: right;
  width: 250px;
  background: #faebcc;
  margin-top: 15px;
  border-radius: 5px;
}
            
.wide {
  float: left;
  width: calc(100% - 250px);
  background: #faebcc;
  height: 168px;
  margin-top: 15px;
  border-radius: 5px;
}

.logo {
  height:100%;
  position: absolute;
  top: 15px;
  left: 15%;
}
          
.leftsidebarcolor {
  background-color: #faebcc;
  width: 200px;
  padding: 10px;
  font-size: smaller;
  border-radius: 5px;
  margin-top: 10px;
}
.thumbnail {
  
  width: 560px; 
  height: 80px;
  overflow: clip;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.thumbnailmain {
  width: 980px; 
  height: 170px;
  overflow: clip;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}


  
  .lighttext {
    background-color: #dbc7a6;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
  }

#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: #13092D;
}
#hoverdiv a {
  color: black;
  font-weight: 800;
  text-decoration: none;
  display:block;
  transition:color 0.2s ease-in-out;
  }


#hoverdiv li:hover a{
  color: #e0462e;
}
li {
  margin-left: 5px;
}
            
li {
  margin-left: 10px;
}
            
li p {
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}

aside {
width: 100%;
}

main {
order: 2;
}

#leftSidebar {
order: 1;
}

#rightSidebar {
order: 3;
}

#navbar ul {
flex-wrap: wrap;
}

}