@font-face {
    font-family: Lato;
    src: url('Lato.ttf');
}
body {
    background: #FF88DD;
    font: 16pt/18pt Lato,Verdana,'sans-serif';
    margin: 0 auto;
    width: 800px;
    max-width: 95%;
}
main {
    padding: 5px 10px;
}
aside {
    padding: 5px 10px;
    border-radius: 15px;
    background: #FF8800;
    color: #553377;
}
footer {
    width: 100%;
    padding: 5px 10px;
    margin: 10px auto;
    border-radius: 15px;
    background: #553377;
    color: #FF88DD;
}
footer ul {
    list-style: none;
    padding-left: 0;
}
footer ul li {
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    width: 29%;
    text-align: center;
}
img {
    max-width: 95%;
    border-radius: 5px;
    border: 2px solid #EEE;
}
a {
    color: #FF8800;
    text-shadow: #EEE 1px 1px 1px;
}
a:visited {
    color: #CC7700;
}
a:hover, a:visited:hover {
    color: #FF88DD;
}
.box {
    text-align: center;
    max-width: 85%;
    width: 500px;
    margin: 250px auto 0;
    padding: 5px 10px;
    border-radius: 15px;
    border: 5px solid #FF8800;
    color: #FF88DD;
    background: #553377;
}

@media (min-width: 900px) {
    body>header h1, body>header h3 {
        display: inline-block;
        vertical-align: bottom;
    }
    body>header h1 {
        margin-right: 275px;
    }
    main, aside {
        display: inline-block;
        vertical-align: top;
    }
    main {
        width: 60%;
    }
    aside {
        width: 34%;
    }
}