@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&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');
            * {
                font-family: 'Poppins', sans-serif;
            }
            
            @media all and (max-width: 480px) {
                body {
                    background-color: #1B1B32;
                }
                .text1 {
                    color: #FECC4C;
                    font-size: 37px;
                }
                .text2 {
                    color: #FECC4C;
                    font-size: 23px;
                }
                p {
                    text-align: center;
                    color: #5CC72A;
                }
                .inpt1,
                .inpt2 {
                    margin-top: 10px;
                    margin: 10px;
                    background-color: antiquewhite;
                    border: solid;
                    border-radius: 10px;
                    padding: 10px;
                    font-weight: bold;
                }
                .inpt1 {
                    width: 120px;
                    height: 30px;
                    float: left;
                }
                .inpt2 {
                    width: 50px;
                    height: 30px;
                }
                .btn3 {
                    margin: 15px;
                    margin-left: 250px;
                    padding: 5px 10px;
                    width: 100px;
                    border: none;
                    border-radius: 30px;
                    background-color: #FECC4C;
                    font-size: 20px;
                    font-weight: bold;
                }
                .btn3:hover {
                    transform: scale(1.1);
                    background-color: #FECC4C;
                }
                .btn3:active {
                    transform: scale(0.9);
                    background-color: #c7a140;
                }
                input[type="radio"] {
                    display: none;
                }
                label {
                    position: relative;
                    color: #FECC4C;
                    font-family: 'Poppins', sans-serif;
                    font-size: 15px;
                    border: 2px solid #FECC4C;
                    border-radius: 5px;
                    padding: 10px 20px;
                    display: flex;
                    align-items: center;
                }
                label:before {
                    content: "";
                    height: 30px;
                    width: 30px;
                    border: 3px solid #FECC4C;
                    border-radius: 50%;
                    margin-right: 20px;
                }
                input[type="radio"]:checked+label {
                    background-color: #FECC4C;
                    color: white;
                }
                input[type="radio"]:checked+label:before {
                    height: 16px;
                    width: 16px;
                    border: 10px solid white;
                    background-color: #FECC4C;
                }
                .btn1,
                .btn2 {
                    margin: 40px;
                }
                        #output{
                        font-size: 20px;
                        font-weight: bold;
                         color: #FECC4C;
                        }
            }