website-2018/css/responsive.css

@media screen and (max-width: 480px) {
    #dome {
        display: none;
    }
    #banner>h1 {
        display: none;
    }
    #wrapper,
    footer {
        top: 48px;
    }
    #intro-text {
        margin: 0 5vw;
    }
}

@media screen and (max-width: 1100px) {
    #dome:after {
        background-position-y: 5vh;
        background-size: 100%;
    }
    #banner {
        height: 48px;
        display: block;
        top: 0;
        position: fixed;
        box-shadow: 0 28rem 79rem 0 rgba(91, 194, 182, .08), 0 40rem 32rem 0 rgba(0, 0, 0, .04);
    }
    #menu-toggle {
        position: absolute;
        left: 0;
    }
    #banner>h1 {
        position: absolute;
        left: 48px;
        width: calc(100% - 48px);
        height: 100%;
        font-size: 200%;
        overflow: hidden;
    }
    #menu>a {
        width: 100%;
        height: 10vh;
        flex-basis: auto;
    }
    button.menu-item {
        font-size: 1.2em;
        width: 100%;
        height: 100%;
    }
    button.menu-item:hover {
        color: #fff;
        background-color: #7f0000;
    }
    button.menu-item:active {
        font-size: 1.1em;
    }
    nav#menu {
        width: 30vw;
        height: 100vh;
        top: 0;
        left: -30vw;
        padding-top: 5vh;
        display: block;
        position: fixed;
        z-index: 2;
    }
    #menu-toggle {
        display: block;
    }
}

@media screen and (max-width: 1000px) {
    #intro-text,
    #intro-image,
    #tweets,
    #feedback {
        width: 100%;
    }
    section {
        max-width: 750px;
    }
    .officers-intro {
        width: 90vw;
    }
    .offiers-image {
        width: 45%;
    }
}

@media screen and (min-width: 1100px) {
    #intro-text,
    #intro-image,
    #tweets,
    #feedback {
        max-width: 550px;
    }
}

@media screen and (min-width: 1800px) {
    #letter {
        font-size: 1.4em;
    }
}