html.barebones, body.barebones { background-color: var(--background-color); text-align: center; } h1.socialTitle { padding-top: 0; margin-top: 0; font-size: 2.5em; } img.profilePic { max-width: 10em; border-radius: 50%; border: solid 5px var(--text-color); } p.page-block.nodropcap { margin-top: 0; } ul.socialLinks { padding-left: 0; display: flex; flex-flow: column nowrap; align-items: center; } .socialLinks a { background-color: var(--color-gray-90); border-radius: var(--corner-radius); padding: .5em; margin-bottom: 1em; list-style-type: none; transition: var(--transition-normal); width: 20em; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; text-decoration: none; color: var(--background-color); } .socialLinks a:hover { background-color: var(--contrast-color); transform: scale(1.05, 1.05); } .socialLinks a li img { max-width: 1em; margin-right: .5em; filter: var(--icon-filter); } } li.iconButton { color: var(--background-color); } @media(max-width: 556px) { .socialLinks a { width: 90vw; height: 3rem; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; } } @media (prefers-color-scheme: dark) { .socialLinks a li img { filter: auto; } }