body 
{
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #1E1E1E;
    color: #F0B83F;
}
.vcard {
    background-color: #2D2D2D;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 600px;
    padding: 20px;
    box-sizing: border-box;
}
.vcard-header {
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.vcard-header h1, .vcard-header h2 {
    color: #FFD700;
    margin: 0;
    font-size: 1.5em;
}
.vcard-body {
    display: flex;
    flex-direction: column;
}
.input-group {
    margin-bottom: 15px;
}
label {
    display: block;
    margin-bottom: 5px;
    color: #B0B0B0;
    font-size: 0.9em;
}
select, input, button {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #3D3D3D;
    color: #E0E0E0;
    font-size: 16px;
}
button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 15px;
    padding: 15px;
}
button:hover {
    background-color: #45a049;
}
#currentDate, #result {
    margin-top: 20px;
    padding: 15px;
    background-color: #3D3D3D;
    border-radius: 4px;
    font-size: 1em;
}
.aspect {
    margin-top: 20px;
    padding: 15px;
    background-color: #3D3D3D;
    border-radius: 4px;
}
.aspect-title {
    color: #FFD700;
    margin-bottom: 10px;
    font-size: 1.1em;
}
.aspect-description {
    font-size: 0.9em;
    margin-top: 10px;
}
a {
    color: #4CAF50;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .vcard {
        width: 95%;
        padding: 15px;
    }
    .vcard-header h1, .vcard-header h2 {
        font-size: 1.3em;
    }
    select, input, button {
        font-size: 14px;
    }
}
.numero {
			background-color: #000000;
			padding: 20px;
			margin-bottom: 20px;
			border: 1px solid #ddd;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		
		h2 {
			color: #D09663;
		}
.centrado {
    text-align: center;
    color: #D09663;
}
 h3 {
    text-align: center;
    color: #D09663
}
ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		
		ul li {
			background-color: #2C2C27;
			padding: 10px;
			border-bottom: 1px solid #ddd;
		}
		
		ul li:last-child {
			border-bottom: none;
		}
		
		.positivo {
			color: antiquewhite;
		}
		
		.negativo {
			color: lightgoldenrodyellow;
		}
img {
            width: 100px;
            height: 100px;
            margin-right: 15px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0; /* Evita que la imagen se encoja */
        }
        .tonal-info {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 35px; /* Asegura que el contenedor tenga al menos la altura de la imagen */
        }

/* Estilos para evitar zoom en inputs en iOS */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select, input, button { 
        font-size: 16px; 
    }
}  


    <div class="vcard">
        <div class="vcard-header">
            <h1>Tonalpohualli</h1>
            <h3>Numerología</h3>
        </div>
        <div class="vcard-body">
            <div id="currentDate"></div>
            <div class="input-group">
                <label for="day">Día:</label>
                <select id="day"></select>
            </div>
            <div class="input-group">
                <label for="month">Mes:</label>
                <select id="month"></select>
            </div>
            <div class="input-group">
                <label for="year">Año:</label>
                <input type="number" id="year">
            </div>
            <button onclick="calculateDate()">Calcular Fecha</button>
            <div id="result"></div>
        </div>
    </div>