.agemain_div { width:98%; border:lime 2px solid; border-radius:25px; overflow-y:auto; overflow-x:none; height: 90vh; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab,yellow,black);
background-size: 400% 400%; color: navy; animation: gradient 10s ease infinite; align-content: center;} 
@keyframes gradient {
    0% {   background-position: 0% 50%; }
    50% {  background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.age_container { width:400px; border:lime 2px solid; border-radius:25px; height:400px; background-color: #e0f7fa; margin: auto;}
.age_container h1 { color: #333; margin-bottom: 1.5rem; font-size: 1.8rem; text-decoration: underline; text-shadow: #555 5px;}
.age_container input { width:200px; }
.age_container label { display: block; margin: 0.5rem 0; color: #555; font-weight: bold; }
.flatpickr-input {
    padding: 0.5rem; width: 100%; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; 
    margin-bottom: 1rem; box-sizing: border-box; cursor: pointer; transition: border-color 0.3s;}
.flatpickr-input:focus { border-color: #4caf50; outline: none; }
.age_container button { background-color: #4caf50; color: white; padding: 0.75rem 1.5rem; border: none; 
    border-radius: 5px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s; }
.age_container button:hover { background-color: #45a049; }
#result { margin-top: 1.5rem; font-size: 1.2rem; color: #333; }
.flatpickr-calendar { background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-family: 'Segoe UI', sans-serif; }
.flatpickr-day { color: #333; transition: background-color 0.2s; }
.flatpickr-day:hover { background: #e0f7fa; }
.flatpickr-day.selected { background: #4caf50; color: white; border: none; }
.flatpickr-day.today { border: 1px solid #4caf50; color: #4caf50; font-weight: bold; }
.flatpickr-monthDropdown-months, .flatpickr-year { font-size: 1rem; color: #333; }
.flatpickr-prev-month, .flatpickr-next-month { color: #4caf50; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: #45a049; }
@media screen and (max-width: 500px){
    .agemain_div { width: 100%; height: 50vh; font-size: smaller;  overflow:none;}
    .age_container { width: fit-content; height: 30vh;}
    .age_container h1 { font-size: 1.0rem;}
    .age_container input { width:130px; }
    .age_container button { margin: 2px; padding: 2px 4px;}
}