@media only screen and (min-width: 550px)   
{    
    * {margin: 0;}
    
    /* HEADER */    
    
    div#header {
        position: relative;
        background-color: skyblue;
        height: 150px;
        text-align: center;
        font-size: 20px;
        color: white;
    }
    div#header img {
        float: left;
        height: 140px;
        padding-left: 8px;
        padding-top: 5px;
    }
    
    /* MENU */
    
    div#menu {
        position: relative;
        height: 950px;
        width: 120px;
        background-color: #1e85ae;
        text-align: center;
    }
    div#menu a {
        text-decoration: none;
        color: mediumspringgreen;
        font: 16pt strong Tahoma,Geneva,sans-serif;
        text-align: center;
        display: block;
        padding: 15px;
    }
    div#menu a:hover {
        color: #1e85ae;
        background-color: mediumspringgreen;
    }
    div#menu a::before {content: "["}
    div#menu a::after {content: "]"}
    
    /* CONTENT*/

    div#content {
        background-color: mediumaquamarine;
        position: relative;
        margin-left: 120px;
        margin-top: -950px;
        border: 0;
        height: 950px;
        overflow: scroll;
    }
    div#content img {
        width: 75%;
    }
    
    /* FOOTER */    
    
    div#footer {
        background-color: forestgreen;
        color: white;
        text-align: center;
        position: relative;
    }
    
    /* OTHER */
    
    h1 {
        padding-top: 50px;
    }
    p {
        font-family: serif;
        font-size: 16pt;
    }
    h2 {
        font-weight: bold;
        text-decoration: underline;
        font-size: 22pt;
        padding: 3px;
    }
}


@media only screen and (max-width: 549px)   
{    
    * {margin: 0;}
    
    /* HEADER */    
    
    div#header {
        position: relative;
        background-color: skyblue;
        height: 110px;
        text-align: center;
        font-size: 20px;
        color: white;
    }
    div#header img {
        float: left;
        height: 100px;
        padding-left: 8px;
        padding-top: 5px;
    }
    
    /* MENU */
    
    div#menu {
        position: relative;
        height: 750px;
        width: 100px;
        background-color: #1e85ae;
        text-align: center;
    }
    div#menu a {
        text-decoration: none;
        color: mediumspringgreen;
        font: 16pt strong Tahoma,Geneva,sans-serif;
        text-align: center;
        display: block;
        padding: 15px;
    }
    div#menu a:hover {
        color: #1e85ae;
        background-color: mediumspringgreen;
    }
    div#menu a::before {content: "["}
    div#menu a::after {content: "]"}
    
    /* CONTENT*/

    div#content {
        background-color: mediumaquamarine;
        position: relative;
        margin-left: 100px;
        margin-top: -750px;
        border: 0;
        height: 750px;
        overflow: scroll;
    }
    div#content img {
        width: 60%;
    }
    
    /* FOOTER */    
    
    div#footer {
        background-color: forestgreen;
        color: white;
        text-align: center;
        position: relative;
    }
    
    /* OTHER */
    
    h1 {
        padding-top: 30px;
    }
    p {
        font-family: serif;
        font-size: 13pt;
    }
    h2 {
        font-weight: bold;
        text-decoration: underline;
        font-size: 18pt;
        padding: 3px;
    }
}