@font-face {
    font-family: 'Symtext';
    src: url('/src/fonts/Symtext.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Symtext';
    z-index: -1;
    overflow-x: hidden;
}

.intro {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    animation: fadeOut 1.5s ease-in-out;
    animation-fill-mode: forwards;
    z-index: 9999;
    pointer-events: none;
}

.img-container {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    animation: fadeIn 2s ease-in-out, scaleUp 1s ease-in-out infinite alternate;
    animation-fill-mode: forwards;
    pointer-events: none;
}

.responsive-img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    animation: Up 0.5s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1.4s;
    z-index: 9999;
    transition: 0.5s;
    pointer-events: painted;
}

.responsive-img:hover {
    filter: drop-shadow(0px 4px 8px rgba(255, 230, 0, 0.548));
}

@keyframes fadeIn {
    0% {
        opacity: 0.5;
        scale: 0.1;
    }

    50% {
        opacity: 1;
        scale: 2.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        background-color: #000000;
    }

    50% {
        background-color: #000000;
    }

    99% {
        background-color: #00000000;
    }
}

@keyframes scaleUp {
    from {
        transform: scale(0.5);
    }

    to {
        transform: scale(0.52);
    }
}

@keyframes Up {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 75vh;
    }
}