@keyframes slide1 { from { opacity: 0; margin-left: -50vmin; filter: blur(5px); } to { opacity: 1; margin-left: 0; filter: blur(0px); } } @keyframes slide2 { from { opacity:0; margin-top: -30px; scale: 0.8; filter: blur(5px); } to { opacity: 1; margin-top: 30px; scale: 1; filter: blur(0px); } } @keyframes moveBackground { from { background-position-x: 0%; } to { background-position-x: 500%; } } .rainbowText { background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 500%, 100%; animation: moveBackground 20s linear infinite; } .ownRainbow { background-image: linear-gradient(-45deg, hsl(360, 100%, 60%) 10%, hsl(270, 100%, 60%), rgb(51, 139, 255) 50%, hsl(270, 100%, 60%) 70%, hsl(360, 100%, 60%) 100%); } .Quote { margin: auto; margin-top: 30px; padding: 20px; /* padding-top:15px; */ /* padding-left:20px; */ background-color: #1e1e2b; color: white; font-size: 14pt; font-family: 'Consolas'; -webkit-box-shadow: 0px 5px 0px 0px #1a1a25; -moz-box-shadow: 0px 5px 0px 0px #1a1a25; box-shadow: 0px 5px 0px 0px #1a1a25; border: 0px white solid; border-radius: 10px; /* max-width:850px; */ /* min-height:312px; */ max-width:600px; margin-bottom: 50px; opacity:0; margin-top: -30px; scale: 0.8; filter: blur(5px); animation-name: slide2; animation-duration: 1s; animation-delay: .3s; animation-fill-mode: forwards; user-select: none; } .Block { max-width:500px; padding: 25px; background-color: #383055; border: 0px white solid; border-radius: 10px; box-shadow: 0px 5px 0px 0px #61509c inset; -webkit-box-shadow: 0px 5px 0px 0px #61509c inset; -moz-box-shadow: 0px 5px 0px 0px #61509c inset; /* float:left; */ /* margin-right:20px; */ } .Image { border: 0px white solid; border-radius: 10px; /* float:left; */ } .bigboiheader { display: block; /* color: #fff; */ font-size: 18vmin; line-height: 1; margin: 0; margin-top: 10vmin; /* margin-left: 25vw; */ font-family: 'Mangabey'; /* animation-name: slide1; animation-duration: 1s; animation-delay: .2s; animation-timing-function: ease; animation-fill-mode: forwards; */ /* opacity: 0; filter: blur(5px); */ user-select: none; z-index: 1; color: rgba(255,255,255,0.5); } .anime { animation-name: slide1; animation-duration: 1s; animation-delay: .2s; animation-timing-function: ease; animation-fill-mode: forwards; opacity: 0; filter: blur(5px); margin-left: 25vw; } .funyheader { display:block; margin: auto; text-align: center; z-index: 1; } .Link { color: #fff; background-color: #353549; padding-top: 2.5px; padding-bottom: 2.5px; padding-left: 10px; padding-right: 10px; border-radius: 10px; line-height: 1; transition: all .2s ease; } .Link:hover { color: #000; background-color: #626286; }