body,
html {
    margin: 0;
    padding: 0;
    border: 0;
}
a {
    outline: 0;
}
div#aboutme {
    position: absolute;
    margin-left: 50%;
    width: 800px;
    left: -400px;
}
div#background {
    position: absolute;
    height: 1600px;
    width: 100%;
    top: 0;
    left: 0;
    background: url(../img/background/chalkboard.jpg) top center no-repeat;
}
h1 {
    background-image: url(../img/title/pottersclass.png);
    height: 94px;
    width: 800px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin: 3em auto 1em;
    text-align: center;
    opacity: 0.75;
}
div#bio,
div#resume,
div#statement {
    margin: 3em;
    display: block;
    position: relative;
}
div#bio {
    width: 123px;
}
.bio {
    display: block;
    width: 123px;
    height: 90px;
    text-decoration: none;
    opacity: 0.5;
    background: url(../img/aboutme/bio.png) no-repeat;
}
.bio:hover {
    opacity: 1;
    background-position: -123px 0;
}
div#resume {
    width: 259px;
}
.resume {
    display: block;
    width: 259px;
    height: 98px;
    text-decoration: none;
    opacity: 0.5;
    background: url(../img/aboutme/resume.png) no-repeat;
}
.resume:hover {
    opacity: 1;
    background-position: -259px 0;
}
div#statement {
    width: 590px;
}
.statement {
    display: block;
    width: 590px;
    height: 91px;
    text-decoration: none;
    opacity: 0.5;
    background: url(../img/aboutme/statement.png) no-repeat;
}
.statement:hover {
    opacity: 1;
    background-position: -590px 0;
}
@media screen and (max-width: 799px) {
    div#aboutme {
        position: absolute;
        width: 100%;
        left: 0;
        margin: 0;
    }
    h1 {
        background-image: url(../img/title/pottersclass-small.png);
        height: 76px;
        width: 300px;
    }
    div#bio,
    div#resume,
    div#statement {
        width: 300px;
        margin: 2em auto;
    }
    .bio,
    .resume,
    .statement {
        position: relative;
        display: block;
        width: 100%;
        text-decoration: none;
        opacity: 0.5;
    }
    .bio:hover,
    .resume:hover,
    .statement:hover {
        opacity: 1;
        background-position: 0 0;
    }
    .bio {
        height: 62px;
        background: url(../img/aboutme/bio-small.png) no-repeat;
    }
    .statement {
        height: 44px;
        background: url(../img/aboutme/statement-small.png) no-repeat;
    }
    .resume {
        height: 52px;
        background: url(../img/aboutme/resume-small.png) no-repeat;
    }
}