*{
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}
body{
    height: 100%;
    background: #121212;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(255, 255, 255);

    display: flex;
    justify-content: center;
    align-items: center;
}

/*Blobs*/
/*-------------------------------------------------------------------------*/
.blobs{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
}
.blob:nth-child(1){
  --angle-delay: 0s;
  --moving-delay: 0s;
  --color: rgba(255, 57, 106, 0.8);
}
.blob:nth-child(2){
  --angle-delay: -3s;
  --moving-delay: -2s;
  --color: rgba(255, 128, 77, 0.8);
}
.blob:nth-child(3){
  --angle-delay: -6s;
  --moving-delay: -4s;
  --color: rgba(162, 0, 255, 0.8);
}
.blob:nth-child(4){
  --angle-delay: -9s;
  --moving-delay: -6s;
  --color: rgba(0, 87, 156, 0.8);
}
.blob:nth-child(5){
  --angle-delay: -12s;
  --moving-delay: -8s;
  --color: rgba(255, 165, 0, 0.8);
}
.blob{
  position: relative;
  animation: angle 15s var(--angle-delay) infinite linear;
}
.blob::after{
  content: '';
  position: absolute;
  width: 240px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--color);
  filter: blur(38px);
  animation: moving 10s var(--moving-delay) infinite ease-in-out alternate;
}
@keyframes angle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes moving {
  from {
    transform: translate(-50%, -150%);
  }
  to {
    transform: translate(-50%, 50%);
  }
}
/*-------------------------------------------------------------------------*/

.info_container {
  padding: 60px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(38px);
  border-radius: 25px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.error-title {
    font-size: 48px;
    margin-bottom: 14px;
    line-height: initial;
}

p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}