<!DOCTYPE html>
<html>
<meta charSet="utf-8" />
<title>mezza.biz</title>
<meta name="description" content="Invest today" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
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;
}
30% {
text-shadow: 0px 0px 0.0rem gold;
}
50% {
text-shadow: 0px 0px 0.5rem gold;
}
70% {
text-shadow: 0px 0px 0.0rem gold;
}
100% {
text-shadow: 0px 0px 0.0rem gold;
}
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
#ad {
position: fixed;
z-index: 1;
bottom: 0;
right: 0;
left: 0;
padding: 0 16px;
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;
white-space: nowrap;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
@keyframes depth {
0% { text-shadow: 0 0 #5b5015; }
25% { text-shadow: 4px 0 #5b5015, 8px 0 #5b5015, 12px 0 #5b5015, 16px 0 #5b5015, 20px 0 #5b5015; }
50% { text-shadow: 0 0 #5b5015; }
75% { text-shadow: -4px 0 #5b5015, -8px 0 #5b5015, -12px 0 #5b5015, -16px 0 #5b5015, -20px 0 #5b5015; }
100% { text-shadow: 0 0 #5b5015; }
}
.money {
position: fixed;
top: 5vh;
left: 5vw;
z-index: 1;
color: gold;
font-size: 20vw;
animation-name: rotate, depth;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 5s;
}
</style>
<script
defer
type="module"
src="/scripts/money.mjs"
></script>
<body>
<video
class="video"
src="/assets/money-rains.mp4"
autoplay="true"
loop="true"
muted="true"
></video>
<div id="charts"></div>
<marquee
id="ad"
scrolldelay="10"
truespeed="true"
behavior="scroll"
>
mezza
nineninenine //
here for YOUR business //
we make that line go UP //
NEVER settle for less //
call NOW to talk to your personal finance savior
</marquee>
<div class="money">$</div>
</body>
</html>