@font-face {
    font-family: 'Orbitron';
    src: url(../assets/fonts/Orbitron/Orbitron-VariableFont_wght.ttf);
}


* {
    margin: 0;
    padding: 0;
}

body {

    background-image: url('../assets/images/crew/background-crew-mobile.jpg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;

    height: 858px;
    color: white;

    header{
        

        .iconMenu{

            width: 40px;

            margin-top: 10px;
            margin-left: 20px;

        }

        .menu{

            transform: translateX(-100%);
            transition: 0.3s easy all;
       
            background: linear-gradient(to right,  rgba(46, 46, 46, 0.26), rgba(161, 161, 161, 0.185));


            position: absolute;


            button{

                background: none;
                border: none;

                color: white;
                height: 50px;

                margin-left: 10px;
                font-size: 10px;

                cursor: pointer;

                &:hover{

                    border-bottom: 2px solid;

                }

            }

            ul{

                margin: auto;

                list-style: none;
                display: flex;
                flex-direction: column;

            }
        }

        .hamburguesa {
            display: flex; /* Ocultar en pantallas grandes */
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 25px;
            cursor: pointer;
            position: absolute;
            top: 15px;
            right: 20px;
        
            span {
                width: 30px;
                height: 4px;
                background-color: white;
                margin-bottom: 5px;
                border-radius: 2px;
                transform-origin: 5px 0px;
                transition: all 0.2s linear;
            }
        }

        .open {
            transform: translateX(370%) !important; 
        }
    
        /* Opciones de rotación y traslación de los diferentes elementos que forman el icono del menu hamburguesa */
        .hamburguesa.close span:nth-child(1) { 
            transform: rotate(45deg) translateY(1px);
        }
        
        .hamburguesa.close span:nth-child(2) {
            opacity: 0;
        }
        
        .hamburguesa.close span:nth-child(3) {
            transform: rotate(-45deg) translateY(-5px);
        }

    }

    .contenedorHomeSpace{

        text-align: center;

        button{

            border-radius: 10px;
            width: 15px;
            height: 15px;

            cursor: pointer;

            background-color: gray;

            gap: 20px;

            border: none;

            &:hover{

                background-color: white;

            }
        }

        .dos, .tres, .cuatro{

            margin-left: 15px;

        }

        .titleSpace{

            font-size: 20px;

            margin-top: 20%;

            .number{

                color: gray;
                padding-right: 10px;

            }

        }

        .persona{

            width: 350px;

            margin-top: 30px;
            margin-bottom: 30px;

            border-bottom: 2px solid gray;

        }
    }

    .contenedorInformacion{

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h4{

            margin-top: 30px;
            color: gray;

        }

        h1{

            margin-top: 10px;
            margin-bottom: 25px;

        }

        p{

            text-align: center;

            width: 350px;
            color: gray;

        }

    }



  
}

@media (min-width: 768px) {

    body{

        background-image: url('../assets/images/crew/background-crew-tablet.jpg');
        height: 1142px;

        header{

            .iconMenu{

                width: 70px;

                margin-top: 20px;
                margin-left: 30px;

            }

            .menu{
        
                width: 550px;
                height: 110px;

                left: 770px;
                top: 20px;

                button{

                    height: 110px;

                    margin-left: 30px;
                    font-size: 20px;

                    &:hover{

                        border-bottom: 3px solid;

                    }

                }

                ul{

                    flex-direction: row;                  
    
                }

            }

            .hamburguesa{

                display: none;

            }

            
        }

        .contenedorHomeSpace{

            text-align: center;
    
            button{
    
                width: 20px;
                height: 20px;

                margin-top: 200px;

            }
    
            .titleSpace{
    
                font-size: 40px;
    
                margin-top: 15%;

                position: absolute;
                left: 30px;
                top: 50px;
    
                .number{
    
                    padding-right: 20px;
    
                }
    
            }
    
            .persona{
    
                width: 480px;


                position: absolute;
                bottom: -310px;
                left: 150px;
    
            }
        }
    
        .contenedorInformacion{
     
            h4{
    
                font-size: 20px;

                margin-top: 30px;
                color: gray;
    
            }
    
            h1{

                font-size: 50px;
    
                margin-top: 10px;
                margin-bottom: 25px;
    
            }
    
            p{

                font-size: 20px;
    
                text-align: center;
    
                width: 400px;
                color: gray;
    
            }
    
        }

    }
}

@media (min-width: 1440px){

    body{

        background-image: url('../assets/images/crew/background-crew-desktop.jpg');
        height: 865px;

        header{

            .iconMenu{

                width: 70px;

                margin-top: 80px;
                margin-left: 60px;

            }

            .menu{

                background: rgba(255, 255, 255, 0.055);
                backdrop-filter: blur(10px);

                margin-top: 60px;

                text-align: left;
        
                width: 1500px;
                height: 110px;

                left: 2370px;
                top: 20px;

                button{

                    height: 110px;
                
                    margin-left: 120px;
            
                    font-size: 25px;

                    &:hover{

                        border-bottom: 3px solid;

                    }

                }

                ul{

                    margin: 0;
    
                }

            }
        }

        .contenedorHomeSpace{

            text-align: center;
    
            button{

                border-radius: 50px;
    
                width: 25px;
                height: 25px;

                margin-top: 800px;
                margin-left: -1650px;

            }

            .dos, .tres, .cuatro{

                margin-left: 30px;
    
            }
    
            .titleSpace{
    
                font-size: 40px;
    
                margin-top: 15%;

                position: absolute;
                left: 250px;
                top: 0px;
    
                .number{
    
                    padding-right: 20px;
    
                }
    
            }
    
            .persona{
    
                width: 750px;

                position: absolute;
                bottom: -30px;
                left: 1400px;
    
            }
        }
    
        .contenedorInformacion{

            position: absolute;

            top: 500px;
            left: 250px;
     
            h4{

                text-align: left;
                width: 750px;
    
                font-size: 35px;

                margin-top: 30px;
                color: gray;
    
            }
    
            h1{

                font-size: 80px;
    
                margin-top: 10px;
                margin-bottom: 25px;
    
            }
    
            p{

                font-size: 30px;
    
                text-align: left;
    
                width: 760px;
                color: gray;
    
            }
    
        }

        
    }
}