/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
.box {
  /* Tamanho completo */
  max-width: 800px;
  /* Cima > Lados > Baixo. Deixar "auto" pra automático */
  margin: auto auto;
   /* Permite separar o site em um estilo de "Grid" e quantos pixels entre cada elemento da grid */
  display: grid;
  background-color: #000000;
   grid-gap: 1px ; 
   border: #5A6B73 1px solid;
   padding: 5px;
  /* Muda o tamanho das colunas pra grid, bom pro nav e main */
  grid-template-columns: 200px minmax(0,1fr);

}

  

/* Header, Nav, Main and Footer style for the entire website */
header, nav, main, footer {
  border: #5A6B73 1px solid;
}

/* Header, Nav, Main and Footer configurations of the grid */

header {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background-image: linear-gradient(to right, #212929, #141C1C);
  color: #fff;
}

nav {
  grid-row: 1 / 3 ;
  grid-column: 1 / 2 ;
  height: max-content;
  background-image: linear-gradient(to right, #212929, #141C1C);
  color: #fff;

}

main {
  padding: 5px;
  grid-row: 2 / 3 ;
  grid-column: 2 / 3 ;
  height: max-content;
  
}

footer {
  grid-row: 3 / 4 ;
  grid-column: 1 / 3 ;
  background-image: linear-gradient(to right, #212929, #141C1C);
  color: #fff;

}

body {
  color: white;
  font-family: 'FortySeven Micro NBP', sans-serif;
  background-image: url("https://files.catbox.moe/yq6qlk.png");
  background-size: 100%
}