@natlibfi/melinda-ui-commons/src/styles/pageNotFound.css

Common modules for Melinda UI applications

/* ---------------------------------------------------------------------------- */
/* Styles for 404 page                                                          */
/* ---------------------------------------------------------------------------- */

#root {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#pageNotFound {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--color-grey-20);
}

@media screen and (min-width: 1800px) {
  #pageNotFound {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 550px;
  }

  #pageNotFoundInfo {
    max-width: 66%;
    min-width: 50%;
  }
}

#pageNotFoundInfo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  /*   background-color: var(--color-primary-white); */
  color: var(--color-primary-blue);
  padding: 25px;
  margin: 25px;
  gap: 25px;
}

#pageNotFoundInfo h3 {
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0px;
}

#pageNotFoundInfo #sadFaceIcon {
  font-size: 30px;
  padding: 0.5em;
}

#pageNotFoundInfo a {
  text-decoration: none;
}