body{
    background-color: hsl(0, 0%, 94%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    height: 100vh;
}

.MainCard{
    flex-wrap: wrap;
    background-color: white;
    display: flex;
    flex-direction: column;
    border-bottom-right-radius: 20%;
    border-bottom-left-radius: 3%;
    border-top-left-radius: 3%;
    border-top-right-radius: 3%;
    height: 60vh;
    padding: 40px;
    min-width: 600px;
}

.birth{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.labels{
    display: flex;
    flex-direction: row;
    gap: 11%;
    margin-bottom: 1.5%;
    font-weight: 800;
    color: hsl(0, 0%, 41%);
}

label{
    width: 8vb;
}

.inputs{
    display: flex;
    gap: 4%;
}

input{
    padding: 10px;
    width: 11vb;
    height: 3.5vh;
    font-size: 32px;
    font-weight: 700;
    cursor: pointer;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.341);
    border-radius: 9%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.finalAge{
    flex: 1
    display: flex;
    flex-direction: column;
}

p{
    display: inline;
    font-size: 85px;
    font-weight: 800;
}

#totalyears, #totalmonths, #totaldays{
    color: hsl(259, 100%, 65%);
    font-style: italic;
    font-weight: 800;
    
}


.line-with-button {
    margin-top: 5%;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: 10px;
    height: 1px;
}

.line {
    height: 1px;
    width: 100%;
    background-color: hsla(0, 0%, 84%, 0.633);
}

#calculate-button{
    border-radius: 100%;
    border: none;
    height: 8vh;
    width: 9vb;
    background-color: hsl(259, 100%, 65%);
    cursor: pointer;
    z-index: 1;
}

.errors{
    margin-top: 1%;
    height: 3px;
    gap: 6%;
    display: flex;
    flex-direction: row;
    font-size: small;
}

span{
    min-width: 110px;
}

@media (max-width: 610px) {


    .MainCard{
        min-width: 400px;
        height: 60vh
    }

    .line-with-button {
        flex: 1;
        flex-direction: column; 
        align-items: center;
    }

    .line{
        align-items: center;
        position: relative;
        top: 30%;
        z-index: 0;
    }

    input{
        height: 5vh;
    }

    .labels{
        gap: 14.5%;
    }

    
    
}