/* ==================================================
   IMPORTS
   ================================================== */
@import 'fonts.css';

/* ==================================================
   RESET + BASE
   ================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: lemonmilk, sans-serif;
  color: #DDDBCB;
  background-color: #050505;
}

/* ==================================================
   LAYOUT / CONTAINERS
   ================================================== */

/* Header sticky */
#d2 {
  position: sticky;
  top: 0;

  display: flex;
  align-items: center;

  height: 80px;
  width: 100%;

  background-color: #1B9AAA;
  border-bottom: 2px solid #050505;

  z-index: 1;
}

/* Contenitore principale */
#d4 {
  margin: 0 auto;
  padding: 30px 0;
  max-width: 1300px;
  background-color: #F5F1E3;
}

/* ==================================================
   GENERIC DIV STYLES
   ================================================== */

/* Tutti i div tranne quello principale di sfondo */
div:not(#d1):not(#d4):not(.responsive-table) {
  background-color: orangered;
  text-align: center;
}

/* ==================================================
   TYPOGRAPHY
   ================================================== */
#d4 > * {
  color: #050505;
  padding: 20px 50px;
}

h1 {
  margin: 0 auto;
  width: fit-content;
  text-transform: capitalize;
}

/* ==================================================
   Tabella
   ================================================== */

.responsive-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2%;
  text-align: center;
}

@media (max-width: 768px) {
  .responsive-table {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
}
.responsive-table>a>img {
  width: 95%;
}
.responsive-table>*:hover {
  transition-duration: 0.2s;
  transform: scale(1.1);
}