$color-primary: #221DAF;
$color-primary-90: #3430B6;
$color-primary-80: #4642BC;
$color-primary-70: #5955C3;
$color-primary-60: #6B67C9;
$color-primary-50: #7d7ad0;

$color-secondary: #669DF9;
$color-secondary-90: #72a5f9;
$color-secondary-80: #7fadfa;
$color-secondary-70: #8bb5fa;
$color-secondary-60: #98bdfb;
$color-secondary-50: #a4c5fb;

$text-color: #4D4D4D;

$box-shadow: 0px 0px 10px #ededee;

$border-radius: 37px;
$border-radius-high: 72px;
html{
  //overflow: auto;
 }
.container-404 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;

  .left, .right {
    //flex: 1;
  }
  a.more {
    padding: 5px 15px;
    border: 0;
    background-color: $color-secondary;
    color: #fff;
    font-size: 1rem;
    border-radius: $border-radius;
    cursor: pointer;
    transition: 200ms all;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: space-between;
    gap: 5px;

    i {
      color: #fff;
      font-weight: 600;
    }

    &:hover {
      background-color: $color-secondary-90;
    }
  }

  .left {
    padding: 2rem;

    h1 {
      font-size: 2.5rem;
      font-weight: 700;

      .highlight {
        color: #2c4ef5;
      }

      sup {
        font-size: 1rem;
        vertical-align: top;
        margin-left: 4px;
      }
    }

    .subtitle {
      color: #2c4ef5;
      font-size: 1rem;
    }

    .error {
      margin-top: 2rem;
      margin-bottom: 2rem;
      font-size: 1.1rem;
      color: #666;

      strong {
        font-size: 1.2rem;
        color: #333;
      }
    }

  }

  .right {
    text-align: center;

    img {
      max-width: 338px;
      height: auto;
    }
  }
}

@media only screen and (max-width: 680px) {
  .container-404 {
    padding:1rem !important;
  }
    .right {
      display: none!important;
  }
}