* { box-sizing: border-box; text-align: justify; font-family: Roboto; } body { margin: 0; padding: 0; color: #FFF; } .top-body { display: flex; } .left-pane { width: 60%; background-color: #121212; } .right-pane { position: fixed; right: 0; width: 40%; background-image: url("images/abstract_squares.jpg"); background-size: cover; height: 100vh; display: flex; align-items: flex-end; justify-content: flex-start; } .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3em; } .title-image { width: 400px; } h1 { font-family: D3 Euronism; font-weight: 100; font-size: 4em; line-height: 0; } a.icon { margin: 0.1em; background-color: #325090; color: #FFF; border-radius: 50%; font-size: 3em; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; vertical-align: center; } a.icon:hover { color: #325090; background-color: #FFF; } .selectors { position: fixed; right: 0; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-end; } .selector { background-color: #325090; color: #FFF; border-radius: 10% 0 0 10%; width: 15em; margin-right: -12em; text-align: left; padding: 0; transition-property: all; transition-duration: 0.2s; } .selector i { margin-left: 1em; height: 4em; line-height: 4em; font-size: 1.5em; } .selector span { display: none; font-size: 1.5em; height: 4em; line-height: 4em; } .selector:hover span { display: inline-block; } .selector:hover { width: 15em; padding: 0 1em; text-align: center; padding: 0; border-radius: 10% 0 0 10%; transition-property: all; transition-duration: 0.2s; margin-right: 0; color: #325090; background-color: #FFF; } .selector:hover i { display: none; } @media (max-width: 900px) { .right-pane { position: absolute; width: 100vw; height: 3em; background-color: #325090; background-image: none; } a.icon { font-size: 2em; width: 1.5em; height: 1.5em; line-height: 1.5em; } .left-pane { width: 100vw; } .selectors { display: none; } }