*{
  margin:0;
  padding:0;
}
div#container{
  width: 80%;
  height: 800px;
  margin: 0 auto;
  background-color:#ccc;
  position:relative;
}
.flex-container {
  display: flex;
  flex-direction: row;
}
section{
  flex-grow: 1;
  background-color: white;
}
aside{
  flex-basis: 300px;
  background-color: green;
}
.box{
  width: 100px;
  height: 100px;
}
div{
  width: 100px;
  height: 100px;
}
#red{
  background-color:red;
  margin:10px;
}
#green{background-color:green;
  padding:10px;
}
#blue{
  background-color:blue;
  border:10px solid #000099;
}
#yellow{
  background-color:yellow;
  border:10px oslid #9b870C;
  margin:10px;
  padding:10px
}
@font-face {
    font-family: 'MyWebFont';
    src: url('FadeToGrey.woff2') format('woff2'),
         url('FadeToGrey.woff') format('woff'),
		 url('FadeToGrey.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1{
  font-family: MyWebFont;
  margin-left: 25px;
}
nav{
  margin-left: 25px;
}
@font-face {
    font-family: 'MyWebFont2';
    src: url('DIGITALDREAM.woff2') format('woff2'),
         url('DIGITALDREAM.woff') format('woff'),
		 url('DIGITALDREAM.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  h2{
    font-family: MyWebFont2;
    margin-top: 10px;
  }

main{
  width: 100%;
  margin: 0 auto;
  background-color:#ccc;
}

a:hover{
  text-decoration: underline;
  color: #0468BF;
  font-weight: bold;
}

div#container{
  width:80%;
  height:800px;
  margin:0 auto;
  background-color:#ccc;
  position:relative;
}