@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);*{box-sizing:border-box;margin:0;padding:0}a{text-decoration:none}ul{list-style:none}body{font-family:Poppins,sans-serif}#age-calculate-app{background-color:#dbdbdb;height:100vh;width:100%}#age-calculate-app .container{align-items:center;display:flex;height:100vh;justify-content:center;width:100%}#app-content{background-color:#fff;border-radius:20px;border-bottom-right-radius:200px;margin:o auto;padding:40px 0 40px 50px;width:60%}header .inputs-box{display:flex;justify-content:space-between;width:60%}header .inputs-box .item{display:flex;flex-direction:column;row-gap:5px}header .inputs-box .item input{border:1px solid #dbdbdb;border-radius:5px;cursor:pointer;font-size:32px;font-weight:700;outline:none;padding:10px 0 10px 20px;width:150px}header .inputs-box .item .error{color:#ff5757;font-size:14px;font-style:italic;font-weight:400}header .inputs-box .item input:placeholder{font-size:32px;font-weight:700}header .inputs-box .item input:focus{border:2px solid #716f6f}header .inputs-box .item label{color:#716f6f;font-size:15px;font-weight:700}main{padding-top:40px}main .middle-line .middle-line-container{padding-bottom:30px;position:relative}main .middle-line .middle-line-container .line{background-color:#dbdbdb;height:2px;width:90%}main .middle-line .middle-line-container svg{background-color:#854dff;border-radius:50%;cursor:pointer;height:84px;padding:10px;position:absolute;right:40px;top:-40px;width:86px}main .results ul li{font-size:80px;font-style:italic;font-weight:800}main .results ul li .result{color:#854dff}header .inputs-box .item .errorActiveLabel{color:#ff5757}header .inputs-box .item .errorActiveInput,header .inputs-box .item .errorActiveInput:focus{border:1px solid #ff5757}@media only screen and (min-width:375px) and (max-width:768px){#app-content{padding:20px 30px 60px 40px;width:95%}header .inputs-box{row-gap:2px;width:100%}header .inputs-box .item input{width:100px}header .inputs-box .item input::placeholder{font-size:22px}main .middle-line .middle-line-container{padding:50px 0}main .middle-line .middle-line-container svg{right:110px;top:0}main .middle-line .middle-line-container .line{width:100%}main .results ul li{font-size:50px;font-style:italic;font-weight:800}}
