@font-face {
    font-family: 'Rodondo';
    font-style: normal;
    src: url('../fonts/Rodondo.otf') format('opentype');
    font-weight: 400;
}

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

.font-rodondo {
    font-family: 'Rodondo', sans-serif;
}
.font-sunflower {
    font-family: 'Sun Flower', sans-serif;
}

html.animating header,
html.animating main,
html.animating nav {
    opacity: 0;
}

#bg-blur {
    position: fixed;
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    background: url('../images/bg.png') center center / cover no-repeat;
    z-index: -10;
    pointer-events: none;
}

.star {
    position: fixed;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.subtitle-pan {
    background: linear-gradient(90deg, 
        #ff218c 0%, 
        #ffd800 20%, 
        #21b1ff 40%, 
        #ff218c 60%, 
        #ffd800 80%, 
        #21b1ff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: moveGradient 5s ease infinite;
    text-shadow: 0 0 5px rgba(131, 131, 131, 0.5), 0 0 10px rgba(255,255,255,0.3);
}

@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* title have a simple white shadow */
.title-pwama {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5);
    color: #fff;
}

nav a::after {
    content: "|";
    margin: 0 0.5rem;
    color: #fff; /* ou la couleur que tu veux */
}

nav a:last-child::after {
    content: ""; /* pas de pipe après le dernier lien */
}


@keyframes fadeInAndOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fade-in-out {
    animation: fadeInAndOut 1.5s ease-in-out infinite;
}

.cloud-background {
    background: url('../images/cloud.png') center center / contain no-repeat;
}

@media screen and (max-width: 1000px) {
    .cloud-background {
        background: #fff!important;
    }
    #home div {
        padding: 10px!important;
        gap: calc(var(--spacing) * 10);
    }

    #infoctn div {
        margin-top: 10px!important;
    }
}