@charset "UFT-8" ;

@font-face { /* tipo de letra para los títulos*/
    font-family: Cinzel_Decorative ;
    src: url('fonts/Cinzel_Decorative/CinzelDecorative-Bold.ttf') ;
}

@font-face { /* tipo de letra para los títulos*/
    font-family: Cinzel ;
    src: url('fonts/Cinzel/Cinzel-VariableFont_wght.ttf') ;
}

@font-face { /* tipo de letra para el texto*/
    font-family: Poppins;
    src: url('fonts/Poppins/Poppins-Medium.ttf');
}

body { /* imagen de fondo */ 
    background-color: #006AA3;
    background-image: url(imagenes/Frozen-2-Wallpaper.jpg);
    background-repeat: no-repeat;
    background-size:contain;
}

h1{ /*estilo para titulos*/
    font-family: Cinzel ;
    font-weight: bolder;
    color: #551A8B;
    font-size: 10vw; /* tamaño de letra responsive*/
    text-align: center;
    margin: auto;
}

h1:link { /* para que no subraye los vínculos*/ 
	color:#551A8B;
	cursor: pointer;
	text-decoration: none;  
}

h2{ /*estilo para subtitulos*/
    font-family: Cinzel ;
    font-weight: bold;
    color: #551A8B;
    font-size: 8vw; /* tamaño de letra responsive*/
    text-align: center;
    margin: auto;
    margin-top: 20px ;
}

h3{ /*estilo para subtitulos*/
    font-family: Cinzel ;
    font-weight: bold;
    color: #551A8B;
    font-size: 4vw; /* tamaño de letra responsive*/
    text-align: center;
    margin: auto;
    margin-top: 20px ;
}

a:link { /* para que no subraye los vínculos */ 
	color: #551A8B;
	text-decoration:none;
}

a { /* color del texto */ 
	color: #551A8B;
	text-decoration:none;
}

a:hover {    /* estilo cuando el cursor está sobre el elemento */ 
	color: #BC88B9;
}

.texto{ /*estilo para texto*/
    font-family: Poppins ;
    color: black;
    text-align: justify;
}

.menunav{ /* estilo para la caja de navegación */
    font-family: Cinzel ;
    color: snow;
    text-align: center;
    font-size: large;
    font-weight: bolder;
    margin-bottom: 20px;
}

/* cajita con fondo blanco*/
.cajita {
    text-align: center;
    background: rgba(255, 255, 255, 0.5) ;
    margin-left: 150pt;
    margin-right: 150pt;
    padding-top: 20pt;
    padding-bottom: 20pt ;
    padding-right: 20pt ;
    padding-left: 20pt ;
}

/* botones lindos para la barra de navegación*/
.botonMenu {
	box-shadow: 3px 0px 27px 7px #ffffff;
	background-color:transparent;
	border-radius:42px;
	border:3px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#541a8b;
	font-family:Poppins;
	font-size:18px;
	font-weight:bold;
	padding:7px 59px;
	text-decoration:none;
}
.botonMenu:hover { /* para que se ponga bonito al acercar el cursor */
	background-color:white;
}
.botonMenu:active {
	position:relative;
	top:1px;
}

.botonMenunav{ /* para que no muestre el texto de rayitas estando en pantalla grande*/
    display: none ;
}

.botonMenupersonajes{ /* para que no muestre el texto del menú de rayitas de personajes estando en pantalla grande*/
    display: none ;
}

#btn-menunav{ /* para que no muestre el menú de rayitas estando en pantalla grande*/
    display: none ;
}

#btn-menupersonajes{ /* para que no muestre el menú de rayitas de personajes estando en pantalla grande*/
    display: none ;
}

header{ /* encabezado para el menú general*/
    width: 100% ;
    z-index: 10;
}

ul{ /* alineacion de la lista del mapa */
    margin-left: 10px ;
    padding: 10;
}

li{ /* alineacion de los items de la lista */
    background-image: none;
    width: 160px ;
    height: 30px ;
    text-align: left ;
    padding-top: 6px ;
}

.footer{ /*estilo para el texto de créditos*/
    font-family: Poppins ;
    color:thistle;
    text-align: center;
}

.volver{ /* alineación para el botón */
    margin-right: 20%;
}


.imagen{ /* para que las imagenes sean responsive*/
    max-width: 100%;
    height: auto;
}
/*//////////////////////// para el mapa interactivo ////////////////////*/
/* para el div donde va el mapa*/
.mapa_arendelle{
    position:relative; 
	font-size:1.15em;
	width: 100%;
	padding: 1%;
	margin:auto;
    margin-bottom:15px;
	/*display:block;*/
}
/* boton para el mapa interactivo*/
.copito{ /* clase para los botones*/
    max-width: 7%;
    height: auto;
}

.copito:hover { /* para que se ponga bonito al acercar el cursor */
    background-color:white;
    box-shadow:  3px 0px 27px 7px #ffffff;
    border-radius:100px;
}

.btn1{
    position:absolute;
	z-index:10;
    top: 13%;
	left: 60%;
}

.btn2{
    position:absolute;
	z-index:10;
    top: 8%;
	left: 75%;
}

.btn3{
    position:absolute;
	z-index:10;
    top: 30%;
	left: 79%;
}

.btn4{
    position:absolute;
	z-index:10;
    top: 45%;
	left: 73%;
}

.btn5{
    position:absolute;
	z-index:10;
    top: 68%;
	left: 60%;
}

.btn6{
    position:absolute;
	z-index:10;
    top: 80%;
	left: 74%;
}

.btn7{
    position:absolute;
	z-index:10;
    top: 20%;
	left: 25%;
}

.video{   /* para los videos de las escenas */
    width: 100%;
    aspect-ratio: 16 / 9; /*para que quede del tamano que es*/
    margin: 10px 0;
}

/* para cuando la pantalla es pequena */ 
@media only screen and (max-width: 800px) {
    .texto { /* cambio de alineación en el texto*/
        font-family: Poppins ;
        color: black;
        text-align: justify;
        line-height: 1.7;
    }

    header{ /* cambia la presentación del menu*/
        display: block ;
        position: absolute ;
        left: 20px ;
        top: 5px ;
    }

    .menunav { /* menu desplegable para celular */
        position: fixed ; 
        background:#C5A2C8; 
		z-index: 50; 
        width: 60%;
        margin-left: -120%;
		margin-top: 4px;
        transition: all 0.5s;
        border-radius: 10px;
    } 

    #btn-menunav:checked ~ .menunav {  /* el checkbox controla las dos posiciones del menu */
        margin: 10px; 
    } 

    #btn-menupersonajes:checked ~ .menunav {  /* el checkbox controla las dos posiciones del menu */
        margin: 10px; 
        position: absolute;
    } 

    .botonMenu { /* estilo para los botones del menu */
        box-shadow: 0px 0px 0px 0px #ffffff;
        background-color:transparent;
        border-radius:0px;
        border:transparent;
        display:inline-block;
        cursor:pointer;
        color:#541a8b;
        font-family:Poppins;
        font-size:18px;
        font-weight:bold;
        padding:7px 59px;
        text-decoration:none;
        width: 100%;
        z-index: 10;
    }
    .botonMenu:hover { /* para que se ponga bonito al acercar el cursor */
        background-color:white;
        box-shadow:  3px 0px 27px 7px #ffffff;
    }
    .botonMenu:active {
        position:relative;
        top:1px;
    }

    .botonMenunav { /* estilo para el boton de rayitas*/
        box-shadow: 3px 0px 27px 7px #ffffff;
        background-color:transparent;
        border-radius:42px;
        border:3px solid #ffffff;
        display:inline-block;
        cursor:pointer;
        color:whitesmoke;
        font-family:Poppins;
        font-size:18px;
        font-weight:bold;
        padding:7px 15px;
        text-decoration:none;
    }
    .botonMenunav:hover { /* para que se ponga bonito al acercar el cursor */
        background-color:white;
    }
    .botonMenunav:active {
        position:relative;
        top:1px;
    }

    .botonMenupersonajes { /* estilo para el boton de rayitas de personajes */ 
        box-shadow: 3px 0px 27px 7px #ffffff;
        background-color:transparent;
        border-radius:42px;
        border:3px solid #ffffff;
        display:inline-block;
        cursor:pointer;
        color:#541a8b;
        font-family:Poppins;
        font-size:18px;
        font-weight:bold;
        padding:7px 15px;
        text-decoration:none;
    }
    .botonMenupersonajes:hover { /* para que se ponga bonito al acercar el cursor */
        background-color:white;
    }
    .botonMenupersonajes:active {
        position:relative ;
        top:1px;
    }

    /*//////////////////////// para el mapa interactivo ////////////////////*/
    /* para el div donde va el mapa*/
    .mapa_arendelle{
        position:relative; 
        font-size:1.15em;
        width: 100%;
        padding: 1%;
        margin:auto;
        margin-bottom:15px;
        /*display:block;*/
    }
    /* boton para el mapa interactivo*/
    .copito{ /* clase para los botones*/
        max-width: 7%;
        height: auto;
    }

    .copito:hover { /* para que se ponga bonito al acercar el cursor */
        background-color:white;
        box-shadow:  3px 0px 27px 7px #ffffff;
        border-radius:100px;
    }

    .btn1{
        position:absolute;
        z-index:10;
        top: 13%;
        left: 60%;
    }

    .btn2{
        position:absolute;
        z-index:10;
        top: 8%;
        left: 75%;
    }

    .btn3{
        position:absolute;
        z-index:10;
        top: 30%;
        left: 79%;
    }

    .btn4{
        position:absolute;
        z-index:10;
        top: 45%;
        left: 73%;
    }

    .btn5{
        position:absolute;
        z-index:10;
        top: 68%;
        left: 60%;
    }

    .btn6{
        position:absolute;
        z-index:10;
        top: 80%;
        left: 74%;
    }

    .btn7{
        position:absolute;
        z-index:10;
        top: 20%;
        left: 25%;
    }
}