@media screen and (max-width: 500px) { ul { margin: 0 10vw; } #dome { display: none; } #banner>h1 { 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: 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: 48px; display: block; position: fixed; z-index: 2; } #menu-toggle { display: block; } .officers-intro, .excomm-intro, .senator-intro, .sponsor-intro { flex-basis: calc(50% - 4vw); } } @media screen and (max-width: 1000px) { #intro-text, #intro-image, #tweets, #feedback, .list, .links { width: 100%; } section { max-width: 750px; } } @media screen and (min-width: 1100px) { #intro-text, #intro-image, #tweets, #feedback, .list, .links { max-width: 550px; } .list>ul { margin: 0 5vw; } .desc, .list>ul { font-size: 1.3em; } /*.officers-intro, .excomm-intro, .senator-intro, .sponsor-intro { flex-basis: calc(35% - 4vw); }*/ } @media screen and (min-width: 1800px) { #letter { font-size: 1.4em; } #excomm-desc, #senators-desc, #sponsors-desc { margin: 0 20vw; } }