Create game.css

universal/game.css

@@ -0,0 +1,124 @@
+
+  body {
+  background-image: url('50725124510.jpeg');
+  background-repeat: no-repeat;
+  background-attachment: fixed;  
+  background-size: cover;
+}
+
+.button {
+   background-image: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(0,242,255,1) 100%);
+   padding: 15px 32px;
+   text-align: center;
+   text-decoration: none;
+   display: inline-block;
+   font-size: 16px;
+   margin: 4px 2px;
+   cursor: pointer;
+   border-radius: 50px;
+   font-family: monospace;
+   font-size: 20px;
+   background-color: black;
+   color: black;
+ }
+
+ .button {
+   transition-duration: 0.4s;
+ }
+
+
+.button1 {
+  background-color: white;
+  background-image: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(0,242,255,1) 100%);
+  color: black; 
+  border: 2px solid #4CAF50;
+}
+
+.button:hover {
+ color: white;
+  background-image: linear-gradient(90deg, #00cfd6, #00cfd6);
+font-size: 28px;
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  flex-wrap: wrap;
+  width: 80vw;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+p {
+  font-family: vt323;
+  font-size: 20px;
+  color: #ffffff;
+  border: 2px solid black;
+  outline: #4CAF50 solid 10px;
+}
+
+h1 {
+  font-family: vt323;
+  color: #ffffff;
+}
+
+img {
+  border: double 2px transparent;
+  border-radius: 25px;
+  background-image: linear-gradient(black, black), 
+                    linear-gradient(to right, aqua, lime);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
+
+a {
+  color: white;
+  padding: 10px 10px;
+  border: 4px solid linear-gradient(90deg, rgba(0,255,48,1) 0%, rgba(0,242,255,1) 100%);
+  font-family: monospace;
+}
+
+img {
+  transition-duration: 0.8s;
+}
+
+img:hover {
+  border-radius: 0px;
+  border-width: 0px;
+}
+
+
+.gradient-box {
+
+  display: flex;
+  align-items: center;
+  //width: 50vw;
+  width: 90%;
+  margin: auto;
+  max-width: 22em;
+
+  position: relative;
+  padding: 30% 2em;
+  box-sizing: border-box;
+
+  $border: 5px;
+  color: #FFF;
+  background: #000;
+  background-clip: padding-box; /* !importanté */
+  border: solid $border transparent; /* !importanté */
+  border-radius: 1em;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    z-index: -1;
+    margin: -$border; /* !importanté */
+    border-radius: inherit; /* !importanté */
+    background: linear-gradient(to right, red, orange);
+  }
+}
+
+html { height: 100%; background: #000; display: flex; }
+body { margin: auto; }