website-2018/css/responsive.css

@media screen and (max-width: 480px) {
    #dome {
        display: none;
    }
    #banner > h1 {
        display: none;
    }
    #wrapper {
        top: 48px;
    }
}

@media screen and (max-width: 950px) {
    #intro-text,
    #intro-image,
    #tweets,
    #tweets,
    #feedback {
        width: 100%;
    }
    #letter {
        font-size: 1.4em;
    }
    #dome:after {
        background-position-y: 5vh;
        background-size: 100%;
    }
    #banner {
        height: 48px;
        display: block;
        top: 0;
        position: fixed;
    }
    #menu-toggle {
        position: absolute;
        left: 0;
    }
    #banner>h1 {
        position: absolute;
        left: 48px;
        width: calc(100% - 48px);
        height: 100%;
        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: 10vh;
        display: block;
        position: fixed;
        z-index: 2;
    }
    #menu-toggle {
        display: block;
    }
}

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