body { margin: 0; height: 100%; font-family: 'Open Sans Condensed', sans-serif; } main { display: flex; justify-content: space-around; align-items: center; flex-direction: column; height: calc(100vh - 2em); padding: 1em 0; } #backdrop { font-size:60vh; position: absolute; z-index: -100; color: rgb(54, 193, 82); opacity: 0.1; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); text-transform: uppercase; animation-name: init_me2; animation-duration: 0.75s; animation-timing-function:cubic-bezier(0,1.46,.9,.96); animation-fill-mode: forwards; } #me { max-height: 60vh; max-width: 80vw; border-radius: 50%; background-color: rgb(54, 193, 82); animation-name: init_me; animation-delay: 0.5s; animation-duration: 0.75s; animation-timing-function:cubic-bezier(0,1.46,.9,.96); animation-fill-mode: forwards; transform: scale(0); } h1, h2 { animation-name: init_me; animation-delay: 0.5s; animation-duration: 0.75s; animation-timing-function:cubic-bezier(0,1.46,.9,.96); animation-fill-mode: forwards; transform: scale(0); text-align: center; } h1 { font-size: 1.6em; } h1 span { color: rgb(54, 193, 82); font-weight: bold; text-transform: uppercase;} h2 { font-size: 1.4em; } h2 span { color: rgb(54, 193, 82); font-weight: bold;} #links { width: 50%; display: flex; justify-content: center; animation-name: init_me; animation-delay: 1.25s; animation-duration: 0.25s; animation-fill-mode: forwards; transform: scale(0); } #links a { color: inherit; margin: 0.25em; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 0 calc(100%/5 - 0.5em); } #links svg { color: rgb(54, 193, 82); } @keyframes init_me { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes init_me2 { 0% { transform: translate(-50%, -50%) scale(0); } 100% { transform: translate(-50%, -50%) scale(1); } } @media screen and (max-width: 360px) { body { overflow-x: hidden; } #links a svg.fa-3x { font-size: 2em; } }