@import"https://fonts.googleapis.com/css2?family=Public+Sans&display=swap";.Form{background:rgba(255,255,255,.541);height:400px;width:100%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:25px;color:#000;font-family:"Public Sans",sans-serif}.Form h2{font-size:30px}.Form div{display:flex;flex-direction:column;width:100%}.Form div label{font-size:1.2rem}.Form div input{height:40px;background-color:#00000028;border:none;padding:0 20px;color:#000;font-family:"Public Sans",sans-serif}.Form div input:focus,.Form div input:-webkit-autofill{background-color:none;outline:none}.Form h4{font-size:1rem;cursor:pointer;color:#95c774}.Form button{width:100%;height:40px;background:linear-gradient(to right,#5bc590,#519fb3);color:#f8f1ff;border:none;font-family:"Public Sans",sans-serif;cursor:pointer}.Form .button-google{background:linear-gradient(to right,#540ba7,#162680);color:#f8f1ff}@media screen and (max-width: 1000px){.Form{width:320px}}.Login{width:100%;height:100vh;display:flex}.Login .Login_picture{width:55%;height:100%;position:relative;background:linear-gradient(to bottom,white,#f3eeee)}.Login .Login_picture img{width:200px;animation:orbita 3s infinite}.Login .Login_picture .marte{position:absolute;top:calc(50% - 180px);left:20px;animation-delay:.5s}.Login .Login_picture .saturno{width:250px;position:absolute;top:calc(50% - 50px);right:calc(50% - 80px);animation-delay:.2s}.Login .Login_picture .urano{position:absolute;top:calc(50% + 60px);right:20px;animation-delay:.7s}.Login .Form_container{width:609px;min-width:45%;height:100%;background:linear-gradient(to right,#f9f8fa #fdfdff);display:flex;justify-content:center;align-items:center;padding:0 100px}@keyframes orbita{0%{transform:translate(0)}50%{transform:translateY(-5px)}to{transform:translate(0)}}@media screen and (max-width: 1000px){.Login .Login_picture{display:none}.Login .Form_container{width:100%}}.Channels{color:#f8f1ff;display:flex;font-family:"Public Sans",sans-serif;flex-direction:column}.Channels .Channel{background-color:#fff;align-items:center;cursor:pointer;padding:20px;height:50px;display:flex;margin-bottom:2px;color:#000}.Search{background:linear-gradient(to bottom,#ece9e9,white);width:100%;position:relative;height:60px}.Search .Search_container{display:flex;height:100%;align-items:center;padding:10px 20px;justify-content:space-between}.Search .Search_container .Input{width:0;height:100%;background-color:#ffffff1a;border:none;color:#000;padding:0;transition:1s all ease}.Search .Search_container .Active{padding:20px;width:85%}.Search .Search_container button{width:40px;height:100%;background-color:#ffffff80;border:none;color:#000}.Search .Options{position:absolute;top:60px;left:100%;width:100%;height:calc(100vh - 60px);display:flex;flex-direction:column;list-style:none;font-family:"Public Sans",sans-serif;background:linear-gradient(to bottom,#ece9e9,white);transition:1s all ease}.Search .Options li{background-color:#ffffffa8;height:60px;padding:0 20px;color:#000;display:flex;align-items:center;border-bottom:2px solid rgba(22,22,22,.644)}.Search .None{left:0}.Contact{background:linear-gradient(to bottom,#ece9e9,white);overflow:hidden}.Contact h2{color:#000;font-family:"Public Sans",sans-serif;height:70px;display:flex;align-items:center;padding-left:20px;border-bottom:1px solid rgba(255,255,255,.376)}@media screen and (max-width: 700px){.Contact{grid-template-columns:1/2;position:absolute;width:0;height:100vh;transition:1s all ease}.Contact_active{width:60%}}.AddChannel{background:linear-gradient(to bottom,#ece9e9,white);display:flex;align-items:center;justify-content:space-between;padding:10px 20px}.AddChannel .AddChannel_icon-add{margin-right:30px;width:20px;height:20px;color:#00000083}.AddChannel .AddChannel_icon-add:hover{color:#000;cursor:pointer}.AddChannel input{width:100%;padding:15px 0;background-color:transparent;border:none;color:#000;font-family:"Public Sans",sans-serif;font-size:16px}.AddChannel input::placeholder{color:#000}.AddChannel input:focus{outline:none}.Input{padding:20px;background-color:#e9eaeb;display:flex;align-items:center;grid-row:3/4}.Input input{width:100%;font-family:"Public Sans",sans-serif;border:none;font-weight:500;height:100%;padding:0 20px;background-color:#fff}.Input input::placeholder{color:#000}.Avatar img{width:40px;height:100%;margin-right:10px}.Message{padding:10px;max-width:60%;margin-top:10px;background:linear-gradient(to right,#540ba7,#162680);border-radius:0 10px 10px;word-wrap:break-word;display:flex;align-items:center}.Message p{font-family:"Public Sans",sans-serif;font-weight:500;color:#f8f1ff}.Message_own{align-self:flex-end;border-radius:10px 0 10px 10px;background:linear-gradient(to right,#5bc590,#519fb3)}.Chat{background:linear-gradient(to bottom,#ece9e9,white);width:100%;margin:0 auto;color:#000;display:grid;grid-auto-rows:60px calc(100vh - 140px) 80px;grid-column:2/3}.Chat .Chat_name{display:flex;padding:0 20px;align-items:center;border-bottom:3px solid rgba(0,0,0,.466);justify-content:space-between}.Chat .Chat_name h2{font-family:"Public Sans",sans-serif}.Chat .Chat_name button{border:none;display:none}.Chat .Chat_name button #Chat_name-icon{width:20px;height:20px;cursor:pointer}.Chat .Chat_container{padding:0 25px;overflow-y:visible;overflow-x:hidden;display:flex;flex-direction:column;grid-row:2/3}@media screen and (max-width: 700px){.Chat{grid-column:1/-1}.Chat .Chat_name button{display:block}}.Chats{display:grid;grid-template-columns:33% 1fr;height:100vh;max-width:1366px;margin:0 auto}@media screen and (max-width: 700px){.Chats{grid-template-columns:60% 1fr}}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(to top,#f1f1f1,#ebebeb)}