*{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:400;margin:0}body{margin:0;min-height:100dvh;display:grid;place-items:center;background-color:#fdeb51;font-family:Roboto,system-ui}@media (width >= 768px){body{padding:25px;background-color:#2f2f2f}}.main-button,.close-btn{background-color:transparent;border:none;padding:0;color:#0009;font-size:18px;transition:color .3s ease-out;font-family:inherit;font-weight:400}@media (hover: hover){.main-button,.close-btn{cursor:pointer}.main-button:hover,.close-btn:hover{color:#000}}.close-btn{display:flex;align-items:center;justify-content:center;padding:5px}.registration{width:100%;margin-inline:auto;display:flex;flex-direction:column;row-gap:40px;background-color:#fdeb51}@media (width >= 768px){.registration{max-width:596px;box-shadow:0 6px 12px #0003}}.registration__header{display:flex;align-items:center;justify-content:space-between;padding:40px 22px 25px}@media (width >= 768px){.registration__header{padding-top:60px;padding-inline:62px}}.registration__title{font-size:22px}.registration__footer{display:flex;align-items:center;justify-content:flex-end;column-gap:45px;padding-inline:22px;padding-bottom:35px}@media (width >= 768px){.registration__footer{padding-inline:62px}}.form{position:relative;width:100%;min-height:540px;display:flex;flex-direction:column;row-gap:30px;padding:75px 22px 60px;background-color:#fff;box-shadow:0 10px 16px #0006;transition:transform .3s ease-out}@media (width >= 768px){.form{transform:translate(62px);max-width:596px;padding-inline:53px}}.form__avatar{position:absolute;top:-40px;width:80px;aspect-ratio:1;border-radius:50%}.form__avatar img{display:block;width:100%;height:100%;border-radius:inherit}.form__label{display:flex;flex-direction:column;row-gap:10px}.form__title{font-weight:500;font-size:14px;color:#909f9f;text-transform:uppercase}.form__input,.form__textarea{outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:0;font-size:18px;border-bottom:1px solid #cbcbcb;padding:0 50px 10px 0}.form__input::placeholder,.form__textarea::placeholder{color:#757575}.form__block-name{display:flex;flex-direction:column;row-gap:30px}@media (width >= 768px){.form__block-name{flex-direction:row;align-items:center}}.form__block-name label{flex:1 1 0}.form__textarea{padding-bottom:50px;padding-right:0;resize:vertical;font-family:inherit}@media (width >= 768px){.form__textarea{padding-bottom:80px}}