@font-face {
  font-family: SegoeUI;
  src: url(images/SegoeUI.ttf);
}

body {
  font-family: SegoeUI, Roboto, "Helvetica Neue", sans-serif;
  margin: 0 auto;
  background-color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

h1 {
  font-size: 40px;
  font-weight: 700;
  color: #0D3652;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

p {
  font-size: 20px;
  color: #0D3652;
}

.error-page-500__card, .error-page-401__card {
  height: 65vh;
  width: 50vw;
  box-shadow: 0 3px 6px #00000029;
  border-radius: 10px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  position: fixed;
}

.error-page__number {
  width: 22vw;
  position: absolute;
  top: 3vh;
}

.error-page-500__card__content, .error-page-401__card__content {
  padding: 2rem;
  @media (min-width: 400px) {
    padding: 4rem;
  }
}

.error-page-500__card__content::after {
  content: "";
  position: absolute;
  top: 3vh;
  left: 5vw;
  width: 87vw;
  height: 90vw;
  max-width: unset;
  background-size: contain;
  background-image: url("images/cable.svg ");
  background-repeat: no-repeat;
}

.error-page-401__card__content::after {
  content: "";
  position: absolute;
  top: 16vh;
  left: 20vw;
  width: 61vw;
  height: 100vw;
  max-width: unset;
  background-size: contain;
  background-image: url("images/warning.svg ");
  background-repeat: no-repeat;
}

@media (max-width: 1600px) {
  .error-page-500__card__content::after {
    top: 6vh;
    left: 5vw;
  }
}


@media (max-width: 1455px) {
  .error-page-500__card__content::after {
    top: 21vh;
    left: -2vw;
  }

  .error-page-401__card__content::after {
    top: 25vh;


  }
}

@media (max-width: 1280px) {
  .error-page-401__card__content::after {
    top: 31vh;
  }
}

@media (max-width: 1180px) {
  .error-page-500__card__content::after {
    top: 29vh;
    left: 10vw;
  }

  .error-page-401__card__content::after {
    top: 40vh;
  }
}

@media (max-width: 940px) {
  .error-page-500__card__content::after {
    top: 28vh;
    left: -12vw;
    width: 112vw;
  }

  .error-page-401__card__content::after {
    top: 36vh;
    width: 80vw;
    left: 9vw;
  }
}

@media (max-width: 800px) {
  .error-page-500__card__content::after {
    top: 25vh;
    left: -19vw;
    width: 130vw;
  }

  .error-page-401__card__content::after {
    top: 28vh;
    width: 100vw;
    left: -5vw;
  }

  .error-page-500__card, .error-page-401__card {
    height: 45vh;
  }

  .error-page__number {
    width: 25vw;
  }

  h1 {
    font-size: 25px;
  }

  p {
    font-size: 16px;
  }
}

@media ( max-width: 670px) {
  .error-page-401__card__content::after {
    top: 36vh;
    left: -13vw;
  }
}

@media (max-width: 550px) {
  .error-page-500__card__content::after {
    top: 23vh;
    left: -26vw;
    width: 200vw;
  }

  .error-page-401__card__content::after {
    top: 33vh;
    width: 112vw;
  }

  .error-page-500__card, .error-page-401__card {
    width: 87vw;
  }

  h1 {
    font-size: 25px;
  }

  p {
    font-size: 16px;
  }

  .error-page__number {
    width: 43vw;
  }
}

@media (max-width: 430px) {
  .error-page-500__card__content::after {
    top: 28vh;
    left: -20vw;
  }
}

@media (max-width: 374px) {
  .error-page__number {
    top: 10px;
    width: 63vw;
  }
}