/*o elemento html define o corpo inteiro da página, ele é o elemento pai de qualquwr elemento que venha a ser adicionado, portanto
para definirmos por exemplo a alturado body em relação a página, precisamos definir a altura do html, pois é ele quem controla o 
tamanho que a janela ocupa no nevegador*/

html {
  height: 100%; 
  background-color: antiquewhite;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
}

body {
  margin: 5%; 
  height: 70%;
  width: 50%;
  padding: 3%;
  background-color: lightsalmon;
  display: flex;
  border-radius: 5px;
  border: 5px solid black;
  flex-direction: column;
  font-family: 'Press Start 2P', 'Courier New', monospace;
}

h1 {
  order: 1;
  text-align: left;
}
.container {
  order: 1;
  display: flex;
  /*background-color: lightcoral;*/
  /*flex-wrap: wrap;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 5%;
  padding: 1%;
  height: 30%;
  
}

.linha-itens, .linha-coracoes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px;
}

.item {
  display: flex;
  order: 1;
  background-color: lightblue;
  padding: 5px;
  border: 2px solid darkblue;
  border-radius: 5px;
  width: 40px;
  height: 40px;
  text-align: center;
}

.flex-container {
  order: 2;
  display: flex;
}

.coracoes {
  display: flex;
  order: 2;
  background-color: lightpink;
  width: 10px;
  height: 10px;
  border-radius: 2.5px;
  padding: 5px;
  text-align: center;
  border: 1px solid darkblue;

}

.flex-container {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
    padding: 50px;
    width: 25vw;
    align-items: center;
}

.flex-item {
    font-family: 'Helvetica';
    flex: 5px 1 3; 
    padding: 2.5px;
    border: 1px solid black;
    margin: 2px;
}

/*
.super-container {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
 */

.super-container {
  order: 2;
  display: flex;
  flex-direction: column; /* empilha os elementos verticalmente */
  align-items: center;     /* centraliza horizontalmente */
  justify-content: center; /* centraliza verticalmente */
  gap: 20px;               /* espaçamento entre os elementos internos */
  padding: 30px;
  margin: auto;
  max-width: 600px;
  width: 70%;
  /*
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
 */ 
}