*{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Poppins', sans-serif;
    background-color: white;
    width:100vw;
    height: 100vh;


    header {
        text-align: center;
        background: radial-gradient(circle, rgba(255, 102, 128, 0.2) 30%, rgba(102, 204, 255, 0.2) 70%);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        .logo, .creators{
            position: absolute;
            font-size: 1.2rem;
            font-weight: bold;
            color: #6c63ff;
        }
        .logo{
            top: 0;
            left: 0;
        }
        .creators{
            top: 0;
            right: 5px;
        }
        
        .title {
            font-size: 3rem;
            font-weight: bold;
            color: #003b66;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #8b8eb2;
            font-weight: 500;
        }
    }
    /*div centre title*/
    main{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        #webGL {
            .accroche{
                font-weight: bold;
                padding: 40px;
                font-size: 30px;
            }

            .projetAndOriginal {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .explications{
                text-align: center;
                font-size: 17px;
                padding: 20px;
            }
            
            .original img {
                max-width: 100%;
                height: 500px;
                border: 2px solid black;
            }
        }
    }
}