* {
			font-family: "Source Sans Pro", sans-serif;
		}

		:root {
		    --bg: #f0f3f6;
		    --aninumber1-delay: 2.7s;
		}

		body {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    height: 100vh;
		    overflow: hidden;
		    background: var(--bg);
		}

		.content {
		    user-select: none;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -60%);
		}

		.content h1 {
		    position: relative;
		    display: flex;
		    flex-direction: row;
		    justify-content: center;
		    align-items: center;
		}

		.content span {
		    font-size: 250px;
		    font-weight: 900;
		    color: var(--bg);
		    text-shadow: -5px 4px 17px #ced0d3;
		}

		.content span:nth-child(1) {
		    transform: translate(-635px, 0px);
		    animation: aninumber1 2s ease-out var(--aninumber1-delay) forwards;
		}

		@keyframes aninumber1 {
		    0% {
		        transform: translate(-635px, 0px);
		    }

		    50% {
		        transform: translate(0px, 0px);
		    }

		    65% {
		        transform: translate(15%, 0px);
		    }

		    75% {
		        transform: translate(0px, 0px);
		    }

		    85% {
		        transform: translate(-35%, 0px);
		    }

		    100% {
		        transform: translate(0px, 0px);
		    }
		}

		.content span:nth-child(2) {
		    transform: translate(0px, -635px);
		    animation: aninumber2 2s ease-out var(--aninumber1-delay) forwards;
		}

		@keyframes aninumber2 {
		    0% {
		        transform: translate(0px, -635px);
		    }

		    50% {
		        transform: translate(0px, 0px);
		        font-size: 250px;
		    }

		    65% {
		        transform: translate(0px, 0px);
		        font-size: 0px;
		    }

		    75% {
		        transform: translate(0px, 0px);
		        font-size: 250px;
		    }

		    85% {
		        transform: translate(0px, 0px);
		        font-size: 315px;
		    }

		    100% {
		        transform: translate(0px, 0px);
		        font-size: 250px;
		    }
		}

		.content span:nth-child(3) {
		    transform: translate(635px, 0px);
		    animation: aninumber3 2s ease-out var(--aninumber1-delay) forwards;
		}

		@keyframes aninumber3 {
		    0% {
		        transform: translate(635px, 0px);
		    }

		    50% {
		        transform: translate(0px, 0px);
		    }

		    65% {
		        transform: translate(-15%, 0px);
		    }

		    75% {
		        transform: translate(0px, 0px);
		    }

		    85% {
		        transform: translate(35%, 0px);
		    }

		    100% {
		        transform: translate(0px, 0px);
		    }
		}

		.sometxt {
		    position: absolute;
		    font-size: 30px;
		    font-weight: 900;
		    width: 420px;
		    text-align: center;
		    bottom: -500px;
		    color: var(--bg);
		    text-shadow: 0px 0px 8px #ced0d3;
		    animation: sometxt 1s ease-out 5s forwards;
		}

		@keyframes sometxt {
		    0% {
		        bottom: -500px;
		    }

		    100% {
		        bottom: 50px;
		    }
		}

		.sometxt button {
		    position: absolute;
		    transform: translate(-50%, -50%);
		    cursor: pointer;
		    padding: 5px 20px 10px 20px;
		    background: var(--bg);
		    border-radius: 50px;
		    box-shadow: -5px -5px 10px #fff,
		        5px 5px 20px #BABECC;
		    text-decoration: none;
		    color: transparent;
		    text-shadow: 1px 2px 1px #ced0d3d8;
		    transition: 1s;
		    animation: sometxtlink 1s ease-out 5.5s forwards;
		}

		@keyframes sometxtlink {
		    0% {
		        bottom: -500px;
		    }

		    100% {
		        bottom: -60px;
		    }
		}