* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  color: black;
}

.page_container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('https://www.publicdomainpictures.net/pictures/320000/velka/abstrakt-wasserfarbe-hintergrund-1575395840syM.jpg');
  background-size: cover;
  background-position: center;
}

.back {
  display: none;
  margin-right: 30px;
  border-radius: 50%;
  color: #718096;
  transition: all 0.2s;
  cursor: pointer;
}

.back:hover {
  color: #2D3748;
}

.selector_container {
  width: 900px;
  display: flex;
  justify-content: space-between;
  /* display: none; */
}

.controls {
  text-align: center;
  padding: 10px;
  margin-left: 40px;
  overflow: hidden;
  transform-origin: 0% 0%;
  width: 40px;
  border-radius: 20px;
  max-height: 40px;
  background: rgba(0, 0, 0, 0.25);
  animation-direction: alternate;
  display: none;
}

.controls * {
  color: rgba(0,0,0,0);
  transition: all 0.2s;
}

.controls_opacity * {
  color: rgba(0, 0, 0, 1);
}

.frogger_controls_opacity * {
  color: rgba(255, 255, 255, 1);
}

.frogger_style_controls  {
  border-radius: 0px;
  border: 1px solid #FFFFFF;
  background: #000000;
}

.frogger_controls * {
  font-family: 'Press Start 2P', cursive;
  color: rgb(255, 255, 255);
}

.frogger_controls > h2 {
  padding: 10px 0px;
  font-family: 'Press Start 2P', cursive;
  /* color: #FFFFFF; */
}


.controls > div {
  display: none;
}

.controls > div > div {
  font-size: 0.75em;
}

.selector {
  height: 300px;
  width: 200px;
  /* margin: 0 100px; */
  border-radius: 20px;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
  transition: all 0.2s;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tetris_selector {
  background: rgb(170, 137, 226);
  /* border: 1px solid #805AD5; */
}

.tetris_selector:hover {
  background: rgb(191, 155, 255);
}

.fl_tron_selector {
  background: #68D391;
  /* border: 1px solid rgb(59, 121, 83); */
}

.fl_tron_selector:hover{
  background: rgb(119, 243, 167);
}

.frogger_selector {
  background: rgb(66, 176, 216);
  /* border: 1px solid rgb(45, 123, 151); */
}

.frogger_selector:hover {
  background: rgb(97, 213, 255);
}

.high_scores_selector {
   background: rgb(221, 61, 61);
}

.high_scores_selector:hover {
  background: rgb(255, 69, 69);
}

.selector:hover {
  box-shadow: -5px 5px 0px 0px rgba(0,0,0,0.25);
}


.outer_game_container {
  justify-content: center;
  align-items: center;
  display: flex;
  display: none;
}

.inner_game_container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background: #CCA8E9;
  overflow: hidden;
  border-top: 1px solid rgb(129, 106, 148);
  border-right: 1px solid rgb(129, 106, 148);
  border-bottom: 1px solid rgb(129, 106, 148);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.side_bar {
  text-align: center;
  padding: 20px 28px;
  min-width: 180px;
  max-width: 180px;
  background: #cadefc;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid rgb(129, 106, 148);
}

.message_text {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #8cb0e6;
  background: #DEFCF9;
  padding: 10px 20px;
  display: none;
  border-radius: 5px;
  z-index: 1;
}

h2 {
  padding: 5px 0;
}

li {
  list-style: none;
  margin: 10px 0;
  width: 100%;
}

li > span {
  float: right;
}

ul > li:first-child > *, ul > li:first-child{
  font-size: 1.2em;
  font-weight: 600;
}

.high_score_inner_container {
  border-radius: 10px;
  margin: 0px 30px;
  padding: 30px 30px;
  background: rgba(0, 0, 0, 0.25);
  transform: scale(1.2, 1.2);
}

.tetris_high_scores {
  background: rgba(170, 137, 226, 0.5)
}

.frogger_high_scores {
  background: rgba(66, 176, 216, 0.5)
}

 /* TETRIS SPECIFIC  */

.tetris_side_bar {
  height: 602px;
}

.tetris_game_container {
  min-width: 301px;
  max-width: 301px;
}

.game_square {
  width: 30px;
  height: 30px;
  /* border: 1px solid rgba(0, 0, 0, 0.1); */
}

.tetris_game_container > .game_square {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tetris_game_container > .game_square:nth-child(10n + 2) {
  border-left: 0px solid rgba(0, 0, 0, 0.1);
}

.tetris_game_container > .game_square:nth-child(n+232) {
  border-bottom: 0px solid rgba(0, 0, 0, 0.1);
}

.next, .bank {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  /* border-bottom: 1px solid #8cb0e6;
  border-top: 1px solid #8cb0e6; */
  overflow: hidden;
}

.maroon {
  background: #E53E3E;
  box-shadow: 0px 15px 0px 0px  rgba(0, 0, 0, 0.25);
}

.magenta {
  background: #D69E2E;
  box-shadow: 0px 15px 0px 0px  rgba(0, 0, 0, 0.25);
}

.cyan {
  background: #319795;
  box-shadow: 0px 15px 0px 0px  rgba(0, 0, 0, 0.25);
}

.green {
  background: #38A169;
  box-shadow: 0px 15px 0px 0px  rgba(0, 0, 0, 0.25);
}

.gold {
  background: #6B46C1;
  box-shadow: 0px 15px 0px 0px  rgba(0, 0, 0, 0.25);
}

.score {
  font-size: 40px;
}

.start {
  border: 1px solid #8cb0e6;
  background: rgb(184, 255, 248);
  cursor: pointer;
  padding: 20px 0;
  transition: all 0.2s;
  margin-bottom: 30px;
}

.start:hover {
  background: #02FFE6;
}

.invis {
  display: none;
}

/* FL TRON SPECIFIC  */

:root {
  --flP1Colour: #000000;
  --flP2Colour: #000000;
  --flP3Colour: #000000;
  --flP4Colour: #000000;
  --newVariable: 
}


.fl_tron_container {
  min-width: 625px;
  max-width: 625px;
}

.fl_side_bar {
  height: 482px;
}

.fl_game_square {
  height: 6px;
  width: 6px;
}

.flP1background {
  background: var(--flP1Colour);
}

.fds {
  background: var(--newVariable)
}

.flP2background {
  background: var(--flP2Colour);
}

.flP3background {
  background: var(--flP3Colour);
}

.flP4background {
  background: var(--flP4Colour);
}

.fl_player {
  visibility: hidden;
}

.fl_player1, .fl_player2 {
  visibility: visible;
}

.fl_points {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.fl_point {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 1px solid rgb(129, 106, 148);
}

.fl_point_fill {
  background: rgb(191, 157, 219);;
}

.fl_reset {
  color:  rgb(30, 212, 197);
  cursor: pointer;
}

 /* FROGGER SPECIFIC  */

 .frogger_message_text {
  background: #000000;
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  font-family: 'Press Start 2P', cursive;
  padding: 20px 30px;
  line-height: 50px;
  z-index: 2;
}

 .frogger_outer_container {
  flex-direction: column;
  display: none;
 }

 :root {
   --frog_jump: none;
   --frog_rotate: '0deg'
   --frog_log_anim: none;
   --row_1_speed: 0
   --row_2_speed: 0
   --row_3_speed: 0
   --row_4_speed: 0
   --row_5_speed: 0
   --row_6_speed: 0
   --row_6_bg_images
   --row_6_bg_pos
   --row_6_width
   --row_7_speed: 0
   --row_7_bg_images
   --row_7_bg_pos
   --row_7_width
   --row_7_height
   --row_8_speed: 0
   --row_8_bg_images
   --row_8_bg_pos
   --row_8_width
   --row_8_height
   --row_9_speed: 0
   --row_10_speed: 0
 }

 .frogger_game_container {
   min-width: 561px;
   max-width: 561px;
   background: linear-gradient(to top, rgba(2,0,36,1) 49.5%, rgba(17,17,93,1) 50.5%, rgba(17,17,93,1) 100%);
   border: none;
   border-radius: 0 0;
 }

 .frogger_buttons {
   display: flex;
   justify-content: space-evenly;
 }

 .frogger_buttons > button {
   color: #FFFFFF;
   border: 1px solid #FFFFFF;
   background: #000000;
   height: 80px;
   width: 60px;
   cursor: pointer;
 }

 .frogger_game_square {
   height: 40px;
   width: 40px;
   
 }

 .frogger_pavement {
   background: url('../assets/pavement.png');
   background-size: contain;
 }

 .frogger_grass {
   background: url('../assets/grass_middle_test.png');
 }

 .frogger_road {
   background: gray;
 }

 .frogger_water {
   background: aqua;
 }

 .frogger_safe_left {
   background: url('../assets/grass_left.png');
 }

 .frogger_safe_right {
  background: url('../assets/grass_right.png');
 }

 .car {
   background: black;
 }

 .log {
   background: brown;
 }

 .turtle {
   animation: turtle_animation 1s linear infinite;
 }

 .log_left {
   background: url('../assets/log_left.png');
   background-repeat: no-repeat;
   
 }

 .log_right {
  background: url('../assets/log_right.png');
  background-repeat: no-repeat;
}

 .log_middle {
  background: url('../assets/log_middle.png');
  background-repeat: no-repeat;

}

  .row_1_car {
  background-image: url('../assets/row_1_car.png');
  background-repeat: no-repeat;
  position: relative;
  animation: car_left var(--row_1_speed) linear infinite;
}

.row_2_car {
  background-image: url('../assets/row_2_car.png');
  background-repeat: no-repeat;
  position: relative;
  animation: car_right var(--row_2_speed) linear infinite;
}


.row_3_car {
  background-image: url('../assets/row_3_car.png');
  background-repeat: no-repeat;
  position: relative;
  animation: car_left var(--row_3_speed) linear infinite;
}


.row_4_car {
  background-image: url('../assets/row_4_car.png');
  background-repeat: no-repeat;
  position: relative;
  animation: car_right var(--row_4_speed) linear infinite;
}

.row_5_car_front {
  background-image: url('../assets/row_5_car_front.png');
  position: relative;
  background-repeat: no-repeat;
  animation: car_left var(--row_5_speed) linear infinite;
}

.row_5_car_back {
  background-image: url('../assets/row_5_car_back.png');
  position: relative;
  background-repeat: no-repeat;
  animation: car_left var(--row_5_speed) linear infinite;
}

.row_6_anim {
  background-repeat: no-repeat;
  position: relative;
  animation: turtle_animation 1s linear infinite, car_left var(--row_6_speed) linear infinite;
}

.row_7_anim {
  background-repeat: no-repeat;
  position: relative;
  animation: car_right var(--row_7_speed) linear infinite;
}

.row_8_anim {
  background-repeat: no-repeat;
  position: relative;
  animation: car_right var(--row_8_speed) linear infinite;
}

.row_9_anim {
  background-repeat: no-repeat;
  position: relative;
  animation: car_left var(--row_9_speed) linear infinite, turtle_animation 1s linear infinite;
}

.row_10_anim {
  background-repeat: no-repeat;
  position: relative;
  animation: car_right var(--row_10_speed) linear infinite;
}

 .frog::after {
  content: '';
  background-image: url('../assets/frogger1.png');
  background-position: center;
  background-size: contain;
  background-size: 100% 100%;
  width: inherit;
  height: inherit;
  display: inline-block;
  position: relative;
  transform: scale(0.8, 0.8) rotate(var(--frog_rotate));
  animation: var(--frog_jump);
  z-index: 1;
}

.frog_win {
  background: darkgreen;
}

.frogger_start_text {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  font-size: small;
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  animation: frogger_start_text_anim 1s linear infinite;
}

.frogger_bottom_bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.frogger_point_container {
  display: flex;
}

.frogger_time_container {
  display: flex;
  align-items: center;
}

.frogger_timer {
  width: 200px;
  height: 20px;
  background: #5EDD5F;
  margin-right: 10px;
}

.frogger_time {
  font-family: 'Press Start 2P', cursive;
  color: yellow;
  font-weight: 300;
}

.frogger_top_bar {
  display: flex;
  width: 100%;
}

.frogger_top_bar > * {
  flex: 1;
}

.frogger_up_1_container > h2 {
  font-family: 'Press Start 2P', cursive;
  color: yellow;
}

.frogger_up_1_container > div {
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
}

.frogger_score_container > h2 {
  font-family: 'Press Start 2P', cursive;
  color: yellow;
}

.frogger_score_container > div {
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
}

.frogger_life {
  height: 20px;
  width: 20px;
  background: url('../assets/frogger_life.png');
}

.frogger_point_fill {
  background: rgb(126, 98, 151);
}

.frogger_point_saved {
  background: rgb(126, 98, 151);
}

.frogger_life_animation_class {
  animation: frogger_life_animation 30s linear;
}

.safe_frog_right::after {
  content: '';
  background-image: url('../assets/saved_frog.png');
  background-position: center;
  background-size: contain;
  background-size: 100% 100%;
  width: inherit;
  height: inherit;
  display: inline-block;
  position: relative;
  left: 20px;
  transform-origin: 50% 100%;
  transform: scale(0.75, 0.75);
}

.safe_frog_left::after {
  content: '';
  background-image: url('../assets/saved_frog.png');
  background-position: center;
  background-size: contain;
  background-size: 100% 100%;
  width: inherit;
  height: inherit;
  display: inline-block;
  position: relative;
  right: 22px;
  transform-origin: 50% 100%;
  transform: scale(0.75, 0.75);
}

.frogger_water_dead::after {
  content: '';
  background-image: url('../assets/frogger1.png');
  background-position: center;
  background-size: contain;
  background-size: 100% 100%;
  width: inherit;
  height: inherit;
  display: inline-block;
  position: relative;
  z-index: 1;
  animation: water_dead_animation 2s linear;
}

.frogger_car_dead::after {
  content: '';
  background-image: url('../assets/frogger1.png');
  background-position: center;
  background-size: contain;
  background-size: 100% 100%;
  width: inherit;
  height: inherit;
  display: inline-block;
  position: relative;
  z-index: 1;
  animation: car_dead_animation 2s linear;
}

.row_5_test::before {
  content: '';
  background-image: 
    url('../assets/row_5_car_front.png'),
    url('../assets/row_5_car_back.png');
  background-position: 
    0% 0%,
    40px 0px;
  background-size: 
    40px 40px;
  width: 80px;
  background-repeat: no-repeat;
  height: inherit;
  display: inline-block;
  position: relative;
  animation: car_left var(--row_5_speed) linear;
}

.row_6_test::before {
  content: '';
  background-image: var(--row_6_bg_images);
  background-position: var(--row_6_bg_pos);
  background-size: 40px 40px;
  width: calc(40px*var(--row_6_width));
  background-repeat: no-repeat;
  height: inherit;
  display: inline-block;
  position: relative;
  animation: car_left var(--row_6_speed) linear;
}

.row_7_test {
  border: 1px solid blue;
}

.row_7_test::before {
  content: '';
  background-image: var(--row_7_bg_images);
  background-position: var(--row_7_bg_pos);
  background-size: 40px 40px;
  width: calc(40px*var(--row_7_width));
  background-repeat: no-repeat;
  height: inherit;
  display: inline-block;
  position: relative;
  right: calc(40px*var(--row_7_width));
  top: var(--row_7_height);
  animation: car_right_test 10.2s linear;
  border: 1px solid green;
}

/* 
.row_8_test {
  border: 1px solid blue;
}

.row_8_test::before {
  content: '';
  background-image: var(--row_8_bg_images);
  background-position: var(--row_8_bg_pos);
  background-size: 40px 40px;
  width: calc(40px*var(--row_8_width));
  background-repeat: no-repeat;
  height: inherit;
  display: inline-block;
  position: relative;
  right: calc(40px*var(--row_8_width));
  top: var(--row_8_height);
  animation: car_right_test 10.2s linear;
  border: 1px solid green;
} */



@keyframes car_left {
  0% {transform: translateX(20px);}
  100% {transform: translateX(-20px);}
}

@keyframes car_right {
  0% {transform: translateX(-20px);}
  100% {transform: translateX(20px);}
}

/* @keyframes car_right_test {
  0% {transform: translateX(-20px);}
  100% {transform: translateX(680px);}
}

@keyframes frogger_right {
  0% {transform: translateX(-20px);}
  100% {transform: translateX(20px);}
} */

@keyframes jump_animation {
  0% {background-image: url('../assets/frogger1.png');}
  50% {background-image: url('../assets/frogger.png');}
  100% {background-image: url('../assets/frogger1.png');}
}

@keyframes water_dead_animation {
  0% {background-image: url('../assets/water_dead_1.png');}
  25% {background-image: url('../assets/water_dead_2.png');}
  50% {background-image: url('../assets/water_dead_3.png');}
  75% {background-image: url('../assets/water_dead_4.png');}
  100% {background-image: url('../assets/water_dead_4.png');}
}

@keyframes car_dead_animation {
  0% {background-image: url('../assets/car_death_1.png');}
  25% {background-image: url('../assets/car_death_2.png');}
  50% {background-image: url('../assets/car_death_3.png');}
  75% {background-image: url('../assets/water_dead_4.png');}
  100% {background-image: url('../assets/water_dead_4.png');}
}

@keyframes turtle_animation {
  0% {background-image: url('../assets/turtle_1.png');}
  33% {background-image: url('../assets/turtle_2.png');}
  66% {background-image: url('../assets/turtle_3.png');}
  100% {background-image: url('../assets/turtle_1.png');}
}

@keyframes frogger_life_animation {
  0% {width: 200px;}
  100% {width: 0px;}
}

@keyframes frogger_start_text_anim {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes controls_anim {
  0% {
    width: 40px;
    max-height: 40px;
  }
  50% {
    width: 250px;
    max-height: 40px;

  }
  100% {
    width: 250px;
    max-height: 400px;

  }
}

@keyframes controls_anim_2 {
  0% {
    width: 250px;
    max-height: 400px;

  }
  50% {
    width: 250px;
    max-height: 40px;
  }
  100% {
    width: 40px;
    max-height: 40px;
  }
}