*{
        margin: 0px;
        padding: 0px;
    }
    
    a{
        text-decoration: none !important;
    }

    main{
        position: relative;
        top: -20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--margin);
    }

    body{
        background: radial-gradient(circle, rgba(89,90,91,1) 0%, rgba(189,190,193,1) 0%, rgba(89,90,91,1) 100%) !important;
    }

    @keyframes neon-pulse {
        0% {
          text-shadow: 
            0 0 5px rgba(255, 0, 0, 0.5), 
            0 0 10px rgba(255, 0, 0, 0.5), 
            0 0 20px rgba(255, 0, 0, 0.5), 
            0 0 40px rgba(255, 0, 0, 0.5);
        }
        50% {
          text-shadow: 
            0 0 10px rgba(255, 0, 0, 0.5), 
            0 0 20px rgba(255, 0, 0, 0.5), 
            0 0 30px rgba(255, 0, 0, 0.5), 
            0 0 50px rgba(255, 0, 0, 0.5);
        }
        100% {
          text-shadow: 
            0 0 5px rgba(255, 0, 0, 0.5), 
            0 0 10px rgba(255, 0, 0, 0.5), 
            0 0 20px rgba(255, 0, 0, 0.5), 
            0 0 40px rgba(255, 0, 0, 0.5);
        }
    }

    #title{
        font-family: var(--font-family);
        font-size: 150%;
        letter-spacing: -0.5px;
        /* font-weight: bold; */
        color: var(--quaternary-color);
        -webkit-text-stroke: 0.5px rgba(255, 0, 0, 0.7);
        text-shadow: 
            -1px -1px 0 rgba(255, 0, 0, 0.7),  
            1px -1px 0 rgba(255, 0, 0, 0.7),  
            -1px  1px 0 rgba(255, 0, 0, 0.7),  
            1px  1px 0 rgba(255, 0, 0, 0.7);
        text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.7); 
        animation: neon-pulse 2s infinite ease-out;
    }

    .button {
        display: inline-block; /* Le bouton s'adapte à son contenu */
        border: 1px;
        background: none; /* Supprime le fond par défaut */
        padding: 0; /* Supprime les marges internes */
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .button:active svg{
        fill: #E63946;
        fill-opacity: 0.8;
        width: 45px;
    }

    nav{
        position: relative;
        justify-self: center;
        /* position: relative; */
        /* left: 50%; */
        /* transform: translate(-50%); */
        display: flex;
        justify-content: center;
        width: 100vw;
        height: auto;
        padding: 0px;
        margin: 0px;
    }

    #navBackground{
        
        position: relative;
        bottom: 2px;
        /* left: 50%; */
        /* transform: translate(-50%); */
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 0px;
    }

    #part1{
        width: 100vw;
        height: 91px;
        max-width: 102vw;
    }

    #part2{
        position: relative;
        bottom: 23px;
        width: 40vw;
        height: 35px;
    }

    #helpBtn{
        z-index: 5;
        position: absolute;
        left: 7vw;
        bottom: 55px;
    }

    #settingsBtn{
        z-index: 5;
        position: absolute;
        right: 7vw;
        bottom: 55px;
    }

    #logo{
        position: absolute;
        top: 45px;
        z-index: 2;
    }

    #footer{
        z-index: 1;
        position: fixed;
        bottom: 0px;
        width: 100vw;
        height: 103px;
    }

    .info{
        align-items: center;
        padding: var(--padding);
        display: flex;
        justify-content: space-between;
        z-index: 2;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        bottom: 25px;
        max-width: 334px;
        width: 80vw;
        height: 48px;
        background-color: var(--quaternary-color);
        border-radius: 5px;
    }

    footer{
        z-index: 2;
        position: fixed;
        bottom: 0px;
        width: 100vw;
        height: 93px;
    }

    .pastilleAlerte{
        width: 15px;
        height: 15px;
        border-radius: 5px;
        background-color: #E63946;
        margin-right: 5px;
    }

    .toast{
        border: 3px solid #E63946 !important;
        max-width: 300px !important;
        min-width: 190px;
        width: 50vw !important;
    }

    #camera{
        width: 100%;
        height: 700px;
        border: 3px solid var(--primary-color);
        border-radius: var(--border-radius);
        background-color: #fff;
    }

    .part1{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .display{
        height: 40vw;
        width: 40vw;
        max-width: 250px;
        max-height: 250px;
        border: 3px solid var(--primary-color);
        border-radius: var(--border-radius);
    }

    #main{
        display: flex;
        gap: var(--margin);
        flex-direction: column;
        width: 90vw;
        align-items: center;
    }

    #joystick{
        position: relative;
        width: 128px;
    }

    #stick1{
        z-index: 5;
        position: absolute;
        left: 32px; 
        top: 32px;
        width: 64px;
        height: 64px;
        background: radial-gradient(circle at 30% 30%, #e06872, var(--tertiary-color));
        border-radius: 50%;
        box-shadow: 
        inset -10px -10px 20px rgba(150, 20, 20, 0.7),
        5px 5px 10px rgba(0, 0, 0, 0.5); /* Ombre externe pour donner un effet flottant */
    }

    #btnContainer{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    #command{
        display: flex;
        justify-content: space-between;
        padding-right: 5%;
        padding-left: 5%;
    }

    .history-container{
        display: flex;
        justify-self: center;
        width: 80vw;
    }

    .exploration-link-container{
        width: 30%;
        display: flex;
        flex-direction: column;
    }

    .exploration-link{
        width: 100%;
        background-color: #fff;
        height: 50px;
        border: 3px solid #162171;
        border-radius: 5px;
    }

    .event-collapse{
        width: 70%;
    }

    
    @media (orientation: landscape) {
        @media (max-width: 1000px) and (max-height: 450px){
            nav{
                top: -20px;
                width: 80%;
            }

            #helpBtn{
                bottom: 45px;
            }

            #settingsBtn{
                bottom: 45px;
            }

            #part1{
                width: 100%;
            }

            .display{
                width: 98px;
                height: 98px;
            }


            #camera{
                height: 70vh;
                width: 60%;

            }

            .part1{
                width: 30%;
                order: 2;
            }

            #main{
                position: relative;
                top: -15px;
                flex-direction: row;
                align-items: start;
            }

            footer{
                position: fixed;
                /* display: none; */
                width: 350px;
                right: -150px;
                top: 40%;
                transform: rotate(-90deg);
            }

            #footer{
                position: relative;
                width: 100%;
                bottom: 50px;
            }

            .info{
                top: 43%;
                width: 80%;
            }

            .info span{
                transform: rotate(90deg);
            }

            .info :nth-child(3){
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .info :nth-child(3) :nth-child(2){
                transform: rotate(360deg);
            }

            #command{
                position: absolute;
                bottom: 7vh;
                right: 11%;
                width: 28%;
                padding: 0px;
            }

            #btnContainer{
                display: flex;
                flex-direction: column;
                order: 2;
            }
        }

        @media (max-height: 1024px) and (min-height: 450px) and (max-width: 1400px){
            

            #camera{
                order: 1;
            }

            .part1{
                order: 2;
                justify-content: left;
                gap: var(--margin);
            }

            .display{
                height: 200px;
                width: 200px;
            }

            #main{
                height: 72vh;
                margin-top: 1vh;
            }

            #command{
                position: absolute;
                bottom: 5vh;
                right: 10vh;
                width: 40vw;
            }

            /* @media (max-width: 720px) and (max-height: 550px){
                #main{
                    flex-direction: row;
                }
            } */

            @media (max-height: 750px) and (min-height:701px){
                #main{
                    flex-direction: row;
                    height: 50vh;
                }

                #command{
                    position: static;
                }

                .display{
                    height: 120px;
                    width: 120px;
                }

                .part1{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    width: 20%;
                    height: 100%;
                    align-items: end;
                }

                #camera{
                    height: 100%;
                    width: 80%;
                }

                #command{
                    width: 80vw;
                } 
            }

            @media (max-height: 700px) and (min-height:451px){
                nav{
                    top: -20px;
                    width: 80%;
                }
    
                #helpBtn{
                    bottom: 45px;
                }
    
                #settingsBtn{
                    bottom: 45px;
                }
    
                #part1{
                    width: 100%;
                }
    
                .display{
                    width: 98px;
                    height: 98px;
                }
    
    
                #camera{
                    height: 70vh;
                    width: 60%;
                }
    
                .part1{
                    width: 30%;
                    order: 2;
                }
    
                #main{
                    position: relative;
                    top: -15px;
                    flex-direction: row;
                    align-items: start;
                }
    
                footer{
                    position: fixed;
                    /* display: none; */
                    width: 350px;
                    right: -150px;
                    top: 40%;
                    transform: rotate(-90deg);
                }
    
                #footer{
                    position: relative;
                    width: 100%;
                    bottom: 50px;
                }
    
                .info{
                    top: 43%;
                    width: 80%;
                }
    
                .info span{
                    transform: rotate(90deg);
                }
    
                .info :nth-child(3){
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
    
                .info :nth-child(3) :nth-child(2){
                    transform: rotate(360deg);
                }
    
                #command{
                    position: absolute;
                    bottom: 60px;
                    right: 11%;
                    width: 28%;
                    padding: 0px;
                }
    
                #btnContainer{
                    display: flex;
                    flex-direction: column;
                    order: 2;
                }
            }

        }

        @media (min-width: 1401px){
            #main{
                margin-top: 2.5vh;
                flex-direction: row;
                height: 70vh;
            }

            #camera{
                height: 100%;
            }

            .part1{
                display: flex;
                flex-direction: column;
                width: 30%;
                height: 100%;
                justify-content: space-between;
                align-items: end;
                order: 2;
            }

            #command{
                height: 0px;
                visibility: hidden;
            }

            #joystick{
                visibility: visible;
                z-index: 5;
                position: fixed;
                right: 28vw;
                bottom: 17.5vh;
            }

            #joystick #stickBackground{
                opacity: 50%;
            }

            #joystick #stick1{
                opacity: 100%;
            }

            .display{
                height: 300px;
                width: 300px;
            }

            #btnContainer{
                visibility: visible;
                z-index: 5;
                position: fixed;
                left: 6vw;
                bottom: 20px;
            }
        }
    }

    @media (orientation: portrait) {

        @media (max-width: 450px){
            #main{
                height: 50vh;
            }

            #command{
                width: 90vw;
                height: 20%;
            }

            @media (max-height: 670px){
                .display{
                    width: 100px;
                    height: 100px;
                }

                #main{
                    height: 45vh;
                }
            }
        }

        @media (max-width: 1024px) and (min-width: 450px){
            #command{
                margin-top: 3vh;
                width: 90vw;
                height: 20%;
            }

            #main{
                height: 67vh;
            }

            @media (max-height: 1100px) and (min-height: 951px){
                #command{
                    margin-top: 1vh;
                    width: 90vw;
                    height: 20%;
                }
    
                #main{
                    height: 63vh;
                }
            }

            @media (max-height: 950px) and (min-height: 801px){

                .display{
                    width: 120px;
                    height: 120px;
                }

                #main{
                    height: 55vh;
                }

                #command{
                    margin-top: 1vh;
                }
            }

            @media (max-height: 800px){
                #main{
                    height: 50vh;
                }

                .display{
                    width: 120px;
                    height: 120px;
                }
            }
        }

    }

    


    :root {
        /* Couleurs principales */
        --primary-color: #162171;
        --secondary-color: #282828;
        --tertiary-color: #E63946;
        --quaternary-color: #ffffff;
        --background-color: rgba(255, 255, 255, 0.26);
        --text-color: #282828;
        --secondary-text-color: #fff;
      
        /* Typographie */
        --font-family: "Lalezar", sans-serif;
        --font-size: 16px;
        --heading-font-weight: bold;
      
        /* Espacements */
        --padding: 16px;
        --margin: 16px;
      
        /* Bordures et ombres */
        --border-radius: 5px;
        --btn-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        --box-shadow: 0px 0px 30px rgba(227, 228, 237, 0.37);
        --border: 2px solid rgba(255, 255, 255, 0.18);
        --blur: blur(10px);
      
        /* Boutons */
        --btn-background: linear-gradient(165deg, var(--quaternary-color), var(--tertiary-color));
        --button-bg: var(--tertiary-color);
        --button-text-color: #fff;
        --button-hover-bg: #fff;
        --button-hover-text: var(--tertiary-color);
      }

    @font-face {
        font-family: "Lalezar";
        src: url("../font/Lalezar-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }