.header{position:relative;border:1px solid transparent}.header__home-button{position:absolute;left:0;top:50%;transform:translateY(-50%);text-decoration:none;color:#2c3e50}.header__home-button:hover{color:#696}@media screen and (max-width:768px){.header__home-button{top:25%}}@media screen and (max-width:768px){.header{font-size:.9em}.header h1{margin:2em 0}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(102,153,102,.5);display:grid;place-items:center}.overlay .modal{background-color:#2c3e50;color:#fff;padding:2rem;border-radius:10px}.overlay .modal .message{margin-bottom:2rem;max-width:400px;word-wrap:break-word}.overlay .modal__buttons{display:flex;justify-content:space-around}@media screen and (max-width:768px){.overlay .modal{max-width:450px}}@media screen and (max-width:480px){.overlay .modal{max-width:300px}}@media screen and (max-width:320px){.overlay .modal{max-width:280px}}*{margin:0;box-sizing:border-box}h1,h2,h3,h4{margin:1em}.container{margin:0 auto;width:800px}.button{cursor:pointer;border:none;padding:1em 2em;text-decoration:none;border-radius:10px}.button-icon{line-height:0;border:2px solid #fff;padding:0;background-color:transparent;border-radius:99px}.button-icon:focus{outline:none;box-shadow:0 0 2px 2px #2c3e50}.button-icon__img{width:25px}.editing-error-message{font-weight:700;position:absolute;top:5px;left:50%;transform:translateX(-50%);color:#da3b3b}@media screen and (max-width:1024px){.container{width:700px}}@media screen and (max-width:768px){.container{width:min(90%,600px)}}@media screen and (max-width:480px){.container{width:min(90%,400px)}}@media screen and (max-width:320px){.container{width:min(90%,300px)}}.fade-enter-active,.fade-leave-active{transition:opacity .25s,transform .25s}.fade-enter,.fade-leave-to{transform:translateY(-15px);opacity:0}.slide-enter-active,.slide-leave-active{transform:translateX(0);transition:opacity .25s,transform .25s}.slide-enter,.slide-leave-to{opacity:0}.slide-enter{transform:translateX(20px)}.slide-leave-to{transform:scale(.9)}#app{font-family:Avenir,Helvetica,Arial,sans-serif;text-align:center;color:#2c3e50}.contact-preview{border-radius:10px;box-shadow:5px 5px 10px 5px rgba(0,0,0,.1);border:1px solid transparent;position:relative;min-width:250px;margin:0 auto;margin-bottom:2rem;background-color:#edf5ed;transition:all .2s ease-in-out}.contact-preview__wrapper{display:flex;justify-content:space-between;align-items:center;height:100%}.contact-preview__avatar{display:grid;place-items:center;width:50px;height:50px;border-radius:99px;margin-right:1rem;overflow:hidden;flex-shrink:0}.contact-preview__photo{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top}.contact-preview:nth-child(odd) .contact-preview__avatar{background-color:#2c3e50}.contact-preview:nth-child(2n) .contact-preview__avatar{background-color:#696}.contact-preview__name{vertical-align:middle;text-align:right;word-wrap:break-word;flex-shrink:0;width:125px}.contact-preview__initials{color:#fff}.contact-preview a{display:block;padding:1rem 2rem;width:100%;height:100%;font-weight:700;color:#2c3e50;text-decoration:none}.contact-preview a:focus{outline:none}.contact-preview:focus-within,.contact-preview:hover{transform:translateY(-2px);box-shadow:7px 7px 10px 7px rgba(0,0,0,.15)}.contact-preview:focus-within{background-color:#accec1}.contact-preview .touch-screen-fix,.contact-preview:focus-within .contact-preview__delete-button,.contact-preview:hover .contact-preview__delete-button{transform:scale(1)}.contact-preview__delete-button{place-items:center;position:absolute;right:-10px;top:-10px;width:25px;height:25px;background-color:#da3b3b;color:#fff;border:none;border-radius:99px;cursor:pointer;transition:all .2s ease-in-out;transform:scale(0)}.contact-preview__delete-button:focus{outline:none;box-shadow:0 0 2px 2px #da3b3b}.contact-preview__delete-button:focus,.contact-preview__delete-button:hover{background-color:#accec1;color:#da3b3b}.contact-list{display:flex;justify-content:center;flex-wrap:wrap}.contact-list__no-contacts-message{margin:0 auto;font-size:2rem}.contact-list__new-contact-button{display:block;max-width:300px;color:#fff;background-color:#2c3e50;margin:2em auto}.contact-list__new-contact-button:hover{background-color:#696}.contact-field{position:relative;padding:1rem;border-radius:10px;-moz-text-align-last:left;text-align-last:left}.contact-field__name{font-size:.95rem}.contact-field__value{font-size:1.5rem}.contact-field__edit-input{font-size:calc(1.5rem - 6px);width:calc(100% - 25px - 1rem)}.contact-field:nth-of-type(2n){background-color:#edf5ed}.contact-field__buttons{position:absolute;right:1rem;top:50%;display:flex;justify-content:space-around;flex-direction:column;height:100%;transform:translateY(-50%)}.main-input{border-radius:10px;box-shadow:5px 5px 10px 5px rgba(0,0,0,.1);border:1px solid transparent;display:inline-block;width:calc(100% - 3rem);margin-top:.15em;margin-bottom:1.5em;padding:.3em .125em;font-size:1.15rem;border-radius:.25em;border:none}.main-inputs{width:100%}.main-inputs input.--input-error{box-shadow:0 0 0 4px #da3b3b}.main-inputs__lable-text{-moz-text-align-last:left;text-align-last:left}.main-inputs__input{width:100%}.add-custom-field__wrapper{position:relative}.add-custom-field__wrapper .add-custom-field__error-message{top:0;transform:translate(-50%,-50%)}.add-custom-field__custom-field-controls{display:flex;justify-content:space-between}.add-custom-field__button{display:block;margin-bottom:1rem;background-color:transparent;color:#696;border:none;font-size:1rem}.add-custom-field__button:hover{color:#2c3e50}.contact-card{border-radius:10px;box-shadow:5px 5px 10px 5px rgba(0,0,0,.1);border:1px solid transparent;position:relative;padding:2rem;padding-top:3rem;max-width:550px;margin:0 auto;margin-bottom:3rem;word-wrap:break-word}.contact-card__name{margin:1rem 0;font-size:3rem;width:100%}@media screen and (max-width:480px){.contact-card__name{font-size:2rem}}.contact-card__phone-number{display:block;color:#2c3e50;text-decoration:none;font-size:1.5rem;margin:1rem 0}@media screen and (max-width:480px){.contact-card__phone-number{font-size:1.25rem}}.contact-card__photo{max-height:200px;width:auto;border-radius:10px}@media screen and (max-width:480px){.contact-card__photo{max-width:100%;height:auto}}.contact-card__button{margin:1rem;font-weight:700;background-color:#696;color:#fff}.contact-card__undo-button{left:2rem}.contact-card__redo-button{right:2rem}.contact-card__redo-button,.contact-card__undo-button{position:absolute;top:2rem}.contact-card__redo-button .button-icon__img,.contact-card__undo-button .button-icon__img{width:35px}@media screen and (max-width:480px){.contact-card__undo-button{left:.5rem}.contact-card__redo-button{right:.5rem}.contact-card__redo-button,.contact-card__undo-button{top:.5rem}}.contact-card .main-input{width:100%}.contact-card .main-input.custom-field-input{width:calc(100% - 3rem)}.new-contact-form{border-radius:10px;box-shadow:5px 5px 10px 5px rgba(0,0,0,.1);border:1px solid transparent;position:relative;width:600px;margin:0 auto;padding:2rem;font-weight:700;color:#2c3e50;background-color:#edf5ed}.new-contact-form input:last-child{width:100%}.new-contact-form__remove-field-button{width:2rem;height:2rem;padding:5px;margin-left:1rem;border-radius:99px;background-color:red;border:none;color:#fff}.new-contact-form__create-button{border-radius:10px;box-shadow:5px 5px 10px 5px rgba(0,0,0,.1);border:1px solid transparent;display:block;margin:0 auto;font-size:1rem;color:#2c3e50;background-color:#fff}@media screen and (max-width:768px){.new-contact-form{width:90%}}.lable-text{text-align:left}