:root{--clr-cta-blue: hsl(218, 65%, 44%);--clr-cta-blue-hover: rgb(52, 108, 205);--clr-delete: hsl(0, 65%, 44%)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:sans-serif}.header{border-bottom:1px solid #ccc;padding:.8rem 1rem;box-shadow:0 10px 15px -3px #0000001a}.logo__text{color:#323232}.blue-text{color:var(--clr-cta-blue)}.main-nav{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.list-container{width:100%}.nav-list{display:flex;align-items:center;justify-content:space-around;list-style:none}.button{cursor:pointer;font-weight:700;transition:all .2s ease;border:2px solid transparent;border-top:0;border-left:0;border-right:0;border-radius:.3rem;padding:.6rem;font-size:.9rem;width:100%}.nav-button{background-color:transparent;border-radius:0;width:100%}.nav-button:hover{color:var(--clr-cta-blue)}.cta-button{background-color:var(--clr-cta-blue);color:#fff;width:100px}.cta-button:hover{background-color:var(--clr-cta-blue-hover)}.main{padding:.8rem 1rem}.edit-section{margin:1rem 0}.form-actions{display:flex;justify-content:space-between;align-items:center}.toggle-button{background-color:#b8ccff;border:1px solid hsl(210,77%,95%);border-radius:50%;width:30px;height:30px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.edit-section__header{display:grid;gap:1rem}.edit-section__heading{display:flex;align-items:center;gap:1.5rem}.edit-section__step{position:relative;font-size:1.4rem;font-weight:700;color:#fff;background-color:var(--clr-cta-blue);display:inline-flex;justify-content:center;align-items:center;border-radius:50%;width:40px;height:40px}.edit-section__step:after{content:"";width:20px;height:3px;background-color:var(--clr-cta-blue);position:absolute;left:35px}.edit-section__info{display:flex;flex-direction:column;gap:.5rem;padding:0 .8rem;text-align:justify}.edit-section__info button{margin-top:.5rem;font-size:1rem;align-self:flex-end}.edit-section__form-entry{display:flex;flex-direction:column;gap:1rem;background-color:#e8f2fc;border:1px solid hsl(223,100%,86%);border-radius:.3rem;padding:1rem 1.1rem;margin-top:1rem;margin-left:.8rem;margin-right:.8rem}.flex-row{display:flex;gap:1rem}.flex-row .input-container{width:100%}.input-container{display:flex;flex-direction:column;gap:.5rem}.input-container label{font-weight:700}.input-container input,.input-container textarea{border:1px solid hsl(223,100%,86%);background-color:#dbe4ff;padding:.5rem;border-radius:.3rem}.image-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.image-container label{display:none}.image-container input{text-align:center}.image-placeholder{display:inline-block;width:173px;height:173px;border:2px dashed hsl(223,96%,62%);background-color:#b8ccff;border-radius:50%}.profile-row{align-items:flex-start}.names-flex{display:flex;flex-direction:column;gap:1rem;width:100%}.names-flex input{height:41px}input::file-selector-button{font-weight:700;color:#fff;padding:.5em;border:none;border-radius:3px;background-color:var(--clr-cta-blue);cursor:pointer;transition:all .2s}input::file-selector-button:hover{background-color:var(--clr-cta-blue-hover)}.profile-picture{max-width:173px;max-height:173px;border-radius:50%}.action-button{width:22%}.form-actions-buttons{display:flex;flex-direction:row-reverse;gap:2rem}.delete-button{background-color:var(--clr-delete);border:none;color:#fff;font-weight:700;padding:.25rem 1rem;border-radius:.3rem;font-size:.9rem;cursor:pointer;transition:all .2s}.delete-button:hover{background-color:#c93b3b}.preview-button{width:200px;text-align:center;text-decoration:none}.preview-download{display:flex;flex-direction:column;align-items:center}.preview-section{height:100%;display:flex;flex-direction:column;gap:3rem;padding:2rem 0}.input-select{border:1px solid hsl(223,100%,86%);background-color:#dbe4ff;padding:.5rem;border-radius:.3rem;margin-left:.8rem;margin-top:1rem;width:100%;text-transform:capitalize;font-weight:700}.input-select option{text-transform:capitalize}.design-page__flex{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}.design-mockup{margin-top:4rem;width:450px;height:600px;box-shadow:0 5px 15px -3px #0003}.colors-form{display:grid;grid-template-columns:repeat(2,1fr)}.mockup{position:relative;height:100%}.mockup-sidebar{width:30%;height:100%;z-index:-1;background-color:#323232;position:absolute}.mockup-content{display:grid;grid-template-columns:repeat(2,1fr);padding:2rem}.mockup-header{display:flex;justify-content:space-between}.fake-img{width:70px;height:70px;border-radius:50%;background-color:#ccc}@media screen and (min-width: 576px){.header{padding:.8rem 2rem}.main-nav{flex-direction:row;justify-content:space-between}.list-container{width:70%}.button{font-size:1.1rem}.nav-list{justify-content:flex-end;gap:2rem}}@media screen and (min-width: 1200px){.header,.main{padding:.8rem 15rem}}@media screen and (max-width: 576px){.viewer{display:none}.flex-row{flex-direction:column}.action-button{width:60%}}.attribution{text-align:center;margin-bottom:2rem}.attribution a{font-weight:700;text-decoration:none}