.game{
    position: absolute;
    width: 100%;
    height: 100%;
}

.containerGame{
    position: absolute;
    width: 100%;
    height: 100%;
}

.containerGame-color-Beige {
  background-color: #E5D2B4;
}

.containerGame-color-White {
  background-color: #FFF;
}

.containerGame-color-Brown2 {
  background-color: #DED6BD;
}
.containerGame-color-Turquoise{
    background-color: #d0e2e0
}

.containerGame-color-Turquoise1{
    background-color: #6DB8B0
}

.containerGame-color-Turquoise3{
    background-color: #1E7C88
}

.containerGame-color-Red{
    background-color: #d4d4d3
}

.containerGame-color-Blue{
    background-color: #D8EBF8
}

.GameColor-Brown {
  background-color: #F4EED7;
}

.GameColor-White {
  background-color: #FFF;
}
.GameColor-Beige {
  background-color: #E5D2B4;
}

.loader{
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);

}

 #canvas {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  }



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         ANUNCIO        %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


 .initGame {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  }

 .buttons{
  position: absolute;
  background-color: inherit;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
   text-align: center;
 }

  .buttons > button{
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
    outline: 0;
    cursor: pointer;
    margin: 10px;
    display: inline-block;
 }


.buttons > h1{

    font-size: 20px;

 }





.message {
    text-align: center;
}

.message > h2{
    font-size: 18px;
    color:white;
    font-weight: 200;
    padding: 15px 32px;
 }



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%          COLORS         %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.initGame-color-Green {
  background-color: #d4d4d3;
}

.message-color-Green {
    background-color: #1A7E3A;
}

.buttons-color-Green > button{
    background-color: #1A7E3A; 
}

.initGame-color-Purple {
  background-color: #d4d4d3;
}

.message-color-Purple {
    background-color: #660080;
}

.buttons-color-Purple > button{
    background-color: #660080; 
}


.initGame-color-Red {
  background-color: #d4d4d3;
}

.message-color-Red {
    background-color: #a00000;
}

.buttons-color-Red > button{
    background-color: #A00000; 
}


.initGame-color-Brown {
  background-color: #d4d4d3;
}

.message-color-Brown {
    background-color: #956817;
}

.buttons-color-Brown > button{
    background-color: #956817; 
}

.initGame-color-Turquoise {
  background-color: #d4d4d3;
}

.message-color-Turquoise {
    background-color: #0c9482;
}

.buttons-color-Turquoise > button{
    background-color: #0c9482; 
}

.initGame-color-Blue {
  background-color: #d4d4d3;
}

.message-color-Blue {
    background-color: #1669B7;
}

.buttons-color-Blue > button{
    background-color: #1669B7; 
}



.initGame-color-Orange {
  background-color: #d4d4d3;
}

.message-color-Orange {
    background-color: #af4600;
}

.buttons-color-Orange > button{
    background-color: #af4600; 
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         PORTRAIT       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


@media only screen and (orientation: portrait) {


   .initGame {
      position: absolute;
      width: 85%;
      height: 60%;
      top: 50%; 
      left: 50%;
      transform: translate(-50%, -50%);
    }

  

}

@media only screen and (max-width: 768px) {

  .initGame {
      position: absolute;
      width: 75%;
      height: 65%;
      top: 50%; 
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .message > h2{
        font-size: 14px;
     }

    .buttons > h1{
        font-size: 16px;
    }
    
}