body, html { background-color: #1f1f1f; font-family: helvetica, sans-serif; width: 100%; height: 100%; margin: 0; padding: 0; } @media (max-width: 800px) { .cont { display: block !important; width: 100%; } .cont .teacup { height: auto !important; } .cont .teacup img { margin-right: 20%; width: 40% !important; height: auto !important; padding-top: 1em; padding-bottom: 1em; } .cont .stuffarea { margin-left: 10%; padding-right: 0 !important; width: 80% !important; } .cont .stuffarea ul.navbar { padding: 0 !important; padding-left: 0.5em !important; } } .cont { display: inline-flex; flex-direction: row; width: 100%; height: 100%; } .cont .teacup { flex: auto; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center; background-color: #1b1b1b; } .cont .teacup img { width: 75%; max-height: 100%; height: auto; } .cont .stuffarea { width: 45%; height: 100%; padding-left: 5%; padding-right: 5%; } .cont .stuffarea .hiddenarea { visibility: hidden; height: 0; width: 0; overflow: hidden; margin: 0; padding: 0; } .cont .stuffarea div { margin: 0; padding: 0; } .cont .stuffarea h1 { margin: 0; color: #ff0091; } .cont .stuffarea p { color: #fff; } .cont .stuffarea ul.navbar { padding-left: 1em; list-style: none; white-space: nowrap; padding-bottom: 1em; } .cont .stuffarea ul.navbar a:focus { outline: none; font-style: none; border: none; } .cont .stuffarea ul.navbar li { display: inline-block; padding: 0.5em; background-color: #1f1f1f; margin: -3px; transition: 0.2s; color: #dddddd; border-right: 2px solid #303030; transform: skewX(-20deg); } .cont .stuffarea ul.navbar li .button { transform: skewX(20deg); } .cont .stuffarea ul.navbar li:first-of-type { border-left: 2px solid #303030; } .cont .stuffarea ul.navbar li:hover { background-color: #303030; transition: 0.2s; cursor: pointer; } /*# sourceMappingURL=main.css.map */