html, body { color: #fcfdf3; margin: 1rem; padding: 0; } html { font-family: Montserrat, "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; overflow-y: auto; } body { background-color: #acbb21; } a { -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; transition: color 0.2s ease-out; color: #fcfdf3; } a:hover { color: #6b7515; } h1 { font-size: 9rem; } h2 { font-size: 3rem; font-weight: normal; } h3 { font-size: 2rem; font-weight: normal; } @media screen and (max-width: 992px) { h1 { font-size: 15vw; } h2 { font-size: 2.5rem; } } img.portrait { box-sizing: border-box; border-radius: 50%; border: 10px solid #fcfdf3; margin: 2em 3em; width: 100%; height: auto; max-width: 300px; max-height: 300px; } .column { flex: 1; } main .block { display: flex; } main .block.introduction { margin-top: 20vh; min-height: calc(100vh - 20vh); } main .column.left { text-align: end; } main .column.right h1 { margin-left: -10px; /* Correction for margin of leftmost character. */ margin-bottom: 0.4em; } main .column.right h2 { margin-left: -4px; /* Correction for margin of leftmost character. */ margin-top: 0; } main .column.right .links { margin-top: 2.5rem; font-size: 1.5rem; } main .column.right .links a { margin-right: 0.5rem; text-decoration: none; } @media screen and (max-width: 992px) { main .block { flex-direction: column; } main .block.introduction { margin-top: 0; } main .column.left { text-align: center; } main .column.right h1 { margin-top: 0; } main img.portrait { margin: 0; } } footer { display: flex; margin-top: 3rem; font-size: 0.75rem; } @media screen and (max-width: 992px) { footer { flex-direction: column; } } /*# sourceMappingURL=style.css.map */