@media  (min-width:980px){
  /* solo pantalla con un ancho minimo 800px que es para un escritorio*/


body{
    color:rgb(205, 227, 255);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    background-color: rgba(158, 191, 241, 0.829);
   
}
/* de la página en construccion*/
.construccion{
    text-align:center;
}
.construccion2{
    text-align:center;   
    font-size: 40px;
}

/* este id es exclusivo de las paginas:
 - preguntas frecuentes
 - aviso legal
 -politica de privacidad
 - cookies*/

#bodypf {
    background-image: url(../imagenes/portada/tapete.jpg);    
    background-size: cover; 
    color:aliceblue ;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   
}
#bodypf p{
    color:azure;
    margin:30px
}

#bodypf h3 {
    color:blueviolet;
    font-weight: bold;
    font-size: 25px;
   
}
#bodypf h2{
    background-color:blueviolet;
    background-size: cover;
    text-align: center;
    color:azure
}
#bodypf a{
    text-align: right;
    color:white;
}
#bodypf a:hover{
    color:blueviolet
}
#bodypf li {
    color: antiquewhite;
    font-size: 18px;
}
#bodypf .tit {
    color:blueviolet;
    font-size: 22px;
    background-color: rgba(240, 248, 255, 0.582);
    background-size: cover;
}



/* imagen de la portada*/
#entrada1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    background-position:top;
    background-image: url(../imagenes/portada/portada1.png);
    color: rgb(25, 14, 75);
    background-size: cover;
    height: 300px;
    width: 100%;
   
}
.parpadeo{
    animation: parpadeo 5s infinite;
}

@keyframes parpadeo {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}


#principio {
    text-align:center;
    font-size: 20px;
    color:blueviolet;
}

   /* solo pantalla con un ancho minimo 800px que es para un escritorio ** ver una tabla de resoluciones   ** max width 800px para moviles */ 
   #menu {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    background-image: url(../imagenes/portada/tapete.jpg);    
    background-size: cover;    
    color: aliceblue;
    margin: 0px;
    padding: 15px;
    font-size: 18px;   
    justify-content: space-around;
}



.select:hover{
    font-weight: bold;
    font-size: 20px;
}
 /* la explicacion del contenido de la página*/  

#contenido {
    display: flex;
    justify-content: center;
    
    
}

#contenido, p {
    font-size: 20px;
    color: rgb(25, 14, 75);
   
}

#contenido ul{
    color: rgb(25, 14, 75);
    font-size: 18px;   

}

.mandala:hover{
    height: 210px;
}
.mandala {
     height: 200px;
}
#mas{
    display:inline;
    color:blueviolet;
    font-size: 18px;
    font-style: italic ;
    cursor: pointer;
}

#menos{
    display:none;
    color:blueviolet;
    font-size: 18px;
    font-style: italic ;
    cursor:pointer;
}


#frase {
    font-style: italic;
    font-weight: bolder;
    text-align: center;
    color: rgb(25, 14, 75);
    border: 2px solid rgb(100, 136, 236);
    padding: 5px;
    font-size: 20px;       
}
#frase:hover{
    font-style: italic;
    font-weight: bolder;
    text-align: center;
    color: rgb(25, 14, 75);
    border: 2px solid rgb(100, 136, 236);
    padding: 5px; 
    font-size: 22px;
}

/* banda separadora de secciones*/
.repetido {
    background-image: url(../imagenes/portada/mandala.png);
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center ;
    opacity: 0.7;
    margin: 10px;
}

/*enlaces*/
a {
    color:antiquewhite;
    font-size: 22px;
    font-weight: bold;
    text-decoration:none;

}
a:hover{
    color:blueviolet;
    font-size: 24px;
    cursor: pointer;
}

#click{
    color:aliceblue
}
#flechas_dobles{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    position: relative; /* Posicionamiento relativo para el movimiento */
  
}
#flechas_dobles img{    
    height: 40px;
    width: 40px;
}



#flechas_dobles{
animation: subirbajar 3s linear infinite; /* Animación de subida y bajada */
}

@keyframes subirbajar {
0% {
    transform: translateY(0); /* Iniciar en la posición superior */
}
50% {
    transform: translateY(-100%); /* Mover hacia abajo 100% */
}
100% {
    transform: translateY(0); /* Volver a la posición superior */
}
}

/*  seccion de numerología*/

#fecha {
    text-align:  center;
    color:aliceblue
} 

.boton {
    display: flex;
    flex-direction: column;    
    justify-content: center;
    background-image: url(../imagenes/portada/tapete.jpg) ;
    margin-bottom: 20px;
    padding: 10px;
    max-width: 200px;
}
.boton button {
    border:blueviolet solid ;
    background-color: blueviolet;
    color:antiquewhite;
    font-size: 18px;
}
.boton button:hover{
    font-size: 19px;
    border:antiquewhite solid ;
}


#numerologia {
    display:flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background-image: url(../imagenes/portada/espacio.jpg);
    background-size: cover;

}

#numerologia img{
    height: 75px;
}
/* formulario de numerologia*/
#calendario {
    display: flex;
    justify-content:end;
    flex-direction: column;
    align-items: center;   
    width: 500px; /* Ancho de 500 píxeles */
    height: auto; /* Altura automática */
    max-width: 80%; /* Ancho máximo del 80% */
    min-height: 200px; /* Altura mínima de 200 píxeles */    
    background-image: url(../imagenes/portada/numerologia.jpg);   
    margin: 20px auto;
    border-radius: 10% ;
    border:black solid;
}
/* texto del formulario de numerologia*/
#calendario p{
    color:black;
    font-weight: bolder;
    font-size: 20px;
}
#calendario:hover{
    border: antiquewhite solid;
}
#botonNumero {
  margin: 10px;
  background-image: url(../imagenes/portada/tapete.jpg); 
  color:aliceblue;
  margin: 20px;
  width: 200px; /*ancho*/
  height: 100px;  /*alto*/
  border-radius: 50%; /* Botón circular */
  font-size: 20px;  
}
#botonNumero:hover {
    font-size: 25px;
    width:220px; 
    border: antiquewhite solid;
}

#resultado {
    display: flex;
    flex-direction: column;
    background-image: url(../imagenes/portada/verde.jpg);
    opacity: 0.7;
    align-items: center;
    background-size: cover;  
    padding: 30px;  
    margin:40px 10px 10px 10px;
    

}
#resultado p{
    color:aliceblue;
    font-weight: bolder;
    font-size: 20px;
    text-align: center;
}
#resultado img{
    height:50px;
    width: 20px;
    
}
#numeros{
    display: flex;
}

/* seccion de tarot*/
#tarot  {
    display:flex;
    justify-content:space-evenly;
    align-items: center;
    flex-direction: column;
    background-image: url(../imagenes/portada/espacio.jpg);
    background-size: cover;
    

}

/*tapete donde se muestra el reverso de las cartas*/
#tapete1{
    display: flex;
    justify-content:center; 
    background-image: url(../imagenes/portada/tapete.jpg);   
    background-size: cover;  

}

/*tapete donde se muestran las cartas*/
#tapete2{
    display: flex;    
    flex:1;    
    /* flex-direction:row-reverse; */
    background-image: url(../imagenes/portada/tapete.jpg);   
    background-size: cover;
    justify-content:center;
    align-items: flex-start;
    margin: 10px;
    
}

/* donde se muestran las cartas 1 y 2 de la tirada 7*/
#tapete1 #bloque1{
    display: flex;
    flex-direction: column;
    justify-content: center
    
}
#tapete1 #bloque1 #divReverso{ /*para superponer el numero*/
  position: relative;
}
#tapete1 #bloque1 #divReverso p img{    /*para superponer el numero*/    
    position: absolute;
    top:20px;
    left:50%;
    transform: translateX(-50%); /* Compensa la mitad del ancho del texto */  
}

#bloque1 #divReverso p img{ /*tamaño del numero superpuesto*/
    height:70px;
    width: 40px;
}

/*bloque 2 situación central de la tirada de 7*/
#tapete1 #bloque2{
    display: flex;
    
}
/*carta 3*/
#tapete1 #bloque2 #divReverso01{  /* para superponer el numero*/
    position: relative;
    
}
#tapete1 #bloque2 #divReverso01 p img{  /* para superponer el numero*/
    position: absolute;
    top:20px;
    left:50%;
    transform: translateX(-50%); /* Compensa la mitad del ancho del texto */
}
#tapete1 #bloque2 #divReverso01 p img{ /* tamaño del número superpuesto*/
    height:70px;
    width: 40px;
}

#tapete1 #bloque2 #divReverso01 img{ /*tamaño de la carta*/
    height:150px;
    margin: 20px;
}

/*carta 4 la que está girada*/ /* para superponer el numero -- que no sale bien*/
#tapete1 #bloque2 #divReverso11{ 
    position: relative;
}

#tapete1 #bloque2 #divReverso11 p img{
    position: absolute;
    top:0px;
    left:50%;
    transform: translateX(-50%); /* Compensa la mitad del ancho del texto */
}
#tapete1 #bloque2 #divReverso11 p img{
    height:50px;
    width: 40px;
    
}
#tapete1 #bloque2 #divReverso11 img{        
    transform: rotate(90deg);
    height:150px;
    margin: 30px;  
    
}

/* bloque 3 donde están las cartas 5,6,7 de la tirada de 7*/

#tapete1 #bloque3{
    display: flex;
    flex-direction: column;
}
#tapete1 #bloque3 #divReverso img{
    margin: 0px 20px;
}
#tapete1 #bloque3 #divReverso{ /*para superponer el numero*/
    position: relative;
   
}
#tapete1 #bloque3 #divReverso p img{    /*para superponer el numero*/    
    position: absolute;
    top:20px;
    left:50%;
    transform: translateX(-50%); /* Compensa la mitad del ancho del texto */  
}

#bloque3 #divReverso p img{ /*tamaño del numero superpuesto*/
    height:70px;
    width: 40px;
}

/*tamaños de los reversos y efectos al pasar el ratón*/
#divReverso img{
    height:150px;
    margin: 20px 10px;
}
#tapete1 #bloque1 #divReverso p img:hover{
    height:80px;
}

#tapete1 #bloque2 #divReverso01 p img:hover{
    height: 80px;
}

#tapete1 #bloque2 #divReverso11 p img:hover{
    height:80px;
}
#tapete1 #bloque3 #divReverso p img:hover{
    height: 80px;
}




/*  mostrar las cartas*/
.unaAleatoria {  
    display:inline-flex; 
    flex-direction: column;
    align-items: center;    
    justify-content:center;     
    align-content: center;     
    /* height:350px; */
    padding: 10px; 

}
/*imagen de las cartas*/
.unaAleatoria img{
    height: 150px;
    width: 100px;
    
}

/*texto de las tiradas de cartas*/
.unaAleatoria p{  
    font-size: 18px;
}


/* el recuadro del formulario*/
#tiradas {
    display: flex;
    justify-content: center;
    /* flex-direction: column;    */
    width: 500px; /* Ancho de 500 píxeles */
    height: auto; /* Altura automática */
    max-width: 80%; /* Ancho máximo del 80% */
    min-height: 200px; /* Altura mínima de 200 píxeles */
    background-image: url(../imagenes/portada/tarot.jpg); 
    margin: 20px auto;
    border:black solid;
    border-radius: 10px;
}
#tiradas:hover{
    border:antiquewhite solid;
}
/*boton del formulario de tarot*/
#cartas{
  margin: 10px;
  background-image: url(../imagenes/portada/tapete.jpg); 
  color:aliceblue;
  margin: 20px;
  width: 200px; /*ancho*/
  height: 100px;  /*alto*/
  border-radius: 50%; /* Botón circular */
  font-size: 20px;
  border:black solid;

}

#cartas:hover{
    font-size: 25px;
    height:120px;
    border: antiquewhite solid;
}


/* SECCION DE AMULETOS */

#amuletos{
    display:flex;
    justify-content:space-evenly;
    align-items: center;
    flex-direction: column;
    background-image: url(../imagenes/portada/espacio.jpg);
    background-size: cover;
    
}
/* formulario amuletos*/

#tiposAmuletos{
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-wrap: wrap;
    /* width: 500px; Ancho de 500 píxeles */
    height: auto; /* Altura automática */
    max-width: 60%; /* Ancho máximo del 80% */
    min-height: 200px; /* Altura mínima de 200 píxeles */
    background-image: url(../imagenes/portada/amuletos.jpg);
    background-size: cover;
    border-radius: 10px;      
    margin: 20px auto;
    border:black solid;
}
#tiposAmuletos:hover{
    border:antiquewhite solid;
}

/*boton de amuletos*/
#simbolo{
    margin: 10px;
    background-image: url(../imagenes/portada/tapete.jpg);    
    color:aliceblue;
    margin: 20px;
    width: 200px; /*ancho*/
    height: 100px;  /*alto*/
    border-radius: 50%; /* Botón circular */
    font-size: 20px;
}
#simbolo:hover{
    font-size: 25px;
    height:120px;
    border: antiquewhite solid;
}
#mostrarAmuleto{
    display: flex;
    flex-direction: column;
    background-image: url(../imagenes/portada/tapete.jpg);
    opacity: 0.8;
    align-items: center;
    background-size: cover;
    margin:20px;
    padding: 10px;
    
}
#mostrarAmuleto img{
    height: 250px;
    width: 150px;
   
}
#mostrarAmuleto img:hover{
    height: 400px;
    width: 200px;
   
}
#mostrarAmuleto p{
    font-size: 20px;
    color:aliceblue ;
    font-weight: bolder;
    align-items: center;
    margin: 10px 60px;
}

                                /*SECCION VELAS*/

#velas{
    display:flex;
    justify-content:space-evenly;
    align-items: center;
    flex-direction: column;
    background-image: url(../imagenes/portada/espacio.jpg);
    background-size: cover;   

}

/* formulario de velas*/
#tiposVelas{
    display: flex;
    justify-content:center;
    align-items: center;
    width: 500px; /* Ancho de 500 píxeles */
    height: auto; /* Altura automática */
    max-width: 80%; /* Ancho máximo del 80% */
    min-height: 200px; /* Altura mínima de 200 píxeles */
    background-image: url(../imagenes/portada/velas.jpg);
    background-size: cover;
    border-radius: 10px;       
    margin: 20px auto;
    border:black solid;   
    
}

#tiposVelas:hover{
    border: antiquewhite solid;
}

/*boton velas*/
#colores{
    margin: 10px;
    background-image: url(../imagenes/portada/tapete.jpg);    
    color:aliceblue;
    margin: 20px;
    width: 200px; /*ancho*/
    height: 100px;  /*alto*/
    border-radius: 50%; /* Botón circular */
    font-size: 20px;    
}
#colores:hover{
    font-size: 25px;
    height:120px;
    border: antiquewhite solid;
}
/* donde se muestran las velas*/
#tiendaVelas{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    background-image: url(../imagenes/portada/madera.jpg); 
    background-size: cover;
  
} 

.cadaUna{
    display: flex;
    flex-direction: column;   
    
}
.imgVela img{
    height: 100px;
    width: 100px;
}

#tiendaVelas2{
    display: flex;
    flex-direction:row-reverse;
    justify-content: center;
    flex-wrap: wrap;
    background-image: url(../imagenes/portada/madera.jpg); 
    background-size: cover;
    opacity: 0.7;
    padding: 20px;
    margin:20px;
   

    
}

.prop_vela{
    display: inline-flex;
    font-size: 15px;
    flex-direction:column-reverse;
    justify-content: space-evenly;
    align-items: center;
    border:black solid;
    padding: 10px;
    margin: 20px;
    width: 300px; /* Ancho de 500 píxeles */
    height: 200; /* Altura automática */
    max-width: 80%; /* Ancho máximo del 80% */
    min-height: 200px; /* Altura mínima de 200 píxeles */
}
.prop_vela img{
    height: 75px;
    width: 75px;
}
.prop_vela p{
    font-size: 20px;
    color:black ;
    font-weight: bolder; 
}
.prop_vela a{
    color:blueviolet
}
.prop_vela a:hover{
    color:antiquewhite
}
.prop_vela:hover{
    border:antiquewhite solid;  
    
}
.prop_vela img:hover{
    height: 100px;
    width: 100px;
}

                    /*SECCION DE CONTACTO*/

/*enlace a la pagina de la autora*/
#enlace,#enlace a{
    color:blueviolet;
    text-align: center;
  margin: 10px 0px 0px 0px;
} 
#enlace a:hover{
    color:antiquewhite;
} 

#contacto{
    display:flex;
    justify-content:space-evenly;
    flex-direction: column;    
    background-image: url(../imagenes/portada/tapete.jpg);
    background-size: cover;    
}


#contactar{
    display: flex;    
    justify-content: space-around;
    flex-direction: column;    
    width: 500px; /* Ancho de 500 píxeles */
    height: auto ; /* Altura automática */
    max-width: 80%; /* Ancho máximo del 80% */
    min-height: 200px; /* Altura mínima de 200 píxeles */
    background-image: url(../imagenes/portada/seccionContacto.jpg);
    background-size: cover;       
    border-radius: 10px;    
    margin: 20px auto;
    padding: 0px;
}
#contactar input, #contactar textarea, #contactar button{
    font-size: 14px;
    border:black solid;
    padding: 20px 50px ;
    border-radius: 20px;   
    margin: 10px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#contactar p  {
    color:black;
    
}
#contactar button{
    display: flex;
    margin: 10px 20px 10px 200px;    
    justify-content: center
}
#contactar button:hover{
    color:blueviolet;
    border:blueviolet solid;
}
#casilla{
    color:black;
    font-size: 14px;
}
#casilla a {
    color:black;
    font-size: 14px;
}
#casilla a:hover{
    color:blueviolet;
    font-size: 15px;
}
#miCasilla{
     accent-color: blueviolet;
     width: 24px;
     height: 24px;

}
#separados{
    display: flex;
    justify-content: center;
   
}
#final{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 25px;
    
}
#final p{
   color:aliceblue;
   text-align: justify;
   
   
}

/*el pie de pagina */

#pie01{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;    
    background-color: rgba(234, 241, 247, 0.582);
    background-size: cover;   
    height: 30px;
    /* margin: 40px; */
   
    
}

#pie01 p a{
    color:black;
    font-size: 16px;
    /* margin: 0px; */
}
#pie01 p a:hover{
    color:blueviolet;
}

/*publicidad*/
#pie{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
     background-image: url(../imagenes/portada/tapete.jpg);
    background-size: cover;
}


#pie p a{
    font-size: 14px;
    
}
#publi {
    background-color: blueviolet;
}
#publi a:hover{
    color:aliceblue;
    font-size: 18px;

}

}

/* @media print{
  css para impresoras
} */