@keyframes fadein
{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeout-zoom
{
  0% {opacity: 1; transform: scale(1.0);}
  100% {opacity: 0; transform: scale(4.0);}
}

@keyframes fadeout
{
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes timer
{
  0% {width: 7px;}
  100% {width: 100%;}
}

html
{
  height: 100%;
}

body
{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid 
{
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 72px 72px 72px 72px 15px;
}


.grid-select
{
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 150px 150px;
  grid-template-rows: 72px;
}


.grid div
{
  border-radius: 4px;
  background-color: #addff9;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), transparent 4px), linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 4px), 
  linear-gradient(to top, rgba(0, 0, 0, 0.32), transparent 4px), linear-gradient(to left, rgba(0, 0, 0, 0.32), transparent 4px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial;
  color: #000000;
  transition: background-color 0.4s, color 0.4s, position 0.4s, display 0.4s, opacity 0.4s;
}

.selection
{
  border-radius: 4px;
  background-color: #addff9;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), transparent 4px), linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 4px), 
  linear-gradient(to top, rgba(0, 0, 0, 0.32), transparent 4px), linear-gradient(to left, rgba(0, 0, 0, 0.32), transparent 4px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Times New Roman';
  font-size: 40px;
  color: #000000;
  transition: background-color 0.4s, color 0.4s, position 0.4s, display 0.4s, opacity 0.4s;
}

.grid .first
{
  display: none;
}

.grid .group1
{
  background-color: #004475;
  color: #ffffff;
}

.grid .group2
{
  background-color: #006e5b;
  color: #ffffff;
}

.grid .group3
{
  background-color: #5b2946;
  color: #ffffff;
}

.grid .group4
{
  background-color: #006581;
  color: #ffffff;
}

.hidden
{
  opacity: 0;
  display: none;
}

.grid .timer-grid
{
  grid-row: 5 / span 1;
  grid-column: 2 / span 3;
  background-color: #598bc2;
  background-image: linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, 0.6) 20%, transparent 40% 90%, rgba(0, 0, 0, 0.32) 100%);
  justify-content: flex-start;
}

.grid .timer-grid-overlay
{
  background-color: #073c84;
  background-image: linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, 0.6) 20%, transparent 40% 90%, rgba(0, 0, 0, 0.32) 100%);
  height: 100%;
}

.strikes
{
  grid-row: 5 / span 1;
  grid-column: 1 / span 1;
}

.fadein-anim
{
  animation: fadein 0.4s;
  animation-fill-mode: forwards;
}

.fadeout-anim
{
  animation: fadeout 0.4s;
  animation-fill-mode: forwards;
}

.fadeoutzoom-anim
{
  animation: fadeout-zoom 0.4s;
  animation-fill-mode: forwards;
}

.timer-grid-anim
{
  animation: timer 150s;
}