@font-face{font-family:PoppinsBold;src:url(src/asset/fonts/Poppins-Bold.ttf);font-style:normal;font-display:swap}@font-face{font-family:PoppinsRegular;src:url(src/asset/fonts/Poppins-Regular.ttf) format("truetype");font-style:normal;font-display:swap}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}:root{--primary: #3b82f6;--secondary: #374151;--border: #d1d5db;--border-focus: #64748b;--danger: #ef4444}*{padding:0;margin:0;box-sizing:border-box;font-family:PoppinsRegular,sans-serif}html{scroll-behavior:smooth}body{background-color:#f2e3e3}.main{display:flex;justify-content:center;align-items:center;height:100vh}.main__inner{background-color:#fff}@media screen and (min-width:768px){.main__inner{width:45rem;height:40rem;padding:50px;border-radius:10px 10px 300px}}@media screen and (max-width:767px){.main__inner{width:24rem;height:30rem;padding:20px;border-radius:10px 10px 100px}}.main__inner .birthday{display:flex;border-bottom:1px solid var(--secondary);position:relative}@media screen and (min-width:768px){.main__inner .birthday{gap:50px;padding:0 0 50px}}@media screen and (max-width:767px){.main__inner .birthday{gap:30px;padding:0 0 70px}}.main__inner .birthday__style{position:relative}.main__inner .birthday__style__label{display:block;margin:0 0 5px;color:var(--secondary);text-transform:uppercase}@media screen and (min-width:768px){.main__inner .birthday__style__label{font-size:18px}}@media screen and (max-width:767px){.main__inner .birthday__style__label{font-size:14px}}.main__inner .birthday__style__input{padding:10px 20px;border:1px solid var(--border);border-radius:5px}@media screen and (min-width:768px){.main__inner .birthday__style__input{width:100px;font-size:23px}}@media screen and (max-width:767px){.main__inner .birthday__style__input{width:95px;font-size:18px}}.main__inner .birthday__style__input:focus{outline:1px solid var(--border-focus)}.main__inner .birthday__style__error{display:inline-block;width:180px;position:absolute;top:80px;left:0;color:var(--danger);font-size:14px}.main__inner .birthday .arrow{background-color:var(--primary);display:flex;justify-content:center;align-items:center;border:1px solid var(--primary);border-radius:50%;position:absolute;transition:.5s}@media screen and (min-width:768px){.main__inner .birthday .arrow{width:70px;height:70px;right:0;bottom:-35px;animation:rollingLeft 2s ease 0s 1 normal forwards}}@media screen and (max-width:767px){.main__inner .birthday .arrow{width:60px;height:60px;right:150px;bottom:-30px;animation:rollingLeft 1s ease 0s 1 normal forwards}}@keyframes rollingLeft{0%{opacity:0;transform:translate(-550px) rotate(-200deg)}to{opacity:1;transform:translate(0) rotate(0)}}@media screen and (min-width:768px){.main__inner .birthday .arrow__img{width:35px}}@media screen and (max-width:767px){.main__inner .birthday .arrow__img{width:25px}}.main__inner .birthday .arrow:hover{background-color:var(--secondary);border-color:var(--secondary)}.main__inner .results{margin:50px 0 0}.main__inner .results__result{font-weight:700;font-style:italic}@media screen and (min-width:768px){.main__inner .results__result{font-size:97px}}@media screen and (max-width:767px){.main__inner .results__result{font-size:60px}}.main__inner .results__result__num{color:var(--primary)}