div.start { margin: 0 auto; padding: 50px 0px; background: transparent; display: flex; .left { flex: 45%; text-align: center; } .right { flex: 55%; } img { max-height: 7dh; max-width: 100%; } p, a{ color: $font_default; font-size: $font_size_default; } code { color: $font_accent_4; font-size: $font_size_code; } h2 { color: $font_accent_3; font-size: $font_size_h2; text-shadow: 0px 0px 1px black; } } .left { background: rgba(128,128,128,0.15); padding: 12px; box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1); } @media (max-width: $mobile_view) { div.start { display: initial; p, a{ font-size: $font_size_default_mobile; } code { font-size: $font_size_code_mobile; } .left, .right { text-align: center; margin-top: 40px; } img { max-height: 5dh; max-width: 90%; } } } @media (max-width: $tiny_view) { div.start { p, a{ font-size: $font_size_default_tiny; } } }