Beerpong/Output/public/css/style.css

:root{
    --top:0px;
    --top325:325px;
}
*{
    padding: 0;
    margin: 0;
    outline: none;
}
body{
    overflow-x: hidden;
    display: block;
}
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;

}
#reshoot:hover, #restart:hover{
    cursor: pointer;
    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;
}


.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;
}

.cup5{
    top: 5rem;
}
.cup6{
    top: 5rem;
}
.cup7{
    top: 5rem;
}
.cup8{
    top: 10rem;
}
.cup9{
    top: 10rem;
}
.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)}
}


















::selection {
    background: transparent;
}


.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;
    cursor: pointer;
    transition: all 0.5s;
}

.gameCell {
    width: 181px;
    height: 181px;
}

.gameCell:not(.marked):hover {
    box-shadow: 0 0 42px #555;
}

.gameBoard td.gameCell.notActive:hover, .gameBoard td.gameCell.notActive:active {
    box-shadow: none !important;
    cursor: default;
}

.scoreBoard {
    color: #516D66;
    height: 100px;
}

.boardCol {
    width: 5px;
    cursor: default !important;
}

.boardRow {
    height: 5px;
    cursor: default !important;
}

.scoreBoard span.active {
    border-bottom: 4px solid #F286A0;
}