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


* {
    margin: 0;
    padding: 0;
}

body {

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

    height: 1000px;
    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{

        margin-top: 20%;

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

        text-align: center;

        .titleSpace{

            font-size: 20px;
            color: rgb(255, 255, 255);

            .number{

                color: gray;
                margin-top: 10px;

            }
        }

        .planeta{

            width: 300px;

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

        }
    }

    .contenedorCambiante{

        text-align: center;

        .botones{

            button{

                background: none;
                border: none;

                color: white;
                height: 50px;

                margin-left: 18px;
                font-size: 15px;

                letter-spacing: 2px;

                cursor: pointer;

                &:hover{

                    border-bottom: 2px solid;

                }

            }

        }

        .informacionplaneta{

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

            border-bottom: 2px solid gray;
            padding-bottom: 35px;

            .titleplaneta{

                margin-top: 20px;
                font-size: 40px;
                letter-spacing: 5px;

            }

            .texto{

                text-align: center;

                width: 320px;

                color: gray;
                margin-top: 10px;


            }

        }

        .distancia{

            list-style: none;

            li{

                margin-top: 30px;
                
                h6{

                    color:gray;

                }

                h1{

                    margin-top: 10px;

                }

            }



        }


    }
}

@media (min-width: 768px) {

    body{

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

        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{

            margin-top: 10%;

            .titleSpace{

                font-size: 30px;

            }

            .planeta{

                width: 350px;

            }

        }

        .contenedorCambiante{

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

            width: 100%;

            .botones{

                button{

                    height: 50px;
    
                    font-size: 25px;
    
                    &:hover{
    
                        border-bottom: 2px solid;
    
                    }
    
                }
            }

            .informacionplaneta{

                border-bottom: 2px solid gray;
                padding-bottom: 40px;

                .titleplaneta{

                    margin-top: 20px;
                    font-size: 50px;
    
                }

                .texto{

                    width: 500px;

                    font-size: 20px;

                }

            }

            .distancia{

                li{
                    
                    h6{

                        font-size: 15px;

                    }

                    h1{

                        font-size: 40px;

                        margin-top: 10px;

                    }

                }



            }


        }

    }
}

@media (min-width: 1440px){

    body{

        background-image: url('../assets/images/destination/background-destination-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;
    
                }

            }
        }

        .all{

            display: flex;

            .contenedorHomeSpace{

                margin-top: 10%;
                margin-left: 450px;

                .titleSpace{

                    width: 550px;
                    font-size: 35px;

                    position: absolute;
                    top: 280px;
                    left: 160px;

                }

                .planeta{

                    width: 600px;

                }

            }

            .contenedorCambiante{

                margin-top: 70px;

                .botones{

                    button{

                        margin-bottom: 10px;

                        height: 60px;
        
                        font-size: 30px;
        
                        &:hover{
        
                            border-bottom: 2px solid;
        
                        }
                    }
                }

                .informacionplaneta{

                    text-align: left;

                    border-bottom: 2px solid gray;
                    padding-bottom: 40px;

                    .titleplaneta{

                        width: 500px;

                        text-align: left;

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

                    .texto{

                        text-align: left;

                        width: 500px;

                        font-size: 25px;

                        padding-bottom: 60px;

                    }

                }

                .distancia{

                    display: flex;
                    gap: 80px;

                    text-align: left;

                    li{
                        
                        h6{

                            font-size: 15px;

                        }

                        h1{

                            font-size: 35px;

                            margin-top: 10px;

                        }

                    }
                }
            }
        }
    }
}