yyyyyyy

yyyyyyy/css/index.css

@@ -0,0 +1,96 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box
+}
+
+div.container {
+    perspective: 1px;
+    height: 100vh;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective-origin: 100% initial
+}
+
+div.layer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transform-origin: 100% initial;
+    word-wrap: break-word
+}
+
+div.layer>span,
+div.layer>img {
+    pointer-events: none
+}
+
+div#layer-1 {
+    position: absolute;
+    left: 30px;
+    top: 10px;
+    width: 400px;
+    z-index: 5;
+    pointer-events: none
+}
+
+div#layer-2 {
+    z-index: 4;
+    transform: translateZ(0)
+}
+
+div#layer-3 {
+    z-index: 3;
+    transform: translateZ(-.1px) scale(1.1)
+}
+
+div#layer-4 {
+    z-index: 2;
+    transform: translateZ(-.2px) scale(1.2)
+}
+
+div#layer-5 {
+    z-index: 1;
+    transform: translateZ(-.3px) scale(1.3)
+}
+
+div#video-container {
+    position: absolute;
+    top: 30px;
+    left: 65px;
+    right: 0;
+    width: 640px;
+    height: 480px;
+    z-index: 3;
+    transform: translateZ(-.2px) scale(1.2)
+}
+
+div#video video {
+    width: 100%;
+    height: 100%
+}
+
+div.welcome {
+    filter: drop-shadow(15px 15px 3px rgba(0, 0, 0, .75));
+    -webkit-filter: drop-shadow(15px 15px 3px rgba(0, 0, 0, .75))
+}
+
+@keyframes backgroundScroll {
+    0% {
+        background-position: 0 0
+    }
+
+    to {
+        background-position: 4000px 0
+    }
+}
+
+body {
+    background-image: var(--bgimage);
+    -webkit-animation: backgroundScroll 900s linear infinite;
+    animation: backgroundScroll 900s linear infinite
+}