101 lines
1.8 KiB
CSS
Executable file
101 lines
1.8 KiB
CSS
Executable file
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0;
|
|
box-shadow: inset 0 0 150px rgba(0,0,0,.5);
|
|
}
|
|
|
|
.content {
|
|
position: fixed;
|
|
width: 80vw;
|
|
max-width: 600px;
|
|
height: 100vh;
|
|
max-height: 300px;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.content h1 {
|
|
color: #3b3b3b; /** Replace with "transparent" to show logo instead **/
|
|
background: url(../img/logo.png) no-repeat center center;
|
|
background-size: contain;
|
|
width: 50vw;
|
|
height: 25vw;
|
|
max-width: 600px;
|
|
min-width: 255px;
|
|
max-height: 200px;
|
|
margin: auto;
|
|
font-weight: normal;
|
|
font-size: 2.5em;
|
|
|
|
}
|
|
|
|
.content p {
|
|
font-size: 2em;
|
|
color: #3b3b3b;
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-right: 2%;
|
|
}
|
|
|
|
.gear {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
right: -30px;
|
|
animation-name : gear;
|
|
animation-duration: 2s;
|
|
animation-delay: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: normal;
|
|
animation-timing-function: cubic-bezier(.53,1.35,0,-0.66);
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.gear.small {
|
|
width: 15px;
|
|
height: 15px;
|
|
top: 22px;
|
|
}
|
|
|
|
.gear.reverse {
|
|
animation-name : gear-reverse;
|
|
animation-delay: 2.1s;
|
|
right: -45px;
|
|
top: 6px;
|
|
}
|
|
|
|
.gear.large {
|
|
width: 30px;
|
|
height: 30px;
|
|
animation-delay: 2.2s;
|
|
right: -30px;
|
|
top: -15px;
|
|
}
|
|
|
|
|
|
|
|
/* Animation gear */
|
|
|
|
@keyframes gear {
|
|
0% {transform: rotate(0deg)}
|
|
20% {transform: rotate(20deg)}
|
|
100% {transform: rotate(20deg)}
|
|
}
|
|
|
|
@keyframes gear-reverse {
|
|
0% {transform: rotate(0deg)}
|
|
20% {transform: rotate(-20deg)}
|
|
100% {transform: rotate(-20deg)}
|
|
}
|