batterys

4 files changed, 69 insertions, 8 deletions

diff --git a/data/battery.jpg b/data/battery.jpg
new file mode 100644
index 0000000..018eacc
--- /dev/null
+++ b/data/battery.jpg
diff --git a/data/ul.png b/data/ul.png
new file mode 100644
index 0000000..6a4063d
--- /dev/null
+++ b/data/ul.png
diff --git a/index.html b/index.html
index a1a7a19..a6454f3 100644
--- a/index.html
+++ b/index.html
@@ -101,9 +101,17 @@
             <img src="data/munson/9.jpg"/>
             <img src="data/munson/10.jpg"/>
         </div>
+        <div id="batterys">
+            <p style="--rot: 0deg;">Lithium Ion Battery's</p>
+            <p style="--rot: 270deg;">Lithium Ion Battery's</p>
+        </div>
+        <div id="batterys" style="margin-bottom: 30vw;">
+            <img style="--rot: 0deg;" src="data/battery.jpg"/>
+            <img style="--rot: 270deg;" src="data/battery.jpg"/>
+        </div>
         <div class="thicc"></div>
         <div class="buttons">
-            <img src="data/apocalypse.gif" class="clickable" image.png onclick="document.documentElement.classList.toggle('wank')"/>
+            <img src="data/apocalypse.gif" class="clickable" onclick="document.documentElement.classList.toggle('wank')"/>
             <img src="data/amd.gif"/>
             <img src="data/asexules.gif"/>
             <img src="data/dither.gif" class="clickable" onclick="document.documentElement.classList.toggle('dither')"/>
diff --git a/style.css b/style.css
index e797951..a666bce 100644
--- a/style.css
+++ b/style.css
@@ -10,7 +10,7 @@ html, body, #mainBod {
     overflow: auto;
     background-image: url("data/rit.webp");
     width: 100vw;
-    min-height: 100%;
+    min-height: 100vh;
     height: 100vh;
     animation: bg 1s linear infinite alternate;
     display: flex;
@@ -21,7 +21,7 @@ html, body, #mainBod {
 }
 
 .wank {
-    transform: rotateZ(180deg) translateY(-100vh);
+    transform: rotateZ(180deg);
 }
 
 .thicc {
@@ -37,7 +37,7 @@ html, body, #mainBod {
 }
 
 #middle {
-    font-size: 2em;
+    font-size: 2vw;
     width: fit-content;
     background-color: black;
     color: orange;
@@ -78,11 +78,16 @@ td:hover a {
 }
 
 .middle td {
-    border: 2px solid orange;
+    border: .25vw solid orange;
+    height: 5vw;
+}
+
+.middle img {
+    height: 5vw;
 }
 
 .middle td:hover {
-    border: 2px solid black;
+    border: .25vw solid black;
     background-color: orange;
 }
 
@@ -104,6 +109,10 @@ footer {
     margin-top: 1em;
 }
 
+.buttons img {
+    height: 2em;
+}
+
 footer video {
     width: 100%;
     height: 100%;
@@ -115,11 +124,11 @@ footer video {
 marquee {
     margin-top: 2em;
     display: block;
-    height: 12em;
+    height: 12vw;
 }
 
 marquee img {
-    height: 12em;
+    height: 12vw;
 }
 
 .title {
@@ -232,6 +241,50 @@ html.dither>body>div>div{
     margin-bottom: 2em;
 }
 
+#batterys {
+    perspective: 5000000em;
+	position: relative;
+	height: 2em;
+	width: 100%;
+	overflow-x: visible;
+    margin-bottom: 13vw;
+}
+
+#batterys p {
+    text-align: center;
+    font-size: 4vw;
+    color: #fff;
+    width: 50.1vw;
+    background-color: #232323;
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    animation: spincube 2.5s linear infinite;
+}
+
+
+#batterys img {
+    display: inline-block;
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    width: 48.1vw;
+    border: black 1vw solid;
+    animation: spincube 2.5s linear infinite;
+}
+
+
+@keyframes spincube {
+    from {
+        transform: translateX(-50%) rotateY(var(--rot)) translateZ(25vw);
+    }
+	to {
+		transform: translateX(-50%) rotateY(calc(var(--rot) + 90deg)) translateZ(25vw);
+	}
+}
+
 @keyframes bg {
     from {
       background-position: 0 0;