@font-face {
    font-family: "IBM";
    src: url("./fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype");
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


.welcome-message{
    position: relative;
}


.projet{
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition :all 1s;
    transform: translateX(100vw);
    z-index: 0;
}

.main-projects{
    z-index: 1;
}

#welcome {
    transform : translateX(-40vw);
    transition: all 1s;
    opacity:0;
}

.welcomestart{
    transform : translateX(0);
    opacity:1;
}


.selector:hover{
    cursor: pointer;
    transform: scale(1.2);
    transform-origin: left;
}

.icone{
    width:100%;
}


/* Conteneur pour chaque icône */
.icon-wrapper {
    flex : 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Images d'icône */
.icones {
    width: 75%; /* Remplit entièrement le conteneur parent */
    height: auto; /* Garde les proportions de l'image */
    max-width: 40px; /* Limite la taille maximale de l'image */
}

/* Lien actif pour les langues */
.active {
    font-weight: bold;
    text-decoration: underline;
}

/* Langues */
.icon-wrapper a {
    text-decoration: none;
    color: inherit;
}

canvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    transform-origin: right;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .icone{
        width: 100%;
    }
    }

    .projects-overview{
        font-family: "IBM",sans-serif;
    }