You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

104 lines
2.3 KiB
CSS

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
}
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%;
}