*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #dddddd;

}

.container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.game_grid{
  width: 50%;
  min-width: 600px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main,
.memory,
.space_invaders,
.chess_game
{
   width: 100%;
   height: 100%;
   user-select: none;
}

.main{
 width: 100%;
 height: 100%;
 background-color: #5ab1a4;
 border-radius: 20px;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;


}


.option{
    width: 60%;
    height: 20%;
    border-radius: 20px;
    transition: box-shadow,width 0.2s ease-in-out;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: max(2vw,1.5em);
    color:#ffffff;
}


.option.first{
    background: linear-gradient(#5a8000b2,#a3d84e9e);
}

.option.first:active{
    background: linear-gradient(#a3d84e9e,#5a8000b2);
}
.option.second{
    background: linear-gradient(#6801689c,#cc22cc9a);
}

.option.second:active{
   background: linear-gradient(#cc22cc9a,#6801689c);
}
.option.third{
    background: linear-gradient(#ff6600a1,#ffa600a1);
}

.option.third:active{
    background: linear-gradient(#ffa600a1,#ff6600a1);
}

.option.fourth{
    background: linear-gradient(#9090019c,#fdfd409d);
}

.option.fourth:active{
    background: linear-gradient(#fdfd409d,#9090019c);
}
.option:hover{
   box-shadow: 0 4px 6px #0000001a, 0 1px 3px #00000014;
   width: 60.8%;
   border: 2px dashed;
}
.memory{
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow-y: auto;
  padding: 10px;
  gap: 10px;
  background-color: #f5f5f5;
  border-radius: 10px;
}
.memory>img{
   cursor: pointer;
   
}

.memory>p{
  font-size: max(2.5em,3vw);
  box-shadow: 0 4px 6px #0000001a, 0 1px 3px #00000014;
  cursor: pointer;
  padding: 3px;
  transition: font-size 0.2s;
}
.memory>p:hover{
  font-size: 2.55em;
}

#left,
#right,
.memory_buttons,
.break_out_buttons,
.space_invaders_buttons,
.chess_go{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.memory_buttons,
.break_out_buttons,
.space_invaders_buttons,
.chess_go{
  display: none;
  width: 100%;
  height: 100%;
}


.memory_buttons>button,
.break_out_buttons>button,
.space_invaders_buttons>button,
.start,
.rotateBoard,
#right>#return{
    padding: 10px;
    font-family: inherit;
    font-size: 1.5em;
    box-shadow: 0 4px 6px #0000001a, 0 1px 3px #00000014;
    border-radius: 10px;
    color: #ffffff;
    width: fit-content;
    cursor: pointer;
    border-width: 1px;
}

.break_out_buttons>button{
  border-radius: 50%;
  font-size: 2.5em;
  border-width: 2px;
}
.space_invaders_buttons>button{
  border-radius: 50%;
  font-size: 2em;
  padding: 10px;
  border-width: 2px;
}

.easy{
  background: linear-gradient(rgb(107, 220, 107),rgb(173, 239, 173));
}
.normal{
  background: linear-gradient(rgb(33, 147, 185),lightblue);
}
.hard{
  background: linear-gradient(#6801689c,#cc22cc9a);
}
.x1{
   background: linear-gradient(#ff0000,#8e1010);
  
}
.x2{
    background: linear-gradient(#ffa600a1,#ff6600a1);
}
.x3{
     background: linear-gradient(#a3d84e9e,#5a8000b2);
}
.button6{
  background: linear-gradient(#00ddff,#2d93a3);
}
.button6:active{
  background: linear-gradient(#2d93a3,#00ddff);
}

.button12{
  background: linear-gradient(#ffff00,#afaf51);
}
.button12:active{
  background: linear-gradient(#afaf51,#ffff00);
}

.button24{
  background: linear-gradient(#ffa500,#b6872f);
}
.button24:active{
  background: linear-gradient(#b6872f,#ffa500);
}

.start{
  font-size: 2em;
  background: linear-gradient(#ff6600a1,#ffa600a1);
}

#return{
  background: linear-gradient(rgb(255, 53, 53),rgb(175, 57, 57));
}

.explication1,
.explication2,
.explication3,
.explication4{
  width: 100%;
  padding: 10px;
  font-size: max(2vw,1.5em);
  color: #ffffff;
  display: none;
  overflow-y: auto;
  line-height: 5.5vh;
}
.explication2{
  font-size: max(1.7vw,1.45em);
   line-height: 5.5vh;
}
.explication3{
  font-size: max(1.6vw,1.3em);
  line-height: 5.5vh;
}
.explication4{
  font-size: max(1.6vw,1.3em);
  line-height: 5.5vh;
}
.status{
   width: 100%;
   padding: 10px; 
   font-size: max(2.5vw,2em);
   display: none;
   flex-direction: column;
   gap: 10px;
   overflow: hidden;
}
.playTurn{
  font-size: max(2.8vw,3em);
}
.space_invaders{
 display: none;
}

.chess_game{
  display:none ;
}

.break_out{
  display: none;
  position: absolute;
  width: 600px;
  height: 564px;
  justify-content: center;
  align-items: center;
  user-select: none;
  color: #888822;
  border: 2px dotted #ffffff;
}
.space_invaders{
  display: none;
  position: absolute;
  width: 600px;
  height: 600px;
  flex-wrap: wrap;
  user-select: none;
  background: linear-gradient(#ffc3ff9c,#e8e8e89a);
}

.space_invaders>div{
  width: 20px;
  height: 20px;
 
}
.invader{
  background: linear-gradient(purple,rgb(83, 26, 83));
  box-shadow: 0 4px 6px #0000001a, 0 1px 3px #00000014;
  
}
.shooter{
  background-color: brown;
  border-radius: 2px;
}
.laser{
  background-color: orange;
  box-shadow: 0 4px 6px #0000001a, 0 1px 3px #00000014;
  border-radius: 50%;
 
}

.boom{
  background-color: red;
}

.result{
  display: none;
  font-size: max(2.5vw,2em);
  color: #ffffff;
}
.menu{
   width: 20%;
   min-width:250px;
   height: 60vh;
   border-radius: 10px;
   background-color: #5dc09f;
   border: 2px dashed;
   box-shadow: 0 8px 6px #0000001a, 0 2px 3px #00000014;
   user-select: none;
  
}

.user{
  position: absolute;
  width: 100px;
  height:20px;
  background: linear-gradient(#9090019c,#fdfd409d);
  border-radius: 10px;
}

.ball{
  position:absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(#ff3535,#af3939);
  border-radius: 50%;
}
.block{
  position: absolute;
  width: 90px;
  height: 20px;
  background: linear-gradient(#ffa600c1,#ff6200d5);
  border: 2px double orange;
  box-shadow: 0 4px 6px #0000001a, 0 1px 3px #00000014;
}
.lifeCount{
  display: none;
  font-size: max(10vw,7em);
  color: #ffffff;
}


.chess_game{
  display: none;
  width: 450px;
  height: 450px;
  flex-wrap: wrap;
  background-color: #808080;
  transition: transform 0.7s ease-in-out;
}
.square{
  width: 56.25px;
  height: 56.25px;
  position: relative;

}

.square svg{
  width: 50.25px;
  height: 50.25px;
  margin: 3px;
  position: relative;
  z-index: -9;
}

path{
  position: relative;
  z-index: -10;
}

.piece{
  position: relative;
  z-index: 9;
}

.beige{
   background-color: #dedec6;
}

.green{
    background-color: #7cba1e;
}
.black{
  fill: #1c1c1c;
}
.white{
  fill: #ffffff;
}
.rotateBoard{
  background: linear-gradient(#ff3535,#af3939);
}
.rotate_180{
  transform: rotate(180deg);
}

.playInfo{
  font-size: max(2.5vw,2em);
  color: #ff0000;
}

@media screen and (max-width: 1023px) and (min-height: 601px) {

  .container{
     transform: rotate(90deg);
  }


}