@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;900&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{background:radial-gradient(circle at top,#edf5f5,#c6e9f7);font-family:poppins;margin:0;overflow-x:hidden}.App{flex-wrap:wrap;height:100vh;width:100vw}.App,header{display:flex;justify-content:center}header{align-items:center;background:linear-gradient(90deg,#a1dbf1,#00b6bc);box-shadow:0 1px 10px #00b6bc;color:#fff;height:13vh;text-shadow:0 0 2px #000;width:100%}header>h1{font-size:2.5rem;margin-block:0;padding-block:0}main{align-items:center;display:flex;height:86vh;justify-content:center;width:90vw}.left-container,.right-container{display:flex;height:85vh;justify-content:center;margin:5px;width:50%}.right-container{align-items:center;overflow-x:auto}input{caret-color:red}.containerr{background:#e4f4f3;border-radius:20px;box-shadow:14px 14px 20px #cbced1,-14px -14px 20px #fff;box-sizing:border-box;height:450px;padding:40px;position:relative;top:2rem;transition:all .5s ease-in-out;width:400px}.containerr:hover{border-bottom:.1px solid #fff;border-top:.1px solid #fff;box-shadow:14px 14px 20px #a1a8ae,-14px -14px 20px #c4c4c4}.brand-logo{align-items:center;border-radius:50%;box-shadow:7px 7px 10px #cbced1,-7px -7px 10px #fff;box-sizing:border-box;display:flex;height:100px;justify-content:center;margin:auto;width:100px}.brand-logo>i{color:#00b6bc;font-size:3.5rem}.inputs{margin-top:30px;text-align:left}button,input,label{border:none;box-sizing:border-box;display:block;outline:none;padding:0;width:100%}label{margin-bottom:4px}label:nth-of-type(2){margin-top:12px}input::-webkit-input-placeholder{color:gray}input::placeholder{color:gray}input{background:#ecf0f3;border-radius:50px;box-shadow:inset 6px 6px 6px #cbced1,inset -6px -6px 6px #fff;font-size:14px;height:50px;padding:10px 10px 10px 20px}.addContact-button{align-items:center;background:#00b6bc;border-radius:20px;box-shadow:6px 6px 6px #cbced1,-6px -6px 6px #fff;color:#fff;cursor:pointer;display:flex;font-weight:900;height:40px;justify-content:center;margin-top:3rem;transition:.5s}.addContact-button:hover{background:#36d5da;box-shadow:none;box-shadow:0 0 5px #000;color:#000}.addContact-button>i{margin-right:.5rem}.contactList-container{margin-block:.5rem}.contactList-container,.empty-list-container{align-items:center;display:flex;justify-content:center}.empty-list-container{background:#e4f4f3;border-radius:20px;box-shadow:14px 14px 20px #cbced1,-14px -14px 20px #fff;box-sizing:border-box;height:150px;padding:40px;position:relative;text-align:center;top:2rem;transition:all .5s ease-in-out;width:380px}.empty-list-container>h2{font-size:1.8rem}.empty-list-container:hover{border-bottom:.1px solid #fff;border-top:.1px solid #fff;box-shadow:14px 14px 20px #a1a8ae,-14px -14px 20px #c4c4c4}.contact-container{align-items:center;background:linear-gradient(270deg,#00b6bc,#a1dbf1);border-radius:20px;box-shadow:inset 0 0 2px #fff;box-sizing:border-box;cursor:pointer;display:flex;height:100px;justify-content:center;padding:40px;position:relative;text-align:center;top:2rem;transition:all .2s ease-in-out;width:420px}.contact-container:hover{border-bottom:1px solid #fff;border-top:1px solid #fff;box-shadow:0 0 5px #000}.avatar{align-items:center;background:#fff;border-radius:30px;box-shadow:0 0 5px #fff;display:flex;left:1rem;padding:.5rem;position:absolute}.avatar>i{font-size:2.5rem;text-shadow:0 0 5px #a1dbf1}.trash{align-items:center;background:#fff;border-radius:30px;box-shadow:0 0 5px #fff;display:flex;padding:.5rem;position:absolute;right:1rem}.trash:hover{background:#fc5959;border:1px solid #fff;box-shadow:0 0 10px red;color:#fff}.trash>i{font-size:2rem}.name{font-family:Nunito,sans-serif;font-size:1.5rem;margin-bottom:0}.email,.name{font-weight:700}.email{font-family:Inconsolata,monospace;font-size:1.2rem;margin-top:0}@media only screen and (max-width:980px){.contact-container{width:350px}.empty-list-container{width:300px}}@media only screen and (max-width:850px){main{flex-wrap:wrap}.left-container,.right-container{align-items:center;height:85vh;margin-block:1rem;width:100%}.right-container{align-items:flex-start}.contact-container,.empty-list-container{width:400px}}@media only screen and (max-width:470px){.contact-container{width:300px}.email{font-size:1rem}.containerr{width:330px}.empty-list-container{width:250px}.empty-list-container>h2{font-size:1.9rem}}
/*# sourceMappingURL=main.12696dc1.css.map*/