Merge of Beerpong-Youtube and Tic-Tac-Toe

Output/public/css/style.css

@@ -1,97 +1,142 @@
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Lato Regular'), local('Lato-Regular'), url(Lato.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+:root{
+    --top:0px;
+    --top325:325px;
 }
-
-@font-face {
-    font-family: 'Quicksand';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Quicksand'), local('Quicksand'), url(Quicksand.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+*{
+    padding: 0;
+    margin: 0;
+    outline: none;
 }
-
-::selection {
-    background: transparent;
+body{
+    overflow-x: hidden;
+    display: block;
 }
-
-body {
-    background: #A5DAD2;
-    font-family: Quicksand, san-serif;
+ellipse{
+    fill:hsl(0, 0%, 90%);
+    stroke: black;
+    stroke-weight: 1px;
 }
+#reshoot, #restart{
+    margin: 15rem auto;
+    font-size: 2rem;
+    padding: 1rem 2rem;
+    border-radius: 0.3rem;
+    display: block;
+    color: black;
+    border: 3px solid black;
+    background-color: yellow;
+    z-index: 10;
 
-.bgWhite {
-    background: #F5F2F5;
 }
-
-.colorWhite {
-    color: #F5F2F5 !important;
-}
-
-.bgDark {
-    background: #516D66;
-}
-
-.colorDark {
-    color: #516D66;
-}
-
-.bgRed {
-    background: #F286A0;
-}
-
-.colorRed {
-    color: #F286A0 !important;
-}
-
-.gameBoard, .scoreBoard {
-    font-weight: 400;
-}
-
-.gameBoard {
-    width: 100%;
-}
-
-.gameBoard td {
-    text-align: center;
-    color: #516D66;
-    font-size: 8em;
+#reshoot:hover, #restart:hover{
     cursor: pointer;
-    transition: all 0.5s;
+    background-color: black;
+    color: yellow;
+    z-index:
+}
+#time {
+  margin: auto;
+  display: block;
+  text-align: center;
+  font-size: 3rem;
+  font-family: sans-serif;
+  font-weight: bold;
 }
 
-.gameCell {
-    width: 181px;
-    height: 181px;
+
+.cups{
+    margin: auto;
+    width: 1100px;
+}
+.tisch{
+  position: absolute;
+  margin-top: 0rem;
+  margin-left: -440px;
+  width: 1090px;
+  z-index: -1;
+}
+.cup{
+    width: 100px;
+    position: relative;
+}
+.row1{
+    margin-top: 00rem;
+    margin-left: 350px;
+}
+.row2{
+    margin-top: -10rem;
+    margin-left: 400px;
+}
+.row3{
+    margin-top: -10rem;
+    margin-left: 450px;
+}
+.row4{
+    margin-top: -10rem;
+    margin-left: 500px;
 }
 
-.gameCell:not(.marked):hover {
-    box-shadow: 0 0 42px #555;
+.cup5{
+    top: 5rem;
 }
-
-.gameBoard td.gameCell.notActive:hover, .gameBoard td.gameCell.notActive:active {
-    box-shadow: none !important;
-    cursor: default;
+.cup6{
+    top: 5rem;
 }
-
-.scoreBoard {
-    color: #516D66;
-    height: 100px;
+.cup7{
+    top: 5rem;
 }
-
-.boardCol {
-    width: 5px;
-    cursor: default !important;
+.cup8{
+    top: 10rem;
 }
-
-.boardRow {
-    height: 5px;
-    cursor: default !important;
+.cup9{
+    top: 10rem;
 }
-
-.scoreBoard span.active {
-    border-bottom: 4px solid #F286A0;
+.cup10{
+    top: 15rem;
+}
+.ball{
+    width: 50px;
+    height: 50px;
+    position: relative;
+}
+.shooter{
+    position: relative;
+    top: 250px;
+    left: 125px;
+    width: 300px;
+    margin: auto;
+}
+.shootX{
+    animation: shootX 1s infinite linear;
+}
+@keyframes shootX{
+    0%{left:0px}
+    25%{left:125px}
+    50%{left:0px}
+    75%{left:-125px}
+    100%{left:0px}
+}
+.shootY{
+    animation: shootY 1s infinite linear;
+}
+@keyframes shootY{
+    0%{top:0px}
+    50%{top:175px}
+    100%{top:0px}
+}
+.fadeAway{
+    animation: fadeAway 1s;
+    opacity: 0
+}
+@keyframes fadeAway{
+    0%{opacity: 1}
+    100%{opacity: 0}
+}
+.Shoot{
+    animation: Shoot 1s;
+    animation-timing-function: ease;
+}
+@keyframes Shoot{
+    0%{top: var(--top)}
+    100%{top: var(--top325)}
 }