website-2018/css/responsive.css

@media screen and (max-width: 500px) {
    ul {
        margin: 0 10vw;
    }
    #dome {
        display: none;
    }
    #wrapper {
        min-height: calc(100vh - 90px - 2.75em);
    }
    #wrapper,
    footer {
        top: 48px;
    }
    #intro-text {
        margin: 0 5vw;
    }
    .officers-intro,
    .excomm-intro,
    .senator-intro,
    .sponsor-intro {
        margin: 7vw;
    }
    nav#menu {
        overflow: hidden;
    }
}
@media screen and (max-width: 700px) {
    #banner > h1 {
        display: none;
    }
}

@media screen and (max-width: 1150px) {
    #dome:after {
        background-position-y: 1vh;
        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);
    }
    #banner #logo {
        display: none;
    }
    #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: rgb(118, 23, 33);
    }
    button.menu-item:active {
        font-size: 1.1em;
    }
    nav#menu {
        width: 30vw;
        height: 100vh;
        top: 0;
        left: -30vw;
        padding-top: 48px;
        display: block;
        position: fixed;
        z-index: 2;
        transition: all 130ms ease;
    }
    #menu-toggle {
        display: block;
    }
    .officers-intro,
    .excomm-intro,
    .senator-intro,
    .sponsor-intro {
        flex-basis: calc(50% - 4vw);
    }
    #intro-image {
        margin: 0 2vw;
    }
    #intro-image > img {
        margin-top: 1.2em;
    }
    #tweets, #feedback {
        margin: 0 2vw;
    } 
}

@media screen and (max-width: 1000px) {
    #intro-text,
    #intro-image,
    #tweets,
    #feedback,
    .list,
    .links {
        width: 100%;
    }
    section {
        max-width: 750px;
    }
    #banner > h1 {
        font-size: 40px;
    }
}

@media screen and (min-width: 1150px) {
    #intro-text,
    #intro-image,
    .list,
    .links {
        max-width: 550px;
    }
    .list>ul {
        margin: 0 5vw;
    }
    .desc,
    .list>ul {
        font-size: 1.3em;
    }
    #dome:after {
        background-position-y: 10vh;
    }
    /*.officers-intro, .excomm-intro, .senator-intro, .sponsor-intro {
        flex-basis: calc(35% - 4vw);
    }*/
}

@media screen and (min-width: 1800px) {
    #intro-text,
    #intro-image,
    #tweets,
    #feedback,
    .list,
    .links {
        width: 100%;
    }
    #letter {
        font-size: 1.4em;
    }
    #excomm-desc,
    #senators-desc,
    #sponsors-desc {
        margin: 0 20vw;
    }
}