* { font-family: Montserrat, sans-serif; } html { font-size: 62.5%; box-sizing: border-box; } body, html { height: auto; min-height: 100vh; } body { margin: 0; padding: 0; font-size: 1.6rem; color: #eee; background: linear-gradient(to bottom, #000, #1f1f1f 100%); background-repeat: no-repeat; position: relative; } h1, h2, h3 { text-align: center; margin: 0; } h1 { padding: 0; font-size: 3rem; } h2 { padding: 1rem 0 0 0; font-size: 2.4rem; } h3 { padding: 1.6rem 0 5rem 0; font-size: 1.6rem; } a { all: unset; cursor: pointer; } ul { margin: 0; padding-left: 0; } li { list-style: none; } em { padding-right: 2rem; } .align-center, .justify-center { display: flex; } .justify-center { justify-content: center; } .align-center { align-items: center; } .header { padding: 20rem 0 0 0; } .main { padding: 0 0 20rem 0; } .footer { background-color: #525252; position: absolute; right: 0; bottom: 0; left: 0; } .flex-center { width: 100%; min-height: 50vh; background: #000; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .icon-3d { padding: 10px; -webkit-animation: icon3d .2s 10; animation: icon3d .2s 10; color: #fff; } .icon-3d:hover { -webkit-animation: icon3d .2s infinite; animation: icon3d .2s infinite; } .wait { cursor: wait !important; } @keyframes icon3d { 0% { text-shadow: 5px 4px #f44336, -5px -6px #2196f3; } 25% { text-shadow: -5px -6px #f44336, 5px 4px #2196f3; } 50% { text-shadow: 5px -4px #f44336, -8px 4px #2196f3; } 75% { text-shadow: -8px -4px #f44336, -5px -4px #2196f3; } 100% { text-shadow: -5px 0 #f44336, 5px -4px #2196f3; } }