.error-page{min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(45deg, #121212, #1a1a1a); position: relative; overflow: hidden; perspective: 1000px;} .error-content{text-align: center; z-index: 1; padding: 20px; transform-style: preserve-3d; animation: content-appear 1s ease-out; transition: transform 0.2s ease-out;} @keyframes content-appear{from{transform: translateZ(-1000px); opacity: 0;} to{transform: translateZ(0); opacity: 1;} } .error-number{font-size: 180px; font-weight: bold; position: relative; margin-bottom: 20px; display: flex; justify-content: center; gap: 20px;} .error-number span{display: inline-block; background: linear-gradient(45deg, #1db954, #1ed760); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: 2px 2px 20px rgba(29, 185, 84, 0.3); animation: number-bounce 1s ease-out, float 3s ease-in-out infinite; animation-fill-mode: both;} .error-number span:nth-child(1){animation-delay: 0s, 0.1s;} .error-number span:nth-child(2){animation-delay: 0.1s, 0.2s;} .error-number span:nth-child(3){animation-delay: 0.2s, 0.3s;} @supports not (background-clip: text){.error-number span{color: #1db954; text-shadow: none;} } .error-message{font-size: 32px; color: #ffffff; margin-bottom: 30px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: message-slide 0.5s ease-out 0.5s both;} @keyframes message-slide{from{transform: translateX(-100px); opacity: 0;} to{transform: translateX(0); opacity: 1;} } .error-description{color: #b3b3b3; margin-bottom: 40px; max-width: 600px; font-size: 18px; line-height: 1.6; animation: description-fade 0.5s ease-out 0.7s both;} @keyframes description-fade{from{transform: translateY(20px); opacity: 0;} to{transform: translateY(0); opacity: 1;} } .back-home{display: inline-flex; align-items: center; gap: 10px; padding: 15px 40px; background: linear-gradient(45deg, #1db954, #1ed760); color: white; text-decoration: none; border-radius: 30px; font-weight: bold; font-size: 18px; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(29, 185, 84, 0.3); animation: button-pop 0.5s ease-out 0.9s both;} @keyframes button-pop{from{transform: scale(0); opacity: 0;} to{transform: scale(1); opacity: 1;} } .back-home:hover{transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(29, 185, 84, 0.4);} .back-home i{font-size: 20px; transition: transform 0.3s ease;} .back-home:hover i{transform: translateX(-3px);} .vinyl-record{position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle at center, #333 0%, #000 50%, #333 51%, #000 60%, #333 61%, #000 70%); box-shadow: 0 0 50px rgba(0,0,0,0.5), inset 0 0 50px rgba(255,255,255,0.1); animation: spin 10s linear infinite; opacity: 0.15; right: -100px; top: 50%; transform: translateY(-50%);} .vinyl-record::before{content: ''; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; background: #1db954; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 20px #1db954;} .note{position: absolute; color: rgba(29, 185, 84, 0.2); font-size: 30px; text-shadow: 0 0 10px rgba(29, 185, 84, 0.3); animation: floating-note 3s linear infinite; z-index: 0;} @media (max-width: 768px){.error-number{font-size: 120px; gap: 10px;} .error-message{font-size: 24px;} .vinyl-record{width: 200px; height: 200px; right: -50px;} .error-content{transform: none !important;} } @media (max-width: 480px){.error-number{font-size: 80px; gap: 5px;} .error-message{font-size: 20px;} .vinyl-record{display: none;} } @keyframes float{0%, 100%{transform: translateY(0);} 50%{transform: translateY(-20px);} } @keyframes spin{0%{transform: translateY(-50%) rotate(0deg);} 100%{transform: translateY(-50%) rotate(360deg);} } @keyframes floating-note{0%{transform: translateY(100vh) rotate(0deg); opacity: 0;} 50%{opacity: 1;} 100%{transform: translateY(-100px) rotate(360deg); opacity: 0;} } .music-notes{position: absolute; width: 100%; height: 100%; pointer-events: none; overflow: hidden;}