@keyframes fadeInGhost {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ghost-404 { 
    display: flex; align-items: center; justify-content: center; gap: 0 10px; margin-bottom: 20px;  
    user-select: none; pointer-events: none;
    animation: fadeInGhost 2s forwards;
}
.ghost-404 .letter { 
    font-family: "Fakturnik Icons"; font-weight:400;  -moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;
    line-height: 1; font-size: 140px; 
    color: #0a374d;
    background-image: linear-gradient(135deg, #2d4957, #031f31 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ghost-404 .character {  }


/* GHOST */
.ghost-container-wrapper { position: relative; padding: 30px 25px;  }
.ghost-container { 
    position: relative; width: 120px; 
    animation: upndown 3s ease-in-out infinite;
} 
.ghost-eyes {  position: absolute; left: 50%; top: 45%; height: 15px; width: 76px;  }
.ghost-eye-left,
.ghost-eye-right { width: 15px; height: 15px; background: white; border-radius: 50%; margin: 0 10px; position: absolute; }
.ghost-eye-left { left: 0; }
.ghost-eye-right { right: 0; }

.ghost-description { text-align: center; margin: 0 auto; max-width: 580px; font-size: 16px; margin-bottom: 40px;    }

.ghost-actions { display: flex; align-items: center; justify-content: center; gap: 0 20px; }
.ghost-actions a.btn-md { font-size: 19px; }
.ghost-actions a.btn-md strong { font-weight: 700; } 

/* SYMBOLS */
.ghost-symbol:nth-child(1) { opacity: 0.35; animation: starShine 4s ease-in-out 3s infinite; }
.ghost-symbol:nth-child(1):before, 
.ghost-symbol:nth-child(1):after { content:''; width: 12px; height: 4px; background: var(--purple); position: absolute; border-radius: 5px; bottom: 65px; left: 0; }
.ghost-symbol:nth-child(1):before { transform: rotate(45deg); }
.ghost-symbol:nth-child(1):after { transform: rotate(-45deg); }
.ghost-symbol:nth-child(2) { position: absolute; left: -5px; top: 30px; height: 18px; width: 18px; border: 4px solid; border-radius: 50%; border-color: var(--purple); opacity: 0.2; animation: shine 4s ease-in-out 1.3s infinite; }
.ghost-symbol:nth-child(3) { opacity: 0.35; animation: starShine 3s ease-in-out 0.5s infinite; }
.ghost-symbol:nth-child(3):before, 
.ghost-symbol:nth-child(3):after { content:''; width: 12px; height: 4px; background: var(--purple); position: absolute; border-radius: 5px; top: 5px; left: 40px; } 
.ghost-symbol:nth-child(3):before { transform: rotate(90deg); }
.ghost-symbol:nth-child(3):after { transform: rotate(180deg); }
.ghost-symbol:nth-child(4) { opacity: 0.35; animation: starShine 6s ease-in-out 1.6s infinite; }
.ghost-symbol:nth-child(4):before, 
.ghost-symbol:nth-child(4):after { content:''; width: 15px; height: 4px; background: var(--purple); position: absolute; border-radius: 5px; top: 10px; right: 30px; } 
.ghost-symbol:nth-child(4):before { transform: rotate(45deg); }
.ghost-symbol:nth-child(4):after { transform: rotate(-45deg); }
.ghost-symbol:nth-child(5) { position: absolute; right: 5px; top: 40px; height: 12px; width: 12px; border: 3px solid; border-radius: 50%; border-color: var(--purple); opacity: 0.2; animation: shine 1.7s ease-in-out 7s infinite; }
.ghost-symbol:nth-child(6) { opacity: 0.35; animation: starShine 2s ease-in-out 6s infinite; }
.ghost-symbol:nth-child(6):before, 
.ghost-symbol:nth-child(6):after { content: ''; width: 15px; height: 4px; background: var(--purple); position: absolute; border-radius: 5px; bottom: 65px; right: -5px; }
.ghost-symbol:nth-child(6):before { transform: rotate(90deg); }
.ghost-symbol:nth-child(6):after { transform: rotate(180deg); }

@keyframes upndown {
  0% { transform: translateY(-10px); }
  50% { transform: translateY(2px); }
  100% { transform: translateY(-10px); }
}
@keyframes smallnbig {
  0% { width: 90px; }
  50% { width: 100px; }
  100% { width: 90px;   }
}
@keyframes starShine {
  0% { opacity: 0.6; }
  25% { opacity: 0.2; }
  50% { opacity: 0.4; }
  100% { opacity: 0.6; }
}
 
.ghost-shine { position: relative; overflow: hidden; }
.ghost-shine::before {
  content:''; position: absolute; width: 20px; height: 100px; background-color: rgba(255, 255, 255, 1); bottom: -25px; left: 0; 
  transform: translateX(-50px) rotate(45deg); transition: transform 0.5s ease;
}

.ghost-shine.btn-outline::before {}
.ghost-shine.btn-outline[data-theme="blue"]::before { background-color: rgba(10, 160, 250, 1); border-color: rgba(10, 160, 250, 1); }

.ghost-shine:hover::before {
    transform: translateX(250px) rotate(45deg);
}


/* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║                                       BREAKPOINTS                                             ║ */
/* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1280px) {}
@media (min-width: 1366px) {}
@media (min-width: 1440px) {}
@media (min-width: 1600px) {}
@media (min-width: 1920px) {} /* 1920px & Up */
/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║ ####################################   DEVELOPMENT BREAKPOINTS   ##################################  ║ */
/* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */
/* 4XL */ @media (max-width: 1919.98px) { } /* @media -----------------------------------| width < 1920px |-------------------------------------------*/
/* 3XL */ @media (max-width: 1599.98px) { } /* @media -----------------------------------| width < 1600px |-------------------------------------------*/
/* 2XL */ @media (max-width: 1439.98px) {} /* @media -----------------------------------| width < 1440px |-------------------------------------------*/
/* XL */ @media (max-width: 1365.98px) {} /* @media -----------------------------------| width < 1366px |-------------------------------------------*/

/* LG */ 
@media (max-width: 1279.98px) {

    .ghost-description { font-size: 15px; }
    .ghost-actions a.btn-md { font-size: 17px; }
 

} /* @media -----------------------------------| width < 1200px |-------------------------------------------*/

/* MD */ @media (max-width: 991.98px) {


  .ghost-404 .letter { font-size: 100px; }
  .ghost-container { width: 90px; }
 
   
} /* @media -----------------------------------| width < 992px |-------------------------------------------*/

/* SM */ @media (max-width: 767.98px) {

   
   
} /* @media -----------------------------------| width < 768px |-------------------------------------------*/

/* XS */ @media (max-width: 575.98px) and (orientation:landscape) {}

@media (max-width: 575.98px) {  

  .ghost-404 .letter { font-size: 68px; }
  .ghost-container { width: 78px; }

  .ghost-actions { flex-wrap: wrap; }
  .ghost-actions > [class^="btn-"] { width: 100%; margin-bottom: 20px; }
  .ghost-actions > [class^="btn-"]:last-child { margin-bottom: 0; }
 
   
} /* @media -----------------------------------| width < 576px |-------------------------------------------*/

/* XXS */ @media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { }
@media (max-width: 319.98px) {  
 
   
} /* @media -----------------------------------| width < 320px |-------------------------------------------*/
/* ════════════════════════════════════════════╣     END    ╠════════════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║                                 ¡ NO STYLES BELOW THIS LINE PLEASE !                                 ║ */
/* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */