.hero { display: block; width: 100%; height: 28rem; overflow: hidden; position: relative; border-left: none; border-right: none; @media screen and (max-width: 800px) { height: 14rem; } } .hero::before { position: absolute; content: ""; // we do a little heisenberg background: url(https://media1.tenor.com/images/9e70091410c7b3dd14ecfa09e14aaed2/tenor.gif?itemid=11390952); filter: blur(0.25rem) brightness(50%); transform: scale(1.1); background-size: cover; background-position: 0 -14rem; left: 0; top: 0; width: 100%; height: 100%; } .heroinside { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; @media screen and (max-width: 800px) { transform: scale(0.85); } } .actualsplash { user-select: none; opacity: 0; &.doneLoading { opacity: 1; animation-name: goIn; animation-duration: 350ms; } &:hover { cursor: pointer; } } .statscontainer { background: var(--black1); box-shadow: var(--shadow0); } .stats { display: flex; flex-direction: row; justify-content: center; article { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--grey); padding: 0 4rem; border-top: none; border-bottom: none; font-size: 1.35em; text-align: center; h1 { font-size: 2em; min-height: 1em; opacity: 0; &.doneLoading { opacity: 1; animation-name: goIn; animation-duration: 350ms; } } &:first-of-type { border-left: none; } &:last-of-type { border-right: none; } } @media screen and (max-width: 800px) { padding-top: 0; flex-direction: column; article { font-size: 1em; padding: 0.5rem 0; border: 1px solid var(--grey); border-left: 0; border-right: 0; border-top: 0; &:first-of-type { padding-top: 0; border-top: 0; } &:last-of-type { padding-bottom: 0; border-bottom: 0; } } } } @keyframes goIn { from { opacity: 0; transform: translate(0, 20px); } to { opacity: 1; } }