158 lines
3.0 KiB
CSS
158 lines
3.0 KiB
CSS
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #1a001a;
|
|
}
|
|
|
|
div.landscape {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 1920px;
|
|
max-height: 1080px;
|
|
min-width: 800px;
|
|
min-height: 600px;
|
|
overflow: hidden;
|
|
box-shadow: 0px 0px 30px #660066;
|
|
}
|
|
|
|
div.sun {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle at 50% 335px,
|
|
transparent 150px,
|
|
#3d1452 150px,
|
|
#001a1a),
|
|
linear-gradient(
|
|
transparent 55%,
|
|
#3d1452 55% 61%,
|
|
transparent 61% 67%,
|
|
#3d1452 67% 73%,
|
|
transparent 73% 79%,
|
|
#3d1452 79% 85%,
|
|
transparent 85% 89%,
|
|
#3d1452 89% 93%,
|
|
transparent 93% 96%,
|
|
#3d1452 96% 98%,
|
|
transparent 98%),
|
|
radial-gradient(
|
|
yellow,
|
|
orangered 60%),
|
|
linear-gradient(
|
|
orangered 60%,
|
|
red);
|
|
background-position: center, 50% 187px, top center;
|
|
background-size: 100% 100%, 300px 300px, 100% 400px;
|
|
background-repeat: no-repeat;
|
|
filter: blur(1px);
|
|
}
|
|
|
|
div.stars {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
span.star {
|
|
position: absolute;
|
|
height: 4px;
|
|
width: 4px;
|
|
background: radial-gradient(circle, #705d79 1px, transparent 1px);
|
|
}
|
|
|
|
span.star.large {
|
|
background: radial-gradient(circle, #705d79 1px, transparent 2px);
|
|
}
|
|
|
|
div.mountain-container {
|
|
position: absolute;
|
|
top: 450px;
|
|
width: 47%;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
|
|
div.mountain-container.flipped {
|
|
right: 0;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
div.mountain-container.background {
|
|
top: 430px;
|
|
width: 44%;
|
|
}
|
|
|
|
div.mountain {
|
|
position: relative;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: linear-gradient(to bottom left, #00cccc, #008080);
|
|
transform: rotate(45deg);
|
|
border: 2px solid #ccffff;
|
|
box-shadow: 0px 0px 15px #00ffff;
|
|
}
|
|
|
|
div.mountain.size250 {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
|
|
div.mountain.size200 {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
div.mountain.size100 {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
div.mountain.left {
|
|
transform: rotate(40deg);
|
|
}
|
|
|
|
div.mountain.right {
|
|
transform: rotate(50deg);
|
|
}
|
|
|
|
div.grid {
|
|
position: absolute;
|
|
height: 450px;
|
|
width: 200%;
|
|
background: linear-gradient(#222, black);
|
|
transform: translate(-25%, 370px) perspective(220px) rotateX(51deg);
|
|
}
|
|
|
|
div.grid > .lines {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(#e765dc 1px, transparent 1px 39px, #e765dc 39px),
|
|
linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px);
|
|
background-size: 100% 40px, 40px 100%;
|
|
}
|
|
|
|
div.grid > .lines.glow {
|
|
background: linear-gradient(#da22ca 1px, transparent 1px 39px, #da22ca 39px),
|
|
linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px);
|
|
background-size: 100% 40px, 40px 100%;
|
|
filter: blur(4px);
|
|
}
|
|
|
|
div.scanlines {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(transparent 1px, rgba(0, 0, 0, 0.5) 3px);
|
|
background-size: 100% 3px;
|
|
}
|