@import "./globals.css";

/* ------------------------------ */
/* mobile/tablet size */
@media (max-width: 768px) {
  /* NB: breakpoint should match  --layout-breakpoint */
  body {
    background: #fff;
  }

  /* collapse home/404 card */
  #index-container {
    margin: 0px auto;
  }
}

/* ------------------------------ */
/* full size */
@media (min-width: 768px) {
  /* NB: breakpoint should match  --layout-breakpoint */
  body {
    background: #eee;
  }

  /* home/404 card */
  #index-container {
    border-radius: 5px;
    box-shadow: 10px 10px 8px var(--home-card-shadow-color);
    margin: 20px auto;
  }
}

/* ------------------------------ */
/* home/404 page : breakpoint should match --layout-breakpoint*/
#index-container {
  max-width: var(--layout-breakpoint);
  background-color: var(--home-card-background-color);
}

#index-container #site-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#index-container .img-container {
  width: 75%;
}

#index-container .txt-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-top: -20px;
}

#index-container .txt-container p {
  max-width: 400px;
  text-align: center;
  color: var(--home-secondary-text-color);
}

#index-container .txt-container h1 {
  margin-bottom: 5px;
  text-align: center;
}

#index-container .txt-container h4 {
  margin: 2px;
}

body {
  font-family: "questrial", sans-serif !important;
}