.roboto- { font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 100; font-style: normal; font-variation-settings: "wdth" 100; } body { background-color: blue; font-family: 'Roboto', sans-serif; } .slow_text{ color: white; font-size: 40px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 25px; margin-top: 250px; margin-bottom: 30px; margin-right: 100px; margin-left: 100px; border-radius: 10px; animation: fade 2s; text-align: center } @keyframes fade { 0% {opacity: 0%} 50% {opacity: 0%} 100% {opacity: 100%} } .questions{ color: white; font-size: 15px; padding-top: 15px; padding-right: 15px; padding-bottom: 20px; padding-left: 0px; margin-top: 80px; margin-bottom: 30px; margin-right: 10px; margin-left: 400px; text-align: right } .questions p { opacity: 0; } .questions p:nth-child(1) { animation: change 1s ease-in-out forwards; animation-delay: 2.5s; } .questions p:nth-child(3) { animation: change 1s ease-in-out forwards; animation-delay: 5s; } .questions p:nth-child(2) { animation: change 1s ease-in-out forwards; animation-delay: 7.5s; } @keyframes change { to { opacity: 1 } } a { color: white; animation: fade 17s; } @keyframes endfade { 0% {opacity: 0%} 95% {opacity: 0%} 100% {opacity: 100%} }