$pink: #ff0091; $regular: #fff; $dark: #1f1f1f; body, html { background-color: $dark; font-family: helvetica, sans-serif; width: 100%; height: 100%; margin: 0; padding: 0; } @media (max-width: 800px) { .cont { display: block !important; width: 100%; .teacup { height: auto !important; img { margin-right: 20%; width: 40% !important; height: auto !important; padding-top: 1em; padding-bottom: 1em; } } .stuffarea { margin-left: 10%; padding-right: 0 !important; width: 80% !important; height: auto !important; ul.navbar { padding: 0 !important; padding-left: 0.5em !important; } } } } .cont { display: inline-flex; flex-direction: row; width: 100%; height: 100%; .teacup { flex: auto; height: 100%; text-align: center; display:flex; justify-content:center; align-items:center; background-color: $dark - #040404; img { width: 75%; max-height: 100%; height: auto; } } .stuffarea { width: 45%; height: 100%; padding-left: 5%; padding-right: 5%; margin-bottom: 10%; overflow-y: auto; .hiddenarea { visibility: hidden; height: 0; width: 0; overflow: hidden; margin: 0; padding: 0; } div { margin: 0; padding: 0; padding-bottom: 15%; } @for $i from 1 through 6 { h#{$i} { margin: 0; color: $pink; } } h2.blogtitle { padding: 0.5em; color: $pink; transition: 0.2s; margin: 0; } h2.blogtitle:hover { cursor: pointer; background-color: $dark - #060606; transition: 0.2s; } a { color: $pink; } .timestamp { color: $dark + #444; vertical-align: middle; font-size: 15px; } p { color: $regular; } li { color: $regular; } ul.navbar { padding-left: 1em; list-style: none; white-space: nowrap; padding-bottom: 1em; a:focus { outline: none; font-style: none; border: none; } li { display: inline-block; padding: 0.5em; background-color: $dark; margin: -3px; transition: 0.2s; color: $regular - #222; border-right: 2px solid $dark + #111; transform: skewX(-20deg); .button { transform: skewX(20deg); } } li:first-of-type { border-left: 2px solid $dark + #111; } li:hover { background-color: $dark + #111; transition: 0.2s; cursor: pointer; } li.active { background-color: $dark + #060606; } li.active:hover { background-color: $dark + #060606 + #111; } } iframe.itch-embedded { width: 100%; } } } noscript { color: $regular; }