html { position: relative; /* Make the html element a positioned parent */ } html::before { /* Add a pseudo-element to the html element */ content: ""; position: fixed; width: 200vw; height: 200vh; top: -50vh; left: -50vw; right: 0; bottom: 0; z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */ background: url(bg-images/bg1.jpg) no-repeat center center fixed; background-size: 200%; /* Add animation properties */ -webkit-animation: spin 100s linear infinite; -moz-animation: spin 100s linear infinite; -ms-animation: spin 100s linear infinite; -o-animation: spin 100s linear infinite; animation: spin 100s linear infinite; } /* Define the spin animation */ @keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .top-left-corner{ position: fixed; top: 0px; left: 0px; transform: translate(-50%,-50%); width: 50vw; filter: hue-rotate(180deg); } #wheel{ text-align: center; } button{ color:antiquewhite; background-color:cyan; position: center; top:6%; left:50%; transform: translate(-50%,0); width: 100px; height:40px; position: relative; z-index: 2; font-family: monospace; } #popup{ position: fixed; top: 50%; left: 50%; width: 5cm; height: 5cm; background-color: azure; z-index: 3; transform: translate(-50%,-50%); display:none; } h1 { position: relative; margin-top: 5%; text-align: center; font-family: fantasy; font-size:larger; color:antiquewhite; } h2 { text-align: center; font-family: fantasy; color:antiquewhite; } p { text-align: center; font-family: monospace; color:antiquewhite; padding: 5%; }