/* page-not-found.css */

#home-banner.not-found-container,
#home-banner.not-found-container * {
    padding: var(--spacing-0);
    margin: var(--spacing-0);
}

#home-banner.not-found-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
    padding: var(--spacing-40) var(--spacing-3) var(--spacing-16);
}

.not-found-container .message-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
    background-color: var(--transparent);
    align-items: center;
}

#home-banner.not-found-container .message-container h1 {
    color: var(--neutral-100);
    font-weight: var(--font-extrabold);
    font-size: var(--text-7xl);
    text-align: center;
}

#home-banner.not-found-container .message-container p {
    color: var(--neutral-100);
    font-size: var(--text-xl);
    text-align: center;
}

#home-banner.not-found-container .btn-to-freepik {
    cursor: context-menu;
    opacity: 1;
}

#home-banner.not-found-container .btn-to-freepik:hover {
    opacity: 1;
}

#home-banner.not-found-container .btn-to-freepik img {
    width: var(--size-80);
    animation: zoomInOut 3s infinite;
}

#home-banner.not-found-container .btn-to-home {
    background-color: var(--transparent);
    border-radius: var(--rounded-full);
    border: var(--border) solid var(--neutral-100);
    color: var(--neutral-100);
    
    padding: var(--spacing-2) var(--spacing-10);
    filter: var(----brightness-90);
    cursor: pointer;
    text-align: center;
}

#home-banner.not-found-container .btn-to-home:hover {
    filter: var(----brightness-100);
    background-color: var(--neutral-100);
    color: var(--black);
}

@keyframes zoomInOut {
    0%, 100% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.02);
    }
}

@media screen and (max-height: 654px) {
    #home-banner.not-found-container {
        padding-top: var(--spacing-28);
    }
    
    #home-banner.not-found-container .message-container h1 {
        font-size: var(--text-6xl);
    }
    
    #home-banner.not-found-container .message-container p {
        font-size: var(--text-lg);
    }

    #home-banner.not-found-container img {
        width: var(--size-72);
    }

    #home-banner.not-found-container .btn-to-freepik {
        font-size: var(--text-sm);
    }
}

@media screen and (max-width: 640px) {
    #home-banner.not-found-container .message-container h1 {
        font-size: var(--text-6xl);
    }
}