* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.icons {
  padding: 10px;
}
.container {
  background-color: darkgray;
  min-height: 100vh; /*altura minima do container*/
  display: flex;
  gap: 15px; /*opx se aplica as colunas, 15px se aplica a linha*/
  justify-content: center; /*alinha os intens ao centro horizontalmente*/
  align-items: center; /*alinha no centro do conteiner*/
  flex-direction: row;
  flex-wrap: wrap; /*quebra os itens deacordo com a tela*/
  /*justify-content: space-around; /*cria espaçamentos entre os itens iguais em todos os lados*/
  /*justify-content: space-between; /*deixa os itens o mais separados possível*/
  /* justify-content: space-evenly; /*deixa o espaçamento iguais entre os itens*/
  /* flex-direction: column-reverse; /*inverte os itens e a fixão*/
  /*flex-direction: row; /*padrão*/
  /*flex-direction: row-reverse; /*inverte os intens e fixão*/
  /*flex-direction: column;*/
  /*row-gap: 15px; /*espaçamento entre os itens*/
  /*column-gap: 15px; /*espaçamento entre os itens em coluna*/
}
.item {
  margin: 20px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 200px; /*tamanho basico do item*/
  flex-grow: 1; /*aumenta o tamanho dos itens sem que eles quebrem de forma imediata*/
  flex-shrink: 1; /*diminuição dos itens de forma igual*/
}

.header {
  flex-basis: 100%;
  padding: 10px;
  background-color: white;
  border: 2px solid black;
  display: flex;
  justify-content: center;
}

.footer {
  flex-basis: 100%;
  padding: 10px;
  background-color: white;
  border: 2px solid black;
  display: flex;
  justify-content: center;
}

@media (max-widht: 610px) {
  h1 {
    font-size: 2em;
    text-align: justify;
  }
  .iframe {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: 1em;
    text-align: center;
  }
}