@import "https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap";*{font-optical-sizing:auto;font-variation-settings:"GRAD" 0;font-family:Google Sans,sans-serif;font-style:normal}body{height:100vh;margin:0 10px;display:flex}main{width:350px;height:420px;margin:auto;padding:15px}main,.unit_converter_form__convert_button,.result_container__reset_button{box-shadow:0 .5rem 1rem #00000026}.header__title{margin:0}.conversion_options{justify-content:left;gap:10px;padding:0;display:flex}.option{min-width:60px;list-style:none}.option__link{color:#000;text-decoration:none}.option__link--active{text-underline-offset:5px;color:#5768e8;font-weight:800;text-decoration:underline;text-decoration-thickness:2px}.container{margin-top:20px;padding:2px}.unit_converter_form{flex-direction:column;gap:20px;display:flex}.user_fields{border:none;padding:0}.user_field{flex-direction:column;gap:10px;width:100%;margin-top:10px;display:flex}.user_field__select,.user_field__input{padding:8px}.user_field__error{color:red;font-size:14px}select{appearance:none}.user_field__select{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23767676'%3e%3cpath%20d='M480-344%20240-584l56-56%20184%20184%20184-184%2056%2056-240%20240Z'/%3e%3c/svg%3e");background-position:calc(100% - 8px);background-repeat:no-repeat;background-size:24px;font-size:16px}.unit_converter_form__convert_button{background-color:#007bff}.unit_converter_form__convert_button,.result_container__reset_button{color:#fff;cursor:pointer;border:none;border-radius:3px;outline:0;width:100%;max-width:130px;padding:15px 30px;font-weight:700;transition:background .6s;position:relative;overflow:hidden}.unit_converter_form__convert_button:hover{background-color:#248dff}.unit_converter_form__convert_button:before,.result_container__reset_button:before{content:"";opacity:0;background-color:#fff;border-radius:50%;padding:50%;transition:transform .6s,opacity .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(1)}.unit_converter_form__convert_button:active:before,.result_container__reset_button:active:before{opacity:.7;transition:all;transform:translate(-50%,-50%)scale(0)}.result_container__reset_button{background-color:#ff0500;margin-left:5px}.result_container__reset_button:hover{background-color:#ff3733}.result_container__result{margin-top:0;font-size:30px}