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.

148 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;
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/bg4.jpg) no-repeat center center fixed;
background-size: cover;
/* 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(20%,20%);
width: 12vw;
filter: hue-rotate(0deg);
}
.top-right-corner {
position: fixed;
top: 0px;
right: 0px;
transform: translate(-20%,20%);
width: 12vw;
filter: hue-rotate(0deg);
}
.bottom-left-corner {
position: fixed;
bottom: 0px;
left: 0px;
transform: translate(-16%,40%);
width: 25vw;
filter: hue-rotate(-68deg);
}
.bottom-right-corner{
position: fixed;
bottom: 0px;
right: 0px;
transform: translate(0%,30%);
width: 25vw;
filter: hue-rotate(-68deg);
}
.slide {
width: 350px;
margin: 3%;
}
#wheel{
text-align: center;
filter: hue-rotate(0deg);
}
button{
color:black;
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: fit-content;
height: fit-content;
padding: 5%;
background-color: azure;
z-index: 3;
transform: translate(-50%,-50%);
display: none;
}
h1{
position: relative;
margin-top: 5%;
margin-bottom: 0;
text-align: center;
font-family: fantasy;
font-size:5em;
color:antiquewhite;
}
h2 {
text-align: center;
font-family: fantasy;
color:antiquewhite;
}
h3 {
text-align: center;
font-family: fantasy;
color:antiquewhite;
}
p {
text-align: center;
font-family: monospace;
color:antiquewhite;
font-size: 1.2em;
padding-right: 15%;
padding-left: 15%;
padding-bottom: 5%;
}