File: /www/wwwroot//www.kntsleep.com/ms/js/css/style.css
/* *
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #1f2028;
} */
img {
-webkit-user-select: none; /* Chrome/Safari/Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by most modern browsers */
}
section
{
position: absolute;
bottom: 0;
width: 100%;
}
section .waves
{
position: relative;
}
section .waves .wave{
position: absolute;
width: 100%;
height: 100px;
left: 0;
bottom: 0;
background-image: url(https://pub-f583734e30a24b91be172f3c00a2b5a1.r2.dev/wave.png);
background-size: 1000px 100px;
}
section .waves .wave#wave1
{
opacity: 1;
bottom: 0;
z-index: 1000;
animation: animate 4s linear infinite;
}
section .waves .wave#wave2
{
opacity: .5;
bottom: 10px;
z-index: 999;
animation: animate2 4s linear infinite;
}
section .waves .wave#wave3
{
opacity: .2;
bottom: 15px;
z-index: 998;
animation: animate 2s linear infinite;
}
section .waves .wave#wave4
{
opacity: .7;
bottom: 20px;
z-index: 999;
animation: animate2 2s linear infinite;
}
@keyframes animate
{
0%
{
background-position-x: 1000px;
}
100%
{
background-position-x: 0px;
}
}
@keyframes animate2
{
0%
{
background-position-x: 0px;
}
100%
{
background-position-x: 1000px;
}
}
.stars
{
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
mix-blend-mode: screen;
}
h2
{
position: absolute;
bottom: 60vh;
transform: translateY(50%);
width: 100%;
text-align: center;
color: #fff;
font-size: 10em;
font-weight: 800;
text-transform: uppercase;
}
.island
{
position: absolute;
width: 800px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
pointer-events: none;
}