.center-left { position: absolute; top: 40%; transform: translate(0, -50%); margin-left: 5%; } #rounded { width: 8em; vertical-align: middle; border-radius: 50%; margin-bottom: 1em; } #kittens { height: 30%; z-index: -1; position: fixed; bottom: 0; right: 5em; user-select: none; -webkit-user-select: none; } p { vertical-align: middle; } p, h1, h2 { margin: 0 2em; color: var(--accent); font-size: 1.8em; font-family: "Wenceslas", serif; } a { margin: 0 2em; font-size: 1.8em; font-family: "Wenceslas", serif; } h1 { font-size: 3em; } h2 { margin: 0 3em; font-size: 2em; font-style: italic; color: var(--accent-alt); } hr { margin: 0.5em 6em; border: 1px dashed var(--bg); filter: brightness(180%); } #links { max-inline-size: 35em; } span { font-size: 0.8em; font-style: italic; color: var(--accent-alt); } #quote { padding-left: 2em; } @media (min-width: 1000px) { p { display: inline-block; } #rounded { margin-bottom: 2em; } a { margin: 0 0.5em 0 0; } } @media (max-width: 1000px) { #rounded { display: block; margin-left: auto; margin-right: auto; } #links { margin: 0 0 0 3em; } a { margin: 0 0.5em 0 0; } .center-left { margin-left: auto; top: 2em; padding-bottom: 2em; transform: unset; } } @media (max-width: 500px) { #kittens { height: auto; width: 50%; } p, h1, #links { margin: 0 0.5em; } h2 { margin: 0 1em; } hr { margin: 0.5em 2em; } a, a:not(:first-child) { margin: 0 0.2em 0 0; } }