mezza.biz/_includes/styles/style.scss
2023-02-25 21:10:26 +01:00

129 lines
2 KiB
SCSS

* {
box-sizing: border-box;
}
html {
--accent: #ed1c24;
--foreground: #000;
--background: #fff;
--background-alt: #f5f5f5;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 800;
background: var(--background);
color: var(--foreground);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
width: 100vw;
height: 100vh;
margin: 0;
font-size: 1vw;
}
body {
margin: 0;
}
.video {
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
z-index: -1;
top: 0%;
left: 0;
}
@keyframes bling {
0% {
text-shadow: 0px 0px 0.0rem gold;
}
50% {
text-shadow: 0px 0px 0.5rem gold;
}
100% {
text-shadow: 0px 0px 0.0rem gold;
}
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
#mezza {
position: fixed;
z-index: 1;
font-size: 15vh;
display: flex;
top: 30vh;
left: 10vw;
color: gold;
text-shadow: 0px 0px 0.75rem gold;
animation-name: scale;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
#ad {
position: fixed;
z-index: 1;
bottom: 0;
right: 0;
color: gold;
font-size: 5vh;
text-shadow: 0px 0px 0.5rem gold;
animation-name: bling;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.money {
position: fixed;
z-index: 1;
color: gold;
font-size: 5vh;
text-shadow: 0px 0px 0.75rem gold;
animation-name: rotate;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
&::before {
display: block;
content: '$';
}
}
@for $i from 1 through 500 {
.money:nth-child(#{$i}) {
font-size: 10vh * $i / 500;
}
}