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.

142 lines
3.0 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;
2 years ago
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/bg3.jpg) no-repeat center center fixed;
background-size: 150%;
/* 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);
}
}
2 years ago
.top-left-corner{
position: fixed;
top: 0px;
left: 0px;
transform: translate(-50%,-50%);
2 years ago
width: 40vw;
2 years ago
filter: hue-rotate(180deg);
}
2 years ago
.top-right-corner {
position: fixed;
top: 0px;
right: 0px;
transform: translate(50%,-50%);
width: 40vw;
filter: hue-rotate(180deg);
}
.bottom-left-corner {
position: fixed;
bottom: 0px;
left: 0px;
transform: translate(-50%,50%);
width: 40vw;
filter: hue-rotate(180deg);
}
.bottom-right-corner{
position: fixed;
bottom: 0px;
right: 0px;
transform: translate(50%,50%);
width: 40vw;
filter: hue-rotate(180deg);
}
#wheel{
2 years ago
text-align: center;
}
2 years ago
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;
}
2 years ago
#popup{
position: fixed;
top: 50%;
left: 50%;
2 years ago
width: fit-content;
height: fit-content;
padding: 5%;
2 years ago
background-color: azure;
z-index: 3;
transform: translate(-50%,-50%);
display: none;
2 years ago
}
2 years ago
h1{
position: relative;
margin-top: 5%;
2 years ago
margin-bottom: 0;
text-align: center;
font-family: fantasy;
2 years ago
font-size:5em;
color:antiquewhite;
}
2 years ago
h2 {
text-align: center;
font-family: fantasy;
color:antiquewhite;
}
2 years ago
h3 {
text-align: center;
font-family: fantasy;
color:antiquewhite;
}
p {
text-align: center;
2 years ago
font-family: monospace;
color:antiquewhite;
2 years ago
font-size: 1.2em;
padding-right: 15%;
padding-left: 15%;
padding-bottom: 5%;
}