@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap");html,body{margin:0;padding:0}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:inherit;box-sizing:inherit}body{font-family:"Rubik", sans-serif;font-weight:400;font-size:16px;overflow:hidden}@media (max-width: 1000px){body{overflow-y:visible}}h1,h2,h3,h4{margin:0;font-weight:500}h1{font-size:2.5rem;color:#3e2753}p{color:#a39daa}input{font-family:inherit;font-size:inherit;font-weight:inherit;border:none}input:focus{outline:none}.container-main{position:relative;width:100vw;height:100vh;display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center;background:no-repeat top}.top-left-bg{position:fixed;top:0;left:-200px;width:600px;height:800px;background:-webkit-gradient(linear, left top, left bottom, from(#e942ff), to(#8838ff));background:linear-gradient(#e942ff, #8838ff);border-end-end-radius:50%;border-end-start-radius:50%;z-index:-50}@media (max-width: 1000px){.top-left-bg{left:-450px;height:500px}}.bottom-right-bg{position:fixed;bottom:0;right:-350px;width:700px;height:800px;background:#f5f3f7;border-start-start-radius:50%;border-start-end-radius:50%;z-index:-50}@media (max-width: 1000px){.bottom-right-bg{right:-550px;height:500px}}.container-sub{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:7rem}@media (max-width: 1000px){.container-sub{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-block:4rem}}.app{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:350px;height:670px;background-color:#fff;border-radius:30px;-webkit-box-shadow:10px 5px 15px gray;box-shadow:10px 5px 15px gray}.app .notch{position:absolute;top:0;left:25%;width:170px;height:40px;background-color:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;z-index:50}.app .container-app{position:relative;height:95%;width:90%;background-color:#f5f3f7;border-radius:30px}.app .container-app .heading{position:relative;width:100%;height:80px;color:#fff;background:-webkit-gradient(linear, right top, left top, from(#e942ff), to(#8838ff));background:linear-gradient(to left, #e942ff, #8838ff);border-radius:30px 30px 8px 8px}.app .container-app .heading-grid{position:absolute;bottom:0;width:100%;display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:5%, 10%, auto, 5%;grid-template-columns:5%, 10%, auto, 5%;-ms-grid-rows:(1fr)[2];grid-template-rows:repeat(2, 1fr);grid-template-areas:"left-arrow avatar name menu" "left-arrow avatar status menu";margin-bottom:10px}.app .container-app .heading-grid .left-arrow{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:1;grid-area:left-arrow;text-align:center}.app .container-app .heading-grid .left-arrow:hover{cursor:pointer}.app .container-app .heading-grid .avatar{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:2;grid-area:avatar;width:35px;height:35px;background:no-repeat center/contain url("/images/avatar.jpg");border-radius:50%;border:1px solid #fff}.app .container-app .heading-grid .name{-ms-grid-row:1;-ms-grid-column:3;grid-area:name;display:-webkit-box;display:-ms-flexbox;display:flex}.app .container-app .heading-grid .status{-ms-grid-row:2;-ms-grid-column:3;grid-area:status;font-size:0.7rem}.app .container-app .heading-grid .menu{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:4;grid-area:menu;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.app .container-app .heading-grid .menu:hover{cursor:pointer}.app .container-app .heading-grid .menu span{display:block;height:3px;width:3px;background-color:#fff;margin:1px}.app .container-app .messages{font-size:0.8rem;padding-inline:0.8rem}.app .container-app .messages .container-pics{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;gap:0.5rem}.app .container-app .messages .container-pics .pic{width:50px;height:50px;border-radius:10px}.app .container-app .messages .container-pics .pic:first-of-type{background:no-repeat center/contain url("/images/dog-image-1.jpg")}.app .container-app .messages .container-pics .pic:nth-of-type(2n){background:no-repeat center/contain url("/images/dog-image-2.jpg")}.app .container-app .messages .container-pics .pic:last-of-type{background:no-repeat center/contain url("/images/dog-image-3.jpg")}.app .container-app .messages .chat-right{color:#6e5d7e;background-color:#fff;max-width:210px;border-radius:15px 15px 15px 5px;margin-left:auto;padding:0.5rem 1rem}.app .container-app .messages .chat-left{color:#9241c8;background-color:#eee6f4;max-width:210px;padding:0.5rem 1rem;border-radius:15px 15px 15px 5px}.app .container-app .messages .selector{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color:#fff;background:-webkit-gradient(linear, right top, left top, from(#8838ff), to(#e942ff));background:linear-gradient(to left, #8838ff, #e942ff);width:250px;padding:0.8rem 1rem;margin-block:0.5rem;border-radius:15px 15px 15px 5px}.app .container-app .messages .selector input[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:21px;height:21px;border-radius:50%;outline:none;display:inline-block;position:relative;margin:0;cursor:pointer;border:1px solid white;-webkit-transition:background 0.3s, border-color 0.3s, -webkit-box-shadow 0.2s;transition:background 0.3s, border-color 0.3s, -webkit-box-shadow 0.2s;transition:background 0.3s, border-color 0.3s, box-shadow 0.2s;transition:background 0.3s, border-color 0.3s, box-shadow 0.2s, -webkit-box-shadow 0.2s}.app .container-app .messages .selector input[type="radio"]:after{content:"";display:block;left:0;top:0;position:absolute;width:19px;height:19px;border-radius:50%;background:white;opacity:0;-webkit-transition:0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2),ease,opacity 0.3s,0.2s,-webkit-transform 0.6s;transition:0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2),ease,opacity 0.3s,0.2s,-webkit-transform 0.6s;transition:transform 0.6s,0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2),ease,opacity 0.3s,0.2s;transition:transform 0.6s,0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2),ease,opacity 0.3s,0.2s,-webkit-transform 0.6s}.app .container-app .messages .selector input[type="radio"]:checked:after{opacity:1}.app .container-app .messages .selector input[type="radio"]+label{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem}.app .container-app .messages .selector input[type="radio"]+label span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1.2rem;font-weight:500}.app .container-app .footer{position:absolute;bottom:2.5%;width:100%}.app .container-app .footer input[type="text"]{display:block;font-size:0.8rem;color:#a39daa;width:90%;border-radius:30px;padding:0.8rem 1rem;margin-inline:auto}.app .container-app .footer input[type="submit"]{font-weight:700;position:absolute;top:7%;right:7%;color:#fff;background-color:#3e2753;border-radius:50%;padding:0.5rem 1rem}.app .container-app .footer input[type="submit"]:hover{cursor:pointer}.app .container-app .footer span{font-weight:700;position:absolute;top:7%;right:7%;color:#fff;background-color:#3e2753;border-radius:50%;padding:0.5rem 1rem}.text{max-width:450px}@media (max-width: 1000px){.text{text-align:center;max-width:400px}.text p{max-width:310px}}.attribution{display:none;font-size:11px;text-align:center}.attribution a{color:#3e52a3}
/*# sourceMappingURL=style.min.css.map */