/* Ustawienia globalne */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(45deg, #8d008d, rgb(0, 0, 121), #5b0b36, #085454);
    background-size: 400% 400%;
    animation: gradientMove 35s ease infinite;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    color: white;
}

/* Animowany gradient tła */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Kontener */
.container {
    text-align: center;
    animation: fadeIn 3s ease-in-out forwards;
}

/* Styl dla liter */
.title {
    display: flex;
    justify-content: center;
}

/* Styl dla każdej litery */
.letter {
    color: #fff;
    text-decoration: none;
    font-size: 8rem;
    text-transform: uppercase;
    letter-spacing: 15px;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Animacje dla każdej litery */
.l1 {
    animation-name: changeFont1;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.l2 {
    animation-name: changeFont2;
    animation-duration: 6.1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.l3 {
    animation-name: changeFont3;
    animation-duration: 5.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.l4 {
    animation-name: changeFont4;
    animation-duration: 5.9s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.l5 {
    animation-name: changeFont5;
    animation-duration: 6.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Animacja zmieniająca czcionki dla każdej litery */
@keyframes changeFont1 {
    0% ,
    10% { font-family: 'Poppins', sans-serif; }
    20% { font-family: 'Raleway', sans-serif; }
    30% { font-family: 'Lobster', cursive; }
    40% { font-family: 'Roboto', sans-serif; }
    50% { font-family: 'Pacifico', cursive; }
    60% { font-family: 'Oswald', sans-serif; }
    70% { font-family: 'Quicksand', sans-serif; }
    80% { font-family: 'Montserrat', sans-serif; }
    90% { font-family: 'Playfair Display', serif; }
    100% { font-family: 'Poppins', sans-serif; }
}

@keyframes changeFont2 {
    0%,
    10% { font-family: 'Rubik', sans-serif; }
    20% { font-family: 'Roboto', sans-serif; }
    30% { font-family: 'Oswald', sans-serif; }
    40% { font-family: 'Playfair Display', serif; }
    50% { font-family: 'Bebas Neue', sans-serif; }
    60% { font-family: 'Cinzel', serif; }
    70% { font-family: 'Anton', sans-serif; }
    80% { font-family: 'Fira Sans', sans-serif; }
    90% { font-family: 'Inconsolata', monospace; }
    100% { font-family: 'Raleway', sans-serif; }
}

@keyframes changeFont3 {
    0%,
    10% { font-family: 'Bungee', sans-serif; }
    20% { font-family: 'Gugi', sans-serif; }
    30% { font-family: 'Kaushan Script', cursive; }
    40% { font-family: 'Lora', serif; }
    50% { font-family: 'Noto Serif', serif; }
    60% { font-family: 'Overpass', sans-serif; }
    70% { font-family: 'PT Sans', sans-serif; }
    80% { font-family: 'Rokkitt', serif; }
    90% { font-family: 'Ubuntu', sans-serif; }
    100% { font-family: 'Poppins', sans-serif; }
}

@keyframes changeFont4 {
    0%,
    10% { font-family: 'Yanone Kaffeesatz', sans-serif; }
    20% { font-family: 'Zilla Slab', serif; }
    30% { font-family: 'Cinzel', serif; }
    40% { font-family: 'Lobster', cursive; }
    50% { font-family: 'Sarabun', sans-serif; }
    60% { font-family: 'Signika', sans-serif; }
    70% { font-family: 'Varela Round', sans-serif; }
    80% { font-family: 'Amatic SC', cursive; }
    90% { font-family: 'Fjalla One', sans-serif; }
    100% { font-family: 'Pacifico', cursive; }
}

@keyframes changeFont5 {
    0%,
    10% { font-family: 'Pacifico', cursive; }
    20% { font-family: 'Bebas Neue', sans-serif; }
    30% { font-family: 'Roboto', sans-serif; }
    40% { font-family: 'Oswald', sans-serif; }
    50% { font-family: 'Bebas Neue', sans-serif; }
    60% { font-family: 'Rubik', sans-serif; }
    70% { font-family: 'Raleway', sans-serif; }
    80% { font-family: 'Fira Sans', sans-serif; }
    90% { font-family: 'Playfair Display', serif; }
    100% { font-family: 'Anton', sans-serif; }
}







/* Przycisk email */
.email-button {
    display: inline-block;
    margin-top: 50px;
    padding: 20px;
    font-size: 2.5rem;
    color: #fff;
    background-color: transparent;
    border: 2px solid #ff00ff;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: buttonAppear 2.5s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.email-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 0, 255, 0.7);
}

/* Animacja przycisku */
@keyframes buttonAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animacja fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}