:root 
{
    --header-image: url("Visuals/apple/appleheader.gif");
    --body-bg-image: url('Visuals/apple/applebg.jpg');
    --content: #b87a7a;
}
@font-face 
{
    font-family: 'semisonicregular';
    src: 
         url('fonts/Semisonic.eot')
         url('fonts/semisonic-webfont.woff') format('woff'),
         url('fonts/semisonic-webfont.woff2') format('woff2'),
         url('fonts/Semisonic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
html
{
  background-image: var(--body-bg-image);
  background-size: 100px;
  background-attachment: fixed;
}
#background
{
  width: 85%;
  margin: auto;
  background: #fccccc;
  background-attachment: fixed;
}
body 
{
  text-align: center;
  color: #fccccc;
  font-family: Bookman;
}
#container
{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
a 
{
    color: #ff6f6f;
    font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
}
#header 
{
    width: 100%;
    background-color: #451414;
                /* header color here! */
    height: 150px;
    background-image: var(--header-image);
    background-size: 100%;
    margin: auto;

}
#flex 
{
    display: flex;
}
aside 
{
    background-color: #451414;
    width: 200px;
    padding: 20px;
    order: 1;
    padding: 12px 19px;
    margin: 10px 5px 10px 10px;
    min-height:700px;
}
main 
{
    background-color: #6e2525;
    flex: 1;
    padding: 20px;
    order: 2;
    padding: 12px 19px;
    margin: 10px 10px 10px 5px;
    min-height:700px;
}
h1,h2,h3 
{
    color: #fc9d9d;
}
hr 
{
    border:0;
    height: 20px;
    background: url("Visuals/apple/applehr.gif");
    background-size: 16px;
}