@import url(https://fonts.googleapis.com/css2?family=Comfortaa&family=Poppins&display=swap);.circle{position:absolute;top:0;width:100%;height:100%;background-color:#8c7ae6;-webkit-clip-path:circle(12.7% at 100% 0);clip-path:circle(12.7% at 100% 0)}.circle-two{-webkit-clip-path:circle(2.4% at 0 20%);clip-path:circle(2.4% at 0 20%);border:2px solid red}.circle-two,.circle-two-reloaded{position:absolute;top:0;width:100%;height:100%;background-color:#e84118}.circle-two-reloaded{-webkit-clip-path:circle(6.6% at 100% 70%);clip-path:circle(6.6% at 100% 70%)}.circle-three{background-color:#8c7ae6;-webkit-clip-path:circle(15.1% at 0 0);clip-path:circle(15.1% at 0 0)}.circle-four,.circle-three{position:absolute;top:0;width:100%;height:100%}.circle-four{background-color:#e84118;-webkit-clip-path:circle(15.9% at 100% 51%);clip-path:circle(15.9% at 100% 51%)}.shape{position:absolute;top:0;width:100%;height:100%;background-color:#fbc531;-webkit-clip-path:circle(12.4% at 40% 78%);clip-path:circle(12.4% at 40% 78%)}header{height:12%;width:80%;border-bottom:1px solid grey;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;margin:0 auto;position:relative;background-size:40px 40px;background-image:radial-gradient(circle,#8c7ae6 1px,transparent 0)}header h1{font-size:1.8rem;z-index:100}header h1 span{font-size:1.8rem;color:#fff}header h1:before{content:"";width:10px;height:10px;border-radius:50%;background-color:#8c7ae6;position:absolute;bottom:15%}header:before{content:"Contacts";position:absolute;bottom:-535%;left:-20%;font-size:3.5rem;color:grey;font-weight:700;opacity:.15}@media screen and (max-width:800px){header:before{left:-18%}}header:after{content:"";width:50px;height:50px;border-radius:50%;background-color:#e84118;position:absolute;top:15%;left:41%}@media screen and (max-width:800px){header:after{top:25%;left:38%}}.container .modal{width:100%;height:100%;background-color:rgba(0,0,0,.4);position:absolute;top:0;left:0;z-index:5000}.container .modal .modal-content{width:100%;height:70%;position:absolute;bottom:0;border-radius:40px 40px 0 0;background-color:#fff}.modal-content .content-wrapper{width:80%;height:100%;margin:0 auto}.add-contact{width:100%;height:15%;display:flex;justify-content:space-between;align-items:center;flex-direction:center}.add-contact p{color:#e84118;cursor:pointer}.add-contact div{width:30px;height:30px;border-radius:50%;background-color:#8c7ae6;display:flex;justify-content:center;align-items:center;flex-direction:row;cursor:pointer}.add-contact div .create-icon{color:#fff}.content-wrapper .contact-details{width:100%;height:85%;padding:10px 0;display:flex;justify-content:flex-start;align-items:center;flex-direction:column}.img{width:100px;height:100px;border-radius:50%;background-color:#fbc531;display:flex;justify-content:center;align-items:center;flex-direction:row}.img img{width:80px;height:80px}.contact-details .input-box{width:100%;margin-top:30px}input[type=text]{background:0;border:0;outline:none;width:100%;height:50px;border-bottom:1px solid grey;margin-bottom:20px;font-size:16px}main .main-container{width:80%;height:85%;position:relative}main .main-container .add-wrapper{width:100%;position:absolute;bottom:-5%}.add,main .main-container .add-wrapper{display:flex;justify-content:center;align-items:center;flex-direction:row}.add{width:60px;height:60px;cursor:pointer;background-color:#8c7ae6;border-radius:50%;box-shadow:10px 10px 48px 3px rgba(108,92,231,.5);-webkit-box-shadow:10px 10px 48px 3px rgba(108,92,231,.5);-moz-box-shadow:10px 10px 48px 3px rgba(108,92,231,.5)}.add .add-icon{color:#fff;font-size:1.8rem}.contact-list a{width:80%}a{text-decoration:none}.main-container .contact-list{height:auto;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid grey}.contact-list-box,.main-container .contact-list{width:100%;display:flex;justify-content:space-between;align-items:center;flex-direction:row}.contact-list-box .contact-img{width:50px;height:50px;background-color:#fbc531;border-radius:50%;display:flex;justify-content:center;align-items:center;flex-direction:row}.contact-list-box .contact-img img{width:40px;height:40px}.contact-list-box .contact{width:70%}.contact-list-box .contact h2{color:#000}.contact-list-box .contact p{color:grey;margin-top:5px}.contact-list .update-box{width:14%;display:flex;justify-content:space-between;align-items:center;flex-direction:row}.contact-list .update-box .edit{color:grey;cursor:pointer}.contact-list .update-box .delete{color:#e84118;cursor:pointer}.each-contact-details{width:100%;height:88%;left:0;background-color:#f5f6fa;position:absolute;display:flex;justify-content:center;align-items:center;flex-direction:row}.each-contact-details .details{width:90%;height:90%;position:relative;background-color:#f5f6fa}.details .back-to-contactList{height:10%;width:100%}.details .back-to-contactList a{color:#8c7ae6}.back-to-contactList:before{content:"Contact Details";position:absolute;top:56%;left:-10%;font-size:3.5rem;color:grey;font-weight:700;opacity:.15}.back-to-contactList a:nth-child(2){margin-left:5px}.details .each-contact-info{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.each-contact-info .contact-name-and-number{margin-top:30px;width:100%;display:flex;justify-content:flex-start}.contact-name-and-number div:nth-child(2){margin-left:10px}.contact-name-and-number div h2,.contact-name-and-number div p{margin:10px 0}*{padding:0;margin:0;box-sizing:border-box;font-size:14px}#App{width:100vw;height:100vh;background-color:#000;font-family:"Poppins",sans-serif;display:flex;justify-content:center;align-items:center;flex-direction:row;background-size:40px 40px;background-image:radial-gradient(circle,#8c7ae6 1px,transparent 0)}.container{width:330px;height:630px;background-color:#f5f6fa;position:relative;overflow:hidden;z-index:3000}@media screen and (max-width:800px){.container{width:360px;height:700px}}main{width:100%;height:88%;display:flex;justify-content:center;align-items:center;flex-direction:row}
/*# sourceMappingURL=main.a8114437.chunk.css.map */