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



body{
    height: 100vh;
    background-color: rgb(255, 255, 255);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    grid-gap: 10px;
  }

  .container2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    translate: 70px -300px;
  }

  .grid2 {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;;
    grid-gap: 10px;
    
  }
 
  .red {
      width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
  }
  .red.active{
    background-color: rgb(253, 123, 100);
    box-shadow: 0 5px 10px rgb(red) ;
  }

  .red:hover{
    box-shadow: 0 0 20px 10px rgba(128, 4, 4, 0.22);
  }

  .blue {
    width: 100px;
    height: 100px;
    background-color: rgb(0, 0, 255);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
  }

  .blue:hover{
    box-shadow: 0 0 20px 10px rgba(2, 98, 243, 0.22);
  }

  .blue.active{
    background-color: aqua;
    box-shadow:0 5px 10px rgb( blue);
  }


  

  .green {
      width: 100px;
    height: 100px;
    background-color: rgb(57, 160, 57);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
  }

  .green:hover{
    box-shadow: 0 0 20px 10px rgba(1, 252, 135, 0.22);
  }

  .green.active{
    background-color: chartreuse;
    box-shadow: 0 5px 10px green;
  }


  

  .yellow {
      width: 100px;
    height: 100px;
    background-color: rgb(255, 208, 0);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
  }

  .yellow.active{
    background-color: rgb(241, 222, 127);
    box-shadow: 0 5px 10px rgb(239, 239, 113) ;
  }
  .yellow:hover{
    box-shadow: 0 0 20px 10px rgba(252, 248, 1, 0.22);
  }


  


  

    
  
.boton {
      position: relative;
      padding: 10px 22px;
      background: blue;
      border-radius: 6px;
      color: aliceblue;
      border: none;
      font-size: 20px;
      margin-top: 10px;
      font-weight: 400;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
    
    
}

.boton:hover{
  box-shadow: 0 0 20px 10px rgba(19, 4, 158, 0.22);
}

.title {
  text-align: center;
  font-size: 48px;
  margin-bottom: 20px;

  
}
button {
  font-size: 20px;
  padding: 10px 20px;
  margin: 5px;
}


.animate {
  transform: scale(0.95);
  transition: transform 0.1s;
}