From 65feba99412426f8eb04bb9c785a13c0ec460a06 Mon Sep 17 00:00:00 2001
From: James Savidge <60673659+shaynjay@users.noreply.github.com>
Date: Tue, 26 Jan 2021 09:05:44 -0500
Subject: [PATCH] Update style.css

---
 style.css | 114 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 67 insertions(+), 47 deletions(-)

diff --git a/style.css b/style.css
index ffae6df..5abae3a 100644
--- a/style.css
+++ b/style.css
@@ -4,22 +4,43 @@ body {
   perspective: 2000px;
   display: flex;
   justify-content: center;
-} 
+}
 label .cardWrapper {
   position: relative;
   height: 40vmin;
   width: calc(40vmin / 1.4);
-  background-color: deeppurple;
-  background-image: hierophant-thoth_tarot-684x1024.jpg;(
+  background-color: royalblue;
+  background-image: repeating-linear-gradient(
       120deg,
+      rgba(255, 0, 0, 0.5),
+      rgba(255, 0, 0, 0.5) 1px,
+      transparent 1px,
+      transparent 60px
+    ),
+    repeating-linear-gradient(
+      60deg,
+      rgba(255, 0, 0, 0.5),
+      rgba(255, 0, 0, 0.5) 1px,
       transparent 1px,
       transparent 60px
-     },
-     hierophant-thoth_tarot-684x1024.jpg;
-     60deg,
-     transpartent 1px,
-     transparent 60px,
-       background-size: 70px 120px;
+    ),
+    linear-gradient(
+      60deg,
+      rgba(0, 0, 0, 0.1) 25%,
+      transparent 25%,
+      transparent 75%,
+      rgba(0, 0, 0, 0.1) 75%,
+      rgba(0, 0, 0, 0.1)
+    ),
+    linear-gradient(
+      120deg,
+      rgba(0, 0, 0, 0.1) 25%,
+      transparent 25%,
+      transparent 75%,
+      rgba(0, 0, 0, 0.1) 75%,
+      rgba(0, 0, 0, 0.1)
+    );
+  background-size: 70px 120px;
   margin: calc(40vmin / 10);
   border-radius: calc(40vmin / 20);
   box-shadow: 0 calc(40vmin / 40) calc(40vmin / 10) 0 rgba(0, 0, 0, 0.2);
@@ -27,47 +48,47 @@ label .cardWrapper {
   float: left;
   transition: transform 200ms linear, box-shadow 100ms linear;
   transform: rotateY(0deg);
-  }
-  input:checked + label.cardWrapper {
-    transform: rotateY(0deg);
-  }
-  .cardRandom {
-   width: 100%;
-   height: 100%;
-   background-color: white;
-   opacity: 1;
-   cursor: pointer;
-   transisition: opacity 1ms linear 100ms;
-   }
-   .cardWrapper:hover {
-     filter: brightness(0.98);
-   }  
-   input:focus + label .cardWrapper {
-     box-shadow: 0 0 calc(40vmin / 100) 0 rgba(0, 0, 0, 0.5);
 }
-   input:checked + label .cardRandom {
-     opacity: 0;
+input:checked + label .cardWrapper {
+  transform: rotateY(180deg);
 }
-  .cardRandom::before {
-    content: "shaynjay/cards/index/z/mycards";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-image: url(https://github.com/shaynjay/cards/index/z/mycards);
-    background-size: cover;
-    animation: randomCard 1000ms steps(24, end) infinite;
-    animation-play-state: paused;
-    transform: rotate(180deg);
+.cardRandom {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  opacity: 1;
+  cursor: pointer;
+  transition: opacity 1ms linear 100ms;
+}
+.cardWrapper:hover {
+  filter: brightness(0.98);
+}
+input:focus + label .cardWrapper {
+  box-shadow: 0 0 calc(40vmin / 100) 0 rgba(0, 0, 0, 0.5);
+}
+input:checked + label .cardRandom {
+  opacity: 0;
+}
+.cardRandom::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url(https://assets.codepen.io/2722301/cards.jpg);
+  background-size: cover;
+  animation: randomCard 1000ms steps(77, end) infinite;
+  animation-play-state: paused;
+  transform: rotate(180deg);
 }
-    input:checked + label .cardRandom::before {
-     animation-play-state: running;
+input:checked + label .cardRandom::before {
+  animation-play-state: running;
 }
-   input {
-   height: 0;
-   width: 0;
-   border: none;
-   outline: none;
-   display: none;
+input {
+  height: 0;
+  width: 0;
+  border: none;
+  outline: none;
+  display: none;
 }
 @keyframes randomCard {
   0% {
@@ -88,4 +109,3 @@ label .cardWrapper {
 .linkElement:hover {
   filter: hue-rotate(-45deg);
 }
-