@font-face { font-family: DIN-Bold; src: url('/font/din-bold.woff'); }
@font-face { font-family: DIN; src: url('/font/din-reg.woff'); }

body {
    margin: 0;
    padding: 0;
    font-family: DIN;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
    background: #8EB5C4;
}

#logo {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 350px;
}

#main {
    position: absolute;
    top: 247px;
    left: 450px;
    line-height: 2em;
}

h1 {
    font-size: 24px;
}

strong {
    font-family: DIN-Bold;
    font-size: 1.15em;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: #333;
    border: none;
    text-shadow: rgba(255, 255, 255, 0.5) 0 -1px 0, rgba(0, 0, 0, 0.75) 0 1px 1px;
}

ul {
    margin-top: 0.5em;
    font-size: 24px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    #logo, #main {
        position: static;
    }

    #logo {
        display: block;
        width: 175px;
        margin: 25px 0 0 50px;
    }

    #main {
        padding: 25px 0 25px 50px;
    }

    h1 strong {
        display: block;
    }
}