@font-face {
  font-family: "CodecPro";
  src: url(../fonts/CodecPro/Codec-Pro-Regular.otf);
}

@font-face {
  font-family: "CodecPro-ExtraBold";
  src: url(../fonts/CodecPro/Codec-Pro-Extrabold.woff2);
}

@font-face {
  font-family: "CodecPro-ExtraBold-Italic";
  src: url(../fonts/CodecPro/Codec-Pro-ExtraBold-Italic.otf);
}

@font-face {
  font-family: "Lato-Regular";
  src: url(../fonts/Lato/Lato-regular.ttf);
}

html,
body {
  height: 100%;
  justify-items: center;
}

h1,
p {
  color: #001944;
  margin: 0;
}

h1 {
  font-family: "CodecPro-ExtraBold";
}

.content {
  height: 100%;
  display: flex;
  align-items: center;
  max-width: 968px;
}

.error-container {
  position: relative;
  width: min-content;
}

.error-container p {
  font-family: "CodecPro-ExtraBold-Italic";
}

.error-text {
  font-size: 1.65rem;
  line-height: 110%;
  margin: 0;
  padding-left: 16px;
  width: min-content;
}

.error-code {
  font-size: 5rem;
  margin: 0;
  width: min-content;
}

.error-description {
  padding-left: 56px;
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.error-description p {
  font-family: "Lato-Regular";
  font-size: 0.875rem;
  line-height: 150%;
  font-weight: 400;
}

.error-actions {
  display: flex;
  gap: 8px;
}

.error-actions button {
  font-family: "CodecPro";
  font-size: 0.875rem;
  font-weight: 700;
  height: 40px;
  padding: 0 16px;
  background-color: #1778b8;
  color: white;
  border-radius: 4px;
  border: 1px solid #1778b8;
}

.error-actions button:hover {
  cursor: pointer;
  background-color: #2988c9;
  border-color: #2988c9;
}

.error-actions button.outlined:hover {
  cursor: pointer;
  background-color: white;
  border-color: #2988c9;
  color: #2988c9;
}

.error-actions button.outlined {
  background-color: white;
  color: #1778b8;
}

.unauthorized-img {
  background-image: url(../images/WomanError.svg);
  background-repeat: no-repeat;
  height: 325px;
  min-width: 480px;
}

.unauthorized-img .error-container {
  top: 80px;
  left: 292px;
}

.server-error-img {
  background-image: url(../images/LoadingFailure.svg);
  background-repeat: no-repeat;
  height: 366px;
  min-width: 438px;
}

.server-error-img .error-container {
  top: 124px;
  left: 240px;
}

.not-found-img {
  background-image: url(../images/CrushedBox.svg);
  background-repeat: no-repeat;
  height: 326px;
  min-width: 532px;
}

.not-found-img .error-container {
  top: 80px;
  left: 312px;
}

.timeout-img {
  background-image: url(../images/Timeout.svg);
  background-repeat: no-repeat;
  height: 162px;
  min-width: 162px;
}