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.

160 lines
3.3 KiB
CSS

html {
position: relative; /* Make the html element a positioned parent */
}
2 years ago
html::before { /* Add a pseudo-element to the html element */
content: "";
position: fixed;
width: 300vw;
height: 300vh;
top: -100%;
left: -100%;
right: 0;
bottom: 0;
z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
2 years ago
background: url(bg-images/bg4.jpg) no-repeat center center fixed;
background-size: 100%;
2 years ago
/* 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
2 years ago
.top-left-corner{
position: fixed;
top: 0px;
left: 0px;
2 years ago
transform: translate(20%,20%);
2 years ago
width: 12vw;
filter: hue-rotate(0deg);
2 years ago
}
2 years ago
.top-right-corner {
position: fixed;
top: 0px;
right: 0px;
2 years ago
transform: translate(-20%,20%);
2 years ago
width: 12vw;
filter: hue-rotate(0deg);
2 years ago
}
.bottom-left-corner {
position: fixed;
bottom: 0px;
left: 0px;
2 years ago
transform: translate(-16%,40%);
2 years ago
width: 25vw;
filter: hue-rotate(-68deg);
2 years ago
}
.bottom-right-corner{
position: fixed;
bottom: 0px;
right: 0px;
2 years ago
transform: translate(0%,30%);
2 years ago
width: 25vw;
2 years ago
filter: hue-rotate(-68deg);
2 years ago
}
2 years ago
.slide {
width: 50mm;
2 years ago
margin-top: 3%;
margin-bottom: 3%;
2 years ago
}
#wheel{
2 years ago
text-align: center;
2 years ago
filter: hue-rotate(0deg);
2 years ago
}
button.spin-wheel{
color:whitesmoke;
background-color:violet;
2 years ago
position: center;
top:6%;
left:50%;
transform: translate(-50%,0);
width: 100px;
height:40px;
position: relative;
z-index: 2;
font-family: monospace;
}
button.close{
color:whitesmoke;
background-color:violet;
width: 100px;
height:40px;
z-index: 2;
font-family: monospace;
}
2 years ago
#popup{
position: fixed;
text-align: center;
2 years ago
top: 50%;
left: 50%;
width: 90mm;
height: 90mm;
padding: 5mm;
background-color:azure;
2 years ago
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:lavender;
}
2 years ago
h2 {
text-align: center;
font-family: fantasy;
color:lavender;
}
2 years ago
h3 {
text-align: center;
font-family: fantasy;
color:paleturquoise;
margin-bottom: 2mm;
2 years ago
}
p {
text-align: center;
2 years ago
font-family: monospace;
color:lavender;
2 years ago
font-size: 1.2em;
padding-right: 15%;
padding-left: 15%;
padding-bottom: 5%;
}