@font-face{
    font-family: TitleFont;
    src: url(Fonts/Ephesis-Regular.ttf);
}

@font-face {
    font-family: Tinos;
    src: url(Fonts/Tinos-Regular.ttf);
}

body{
font-family: Tinos;
background-image: url(Imagenes/fondoFinal.jpg);
}

header, section, footer {   
    width: 1200px; 
    margin: auto;
}

#cabeceraInicio{
    height: 150px;
    background-color: rgb(29, 0, 22);
    padding-bottom: 30px; 
}

#contenidoInicio{
    height: 800px;
    background-image: url(Imagenes/Fondo_Inicio.jpg);
    position: relative;
}

#footerInicio{
    height: 150px;
    background-color:rgb(29, 0, 22);
    padding-top: 10px;
    box-sizing: border-box;
}

#cabeceraPaginas{
    height: 220px;
    background-color: rgb(29, 0, 22);
    padding-bottom: 30px; 
}

#contenidoPreguntasFrecuentes{
    height: 2700px;
    background-color: blueviolet;
    padding-top: 5px;
}

#contenidoContacto{
    height: 1100px;
    background-color: blueviolet;
    padding-top: 5px;
}

#footerPaginas{
    height: 150px;
    background-color:rgb(29, 0, 22);
    padding-top: 10px;
    box-sizing: border-box;
}

@keyframes typing {
    to {
      width: 760px;
    }
}

#divNombre{
    float: left;
    height: 150px;
    width: 760px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#nombre{
    margin: 0px;
    width: 0px;
    font-size: 150px;
    text-align: center;
    font-family: TitleFont;
    color: yellow;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: typing 3s steps(13, end) forwards
}

@keyframes giroY {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.saxo_título1{
    height: 160px;
    width: 160px;
    float: left;
    margin-left: 40px;
    margin-top: 10px;
    animation: giroY 3s linear;
    transform-style: preserve-3d;
}


#saxo_título2{
    height: 160px;
    width: 160px;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
    animation: giroY 3s linear;
}


.GIF_saxo_2{
    width: 160;
    height: 160px;
    transform: scaleX(-1);
}

#segundoGif{
    width: 160px;
    height: 160px;
}

#cajas_pie{
    display: flex;
}

.caja_pie{
    width: 380px;
    height: 100px;
    margin: 10px;
}

article{
    width: 1200px;
}

#NombreAutores{
    color: rgb(255, 238, 0);
    text-align: center;
    font-size: 40px;
    margin: 0px;
}

.logoWatson{
    width: 135px;
    height: 100px;
    margin-left: 260px;
}

.logoMail{
    width: 120px;
    height: 100px;
}

#Boquilla_caja{
    width: 150px;
    height: 150px;
    position: absolute;
    top: 185px;
    left: 210px;
}

#Texto_Boquilla{
    font-size: 20px;
    transform: translateX(-10px);
}

#Tudel_caja{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 78px;
    left: 303px;
}

#Texto_Tudel{
    font-size: 30px;
    margin-top: 40px;
    transform: translateX(-20px);
}

#Diccionario_caja{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 407px;
    left: 334px;
}

#Texto_Diccionario{
    font-size: 30px;
    margin-top: 40px;
    transform: translateX(-20px);
}

#Notas_caja{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 106px;
    left: 758px;
}

#Texto_Notas{
    font-size: 30px;
    margin-top: 40px;
    transform: translateX(-20px);
}

.EscrituraBoton_Inicio{
    font-family:'Times New Roman', Times, serif;
    color: rgb(255, 255, 255);
    display: none;
    text-decoration: none;
    background-color: black;
    border: 2px solid;
    border-color: blueviolet;
    border-radius: 40px;
    text-align: center;
}

@keyframes crecimientoGiro{
    0%, 100% {
      transform: rotate(0deg) scale(0.0);
      opacity: 0;
    }
    50% {
        transform: rotate(0deg) scale(0.0);
        opacity: 0;
      }
    100% {
      transform: rotate(1080deg) scale(1);
      opacity: 1;
    }
}

.botonImagen{
    animation: crecimientoGiro 2s;
}

.Boton_Inicio a:hover img{
    transform: scale(1.5);
    transform-origin: center;
}
.Boton_Inicio a:hover + p{
    display: block;
}

.cajaW {
    width: 228px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    border: 2px solid;
    border-color: rgb(0, 0, 0);
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 40px;
}

.cajaW:hover {
transform: rotate(10deg) scale(1.1);
}

.girarQ {
    width: 276px;
    height: 300px;
    margin-right: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;
 
    perspective: 1000px;
    }

    .cajaQcompleta {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .girarQ:hover .cajaQcompleta {
      transform: rotateY(180deg);
    }

    .cajaQfront,
    .cajaQback {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .cajaQfront {
        transform: rotateY(0deg);
        background-color: rgb(255, 255, 255);
        border: 2px solid;
        border-color: rgb(0, 0, 0);   
        box-shadow: 0 4px 8px rgba(0,0,0,1);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;

    }

    .cajaQback {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 1.2rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }


#ar_pf1{
    width: 228px;
    float: left;
    margin-left: 10px;
}

#ar_pf0{
    width: 1180px;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#botonera{
    width: 1180px;
    height: 50px;
    float: left;
    margin-left: 10px;
}

.nav_list{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
}

.nav_list li a:hover {
    background-color: blue;
}

@keyframes shine {
  100% {
    left: 100%;
  }
}

.nav_list li a {
    display: block;
    margin-top: 10px;
    margin-right: 10px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    width: 228px;
    height: 50px;
    font-size: 25px;
    background-color: rgb(209, 255, 6);
    text-align: center;
    line-height: 50px;
    position: relative;
    overflow: hidden;
}

.nav_list li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(120deg, transparent, rgba(221, 0, 255, 0.5), transparent);
  animation: shine 2s;
  animation-iteration-count: 2;
}

.last_nav_list{
    margin-right: 0px;
}

.palabraGlosario{
    display: block;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 25px;
    text-align: center;
    line-height: 50px;
}

.articlePregunta{
    margin-top: 40px;
}

.articlePregunta h3{
    color: rgb(255, 238, 0);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    margin: 0px;
    text-decoration: underline;
}

.articlePregunta p{
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    margin: 0px;
}

.articlePalabra{
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
}

.divGlosario{
    float: left;
}

#palabrasGlosario{
    width: 985px;
    margin-left: 15px;
}

#volverGlosario{
    width: 200px;
}

.volverIntermedio{
    margin-bottom: 335px;
}

.volver{
    width: 100px;
    margin-left: 50px;
}

.textoVolver{
    margin: 0px;
    text-align: center;
}

.tituloFormulario{
    text-align: center;
    color: white;
}

.tituloFormulario h1{
    font-size: 60px;
    margin: 0px;
    text-decoration: underline;
}

.tituloFormulario h3{
    font-size: 35px;
    margin: 0px;
}

input, textarea, select{
    width: 400;
    display: block;
    box-sizing: border-box;
}

.formDiv{
    margin-left: 400px;
    margin-right: 400px;
    margin-top: 40px;
}

label{
    color: white;
}

input{
    width: 400px;
    height: 20px;
}

.label2{
    width: 200px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.inputDiv{
    width: 200px;
    float: left;
}

#Quien{
    margin-top: 5px;
    width: 400px;
    text-align: center;
    display: block;
}

.parrafoHistoria { 
    color: rgb(0, 0, 0); 
    font-size: 25px;
    text-align: justify;
}

#cabeceraPag1 {
    background-color: black;
    width: 1200px;
}

#contenidodelmedio {
    background-color: rgb(186, 186, 186);
    height: 3500px;
    width: 1200px;
}

#contenidoTeoria {
    background-color: rgb(186, 186, 186);
    height: 1600px;
    width: 1200px;
}


#pie {
    background-color: black;
    height: 200px;
    width: 1200px;
    padding-top: 50px;
    box-sizing: border-box;
}

#caja1 {
    width: 400px;
    float: left;
    margin-top: 80px;
    margin-left: 120px;
    margin-right: 150px;
}

#caja2 {
    width: 400px;
    float: left;
    margin-top: 80px;
}

#caja3 {
    width: 400px;
    margin-top: 100px;
    float: left;
    margin-left: 120px;
    margin-right: 150px;
}

#caja4 {
    height: 300px;
    margin-top: 100px;
    float: left;
    width: 400px;
}



#caja5 {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 170px;
    height: 450px;
    clear: both;
}

#caja5 video {
    width: 800px;
    height: 450px;
    object-fit: cover;
}

.botones {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
}

.botones li a {
    display: block;
    text-decoration: none;
    color: blueviolet;
    width: 150px;
    height: 50px;
    text-align: center;
    background-color: hotpink;
    margin-right: 20px;
    border-radius: 10px;
}

.botones li a:hover {
    color: brown;
    background-color: chartreuse;
}

.adolphesax {
    width: 400px;
    animation: giro3d 6s linear infinite;
    transform-style: preserve-3d;
    background-color: dimgray;
}


#p {
    height: 100px;
    width: 200px;
    background-color: blueviolet;
    margin-left: 250px;
}

td {
    border: 4px solid black;
    border-collapse: collapse;
}

th {
    border: 4px solid black;
    border-collapse: collapse;
    border-radius: 40px;
}

.tablas {
    width: 1200px;
    margin-top: 70px;
}

#primerTabla {
    margin-top: 0px;
}

.celda {
    width: 1200px;
}

.title {
    text-shadow: 2px 2px 4px rgb(255, 238, 0);
    font-size: 35px;
}

.foto {
    display: block;
    animation: latido 1.5s infinite;
}

@keyframes latido {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(0.95);
    }
    75% {
        transform: scale(1.05);
    }
}

@keyframes giro3d {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

.cajaQ {
    width: 276px;
    height: 300px;
    background-color: rgb(255, 255, 255);
    border: 2px solid;
    border-color: rgb(0, 0, 0);
    margin-right: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;
    box-shadow: 0 4px 8px rgba(0,0,0,1);
}

#juego{
    width: 1000px;
    height: 800px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 100px;
}

#quiz{
    margin-top: 20px;
}

#imagenesQuiz{
    width: 500px;
    height: 400px;
    float: left;
    background-image: url(Imagenes/Quiz_Digitación.jpg);
    background-size: cover;
}

#respuestasQuiz{
    width: 500px;
    height: 400px;
    float: left;
    background-color: rgb(255, 0, 0);
}

.quizNotasW, .quizNotasR{
    width: 58px;
    height: 38px;
    float: left;
    margin-right: 95px;
    margin-left: 95px;
    margin-top: 48px;
    text-align: center;
    color: white;
    border: 1px solid rgb(255, 255, 255);
    background-color: brown;
    font-size: 40px;

}

#quizResultado{
    padding-top: 30px;
    float: left;
    width: 230px;
    height: 40px;
    margin: 10px;
    text-align: center;
    color: white;
    font-size: 40px;
}

.pagActual{ 
    background-color: rgb(255, 6, 6) !important;
}

#respuestaCorrecta, #respuestaIncorrecta{
    display: none;
}

.quizNotasW:hover ~ #quizResultado #respuestaIncorrecta{ 
    display: block;
}

.quizNotasW:hover ~ #quizResultado{ 
    padding-top: 0px;
}

.quizNotasR:hover ~ #quizResultado #respuestaCorrecta{ 
    display: block;
}

.guia{
    font-size: 30px;
    text-align: center;
    color: rgb(0, 0, 0);
}

#contenidoTeoria li{
    font-size: 25px;
}

.anclasIP{
    color: rgb(13, 0, 255); 
    text-decoration: underline;
}

.anclasIP:hover{
    color: rgb(251, 255, 0); 
}