/*? RESET --------------------*/

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

/* ::selection {
    background-color: rgb(255, 93, 241); -- THEMES --
} */

/*? RESET FIN --------------------*/

/* body {
    background: url("../img/hojas.jpg"); -- THEMES --
    background-attachment: fixed;
} */


#global {
    /* display: flex;
    flex-direction: column;
    flex-wrap: wrap; */
    /* width: 100%; PARA UN FULL SCREEN*/

    width: 65%;
    height: 2300px;
    /* background-color: aliceblue; -- THEMES -- */
    margin: 0px auto;
    margin-top: 60px;
    margin-bottom: 10px;
    padding: 20px;
    /* box-shadow: 0px 0px 3px rgb(63, 63, 63); -- THEMES -- */
}


#header01 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100%;
}

#logo {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.5em;
    letter-spacing: 4px;
    line-height: 70px;
    /*con esto centramos en el eje Y*/
    text-align: center;
    width: 385px;
    height: 80px;
    margin-bottom: 20px;
    /*Para colocar los elementos que tenga abajo a su derecha*/
    text-transform: uppercase;
    /*Para pasar el texto a mayusculas*/
}

/*? --- MENU --- */

#menu {
    font-family: helvetica, arial;
    /* background-color: rgb(50, 54, 255); -- THEMES -- */
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 20px;
}

#menu ul {
    line-height: 46px;
    /*Alineacion vertical central de todo el ul (de todo el menu)*/
}

#menu ul li {
    height: 46px;
    display: inline-block;
    /*Para poner unos elementos unos a lado de los otros*/
    transition: all 300ms ease-in-out;
}

#menu ul li:hover {
    /* background: rgb(255, 0, 234); -- THEMES -- */
}

#menu a {
    display: block;
    /*Para que este visible*/
    color: white;
    text-decoration: none;
    padding-left: 25px;
    padding-right: 25px;
    /*para que tenga espacio entre enlace y enlace*/
}

/*? --- MENU FIN --- */



/*? --- CONTENIDOS --- */

#contenido {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 2fr 2fr;
    grid-template-rows: 2fr 1fr;
}

#about img {
    width: 300px;
    margin: 10px 0px;
    padding: 10px 0px;
}

#about span {
    font-family: Helvetica;
    font-size: 1.2em;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

#about p {
    font-family: Helvetica;
    font-size: 1em;
}


/*? --- Posicionamiento de elementos en Grid --- */

#about {
    grid-column-start: 2;
    grid-column-end: 3;
}

#login {
    grid-column-start: 2;
    grid-column-end: 3;
}

#box {
    grid-column-start: 0;
    grid-column-end: 1;
}

#contacto {
    grid-column-start: 0;
    grid-column-end: 2;
}


/*? Formato formulario de registro  -------------------*/
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="number"],
select {
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 4px;
    border-top-color: 4px solid rgb(61, 22, 255);
    width: 280px;
    box-shadow: 0px 0px 4px gray;
    border: 3px solid rgb(57, 57, 255);
    font-size: 1.2em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form input[type="number"]:focus,
select:focus {
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 4px;
    border-top-color: 4px solid rgb(61, 22, 255);
    width: 280px;
    box-shadow: 0px 0px 4px gray;
    border: 3px solid rgb(255, 54, 252);
    font-size: 1.2em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    outline: none;
}


form input[type="submit"] {
    margin-top: 15px;
    padding: 5px;
    border: 2px solid gray;
    cursor: pointer;
}

#login label{
    width: 100%;
    /* display: block; */
    font-family: helvetica;
}

h2{
    font-size: 2em;
    font-family: Arial, Helvetica, sans-serif;
}

/*? Formato formulario de registro FIN --------------------*/


/*? los post por Json */
#posts {
    flex-wrap: wrap;
    width: 60%;
    top: -100px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
}

.post {
    padding-left: 25px;
    padding-top: 20px;
    width: 150%;
    height: 180px;
    /* background-color: white; -- THEMES --*/
    border-radius: 8px;
    box-shadow: 0px 0px 10px gray;
    padding-top: 25px;
}

.post h2 {
    color: rgb(61, 22, 255);
    font-size: 2.5em;
    margin-top: 0px;
}

/* Estilos para el campo Fecha del Post (articulo)*/
.post .date {
    display: block;
    color: rgb(255, 0, 234);
    margin-top: 10px;
}

/* Estilos para el parrafo del Post (articulo)*/
/* .post p{
    margin-top: 30px;
    margin-bottom: 20px;
    line-height: 20px;
} */

.button-more {
    display: block;
    /*para que se comporte como un bloque*/
    padding: 10px;
    /* background-color: rgb(255, 0, 234); -- THEMES -- */
    text-decoration: none;
    /* color: white; -- THEMES -- */
    margin-top: 10px;
    width: 80px;
    margin-right: 30px;
    /*Lo alineamos a la derecha*/
    text-align: center;
    margin-left: auto;
    /* Alinear a la derecha */
}


.button-more {
    margin-bottom: 150px;
}

.margen-inferior-150px {
    /* a ignorar */
    margin-bottom: 350px;
}

.post p {
    width: 90%;
}

.post {
    height: 200px;
}

#about p {
    text-align: justify;
    width: 300px;
}


/*? Formato del Footer --------------------*/
footer {
    bottom: 0;
    font-family: Arial, Helvetica, sans-serif;
    /* color: white; -- THEMES -- */
    /* background-color: rgba(51,51,51, 0.7); -- THEMES -- */
    width: 67%;
    height: 200px;
    margin: 0px auto;
}

footer p {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    text-align: center;
    line-height: 80px;
    margin-top: 40px;
    margin-bottom: 0px;
    height: 25px;
}

/*? Formato del Footer --------------------*/


/*? alto del Slider --------------------*/
.bx-wrapper,
.bx-viewport {
    height: 750px !important;
    /* width: 1300px !important; */
    /* height: 350px !important; */
}


/*? SELECTOR DE TEMAS ------------------------*/

#selector-theme {
    position: fixed;
    top: 40%;
    background: rgba(51, 51, 51, 0.7);
    width: 50px;
    height: 140px;
}

#to-green,
#to-red,
#to-blue {
    width: 30px;
    height: 30px;
    border: 1px solid white;
    display: block;
    /*para que se comporte como un boton de bloque*/
    margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 5px;
    cursor: pointer;
}

/*?Color de los botones uno a uno*/
#to-green {
    background-color: rgb(179, 255, 0);
}

#to-red {
    background-color: rgb(246, 41, 26);
}

#to-blue {
    background-color: rgb(65, 140, 245);
}


/*? FUNCION SUBIR -----------------------------*/

.subir {
    color: white;
    text-decoration: none;
    display: block;
    float: right;
    padding-right: 10px;
    cursor: pointer;
}


/*? ACORDEON -------------------------------------*/

#acordeon {
    width: 95%;
    padding-top: 20px;
}

#acordeon p {
    opacity: 60%;
}


/*? RELOJ  -------------------------------------*/

#reloj {
    font-size: 3em;
    font-weight: 800;
    font-family: Arial, Helvetica, sans-serif;
    color: red;
    border: 5px dashed red;
    width: 230px;
    padding: 20px;
    margin: 0px auto;
    height: 10%;
    margin-top: 30px;
}

/*? FORMULARIO DE CONTACTO  -------------------------------------*/

#form_contacto {
    width: 100%;
    margin: 0px auto;
    /* margin-left: 30%; */
}

#form_contacto input{
    width: 250px;
    margin-bottom: 30px;
    margin-top: 5px;
}

#form_contacto label{
    width: 100%;
    /* display: block; */
    font-family: helvetica;
    margin-bottom: 10px;
}

#form_contacto,
form input[type="number"],
select {
    width: 100px;
    margin-bottom: 30px;
    margin-top: 5px;
}

#form_contacto input[type="number"][name="edad"] {
    width: 50px;
    display: inline-block; /* Colocar el input en la misma línea */
    margin-right: 10px; /* Agregar un margen para separar los elementos */
    margin-bottom: 20px;
}

#form_contacto select[name="sex"] {
    width: 120px; /* Mantener el ancho del select */
    display: inline-block; /* Colocar el select en la misma línea */
}