*{
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

body{
background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #E9E4F0, #D3CCE3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.result{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    width: 70%;
    flex-direction: row;
    gap: 20px;
    margin-top: 1em;
    color: #4e4e4e;
    animation: coming .5s ease-in;
}

span{
    font-size: 3rem;
    font-weight: 700;
    color: #6f5193;
}

#glitch{
    display: none;
}

#baby_age{
    display: none;
}

#Toddler_age{
    display: none;
}

#Teen_age{
    display: none;
}

#youngadult_age{
    display: none;
}

#middleadult_age{
    display: none;
}

#oldage_age{
    display: none;
}

#death{
    display: none;
}

.visualcues{
    width: 10em;
}

.outerbox{
    display: flex;
    width: 50vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    text-align: center;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    padding: 2em;
}


h1{
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6f5193;
}

p{
    font-size: 1.5rem;
    margin-bottom: 1em;
}

.datefield{
    width: 4em;
    height: 4em;
    text-align: center;
    background-color: #6f5193;
    color: white;
    border: none;
    border-radius: .5em;
    font-weight: 700;
}

::-ms-input-placeholder {
    color: white;
}

::placeholder {
    color: white;
    opacity: 1; /* Firefox */
  }

input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url(birthday.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35px;
    font-size: 5em;
}



.calender{
    width: 4em;
    height: 4em;
    text-align: center;
    border: #6f5193 2px solid;
    color: #6f5193;
    border-radius: .5em;
}

.btn{
    display: block;
    margin: auto;
    background-color:#6f5193;
    color: white;
    margin-top: 2em;
    padding: .8em;
    border-radius: .5em;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
}

.btn:hover{
    transition: all .2s ease-in-out;
    background-color:#442f5e;
}

.txt{
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}

@keyframes coming {

    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
    
}

@media only screen and (max-width: 500px) {

    body{
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .outerbox{
        width: 80vw;
        height: 80vh;
        display: flex;
        flex-direction: column;
        gap: .2rem;
        padding: 1em;
    }

    h1{
        font-size: 2rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #6f5193;
    }
    
    p{
        font-size: 1rem;
        margin-bottom: 1em;
        width:   12em;
        text-align: center;
    }

    .datefield{
        width: 3em;
        height: 3em;
        text-align: center;
        background-color: #6f5193;
        color: white;
        border-radius: .3em;
        font-weight: 700;
    }

    .calender{
        width: 3em;
        height: 3em;
        text-align: center;
        border: #6f5193 2px solid;
        color: #6f5193;
        border-radius: .3em;
        display: block;
        margin: auto;
        margin-top: 1em;
    }
    
    input[type="date"]::-webkit-calendar-picker-indicator {
        background-image: url(birthday.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 25px;
        font-size: 5em;
    }
    
    .result{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        width: 70%;
        flex-direction: column;
        gap: 20px;
        margin-top: 1em;
        color: #4e4e4e;
        animation: coming .5s ease-in;
    }

    .visualcues{
        width: 4em;
    }

    .txt{
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 1rem;
        gap: .2em;
    }

    span{
        font-size: 1.5rem;
        font-weight: 700;
        color: #6f5193;
    }

    .btn{
       
        margin-top: 1em;
        
    }
}