-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.css
1 lines (1 loc) · 3.58 KB
/
index.css
1
@import'./fonts.css';:root{--purple: hsl(259, 100%, 65%);--light-red: hsl(0, 100%, 67%);--white: hsl(0, 0%, 100%);--off-white: hsl(0, 0%, 94%);--light-grey: hsl(0, 0%, 86%);--smokey-grey: hsl(0, 1%, 44%);--off-black: hsl(0, 0%, 8%)}*{margin:0;padding:0;box-sizing:border-box}input{font-family:inherit;font-size:inherit}body{min-width:375px;min-height:100vH;width:100%;overflow:hidden;font-family:"Poppins",sans-serif;background-color:var(--off-white);display:flex;justify-content:center;align-items:center;color:var(--off-black)}main{position:relative;padding:56px;background-color:var(--white);max-width:840px;width:840px;border-top-left-radius:25px;border-top-right-radius:25px;border-bottom-left-radius:25px;border-bottom-right-radius:200px}.form{width:100%}.form__content{width:100%;display:flex;gap:32px}.form__label{font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:3px;color:var(--smokey-grey)}.form__input{border:1px solid var(--light-grey);background-color:var(--white);border-radius:7px;width:100%;padding:12px 25px;font-size:30px;font-weight:800}.form__input:focus{outline:1px solid var(--purple)}.form__error-message{display:none;font-size:14px}.form__input-group{position:relative;flex:0 1 auto;display:grid;align-content:start;gap:10px;width:160px}.form__input-group_error .form__label{color:var(--light-red)}.form__input-group_error .form__input{border-color:var(--light-red)}.form__input-group_error .form__error-message{display:block;color:var(--light-red);font-style:italic}.form__btn-wrapper{position:relative;z-index:1;height:98px;width:100%;display:flex;justify-content:space-between;align-items:center}.form__submit-btn{width:98px;height:98px;border-radius:50%;background-image:url("./assets/images/icon-arrow.svg");background-position:center center;background-repeat:no-repeat;background-color:var(--purple);border:none;cursor:pointer}.form__submit-btn:hover,.form__submit-btn:focus{background-color:var(--off-black)}.form__submit-btn::before{z-index:-1;position:absolute;content:"";width:100%;height:1px;top:50%;left:0;background-color:var(--light-grey)}.form__reset-btn{width:50px;height:50px;border-radius:50%;border:2px solid var(--purple);color:var(--purple);background-color:var(--white);cursor:pointer}.form__reset-btn:hover,.form__reset-btn:focus{border:2px solid var(--off-black);color:var(--off-black)}.user-age{font-size:100px;font-style:italic;font-weight:800;line-height:1.15}.user-age__passed{display:flex}.user-age__numbers{width:auto;letter-spacing:.2em;color:var(--purple);font-variant-numeric:tabular-nums;text-wrap:nowrap}.attribution{position:fixed;bottom:10px;font-size:11px;text-align:center}.attribution a{color:#3e52a3}@media screen and (max-width: 768px){body{padding:90px 18px;align-items:start}main{padding:48px 25px;border-bottom-right-radius:80px}.user-age{font-size:12vW}.user-age__numbers{letter-spacing:.1em}.form__content{gap:18px}.form__submit-btn{width:80px;height:80px}.form__input-group{min-width:87px;max-width:160px;width:auto}.form__label{font-size:12px}.form__input{font-size:4vW}.form__btn-wrapper{margin-top:14px;margin-bottom:14px}}@media screen and (max-width: 480px){main{padding:45px 22px;min-width:339px;max-width:calc(100vW - 36px);border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px}.user-age{line-height:1.15;font-size:54px}.user-age__numbers{letter-spacing:2px}.form__btn-wrapper{justify-content:center}.form__submit-btn{width:65px;height:65px;background-size:25px 25px}.form__reset-btn{position:absolute;left:0}.form__input-group{max-width:87px;gap:5px}.form__label{font-size:12px}.form__input{font-size:20px;padding:11px 14px}}