@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');/* 400, 500, 700 */:root { /* Text */ /* (sub-heading at the top of the app UI) */ --Pale-Violet: hsl(276, 100%, 81%); /* (chat on the left) */ --Moderate-Violet: hsl(276, 55%, 52%); /* (chat on the right) */ --Desaturated-Dark-Violet: hsl(271, 15%, 43%); /* (placeholder text) */ --Grayish-Blue: hsl(206, 6%, 79%); /* (main heading) */ --Very-Dark-Desaturated-Violet: hsl(271, 36%, 24%); /* (paragraph) */ --Dark-Grayish-Violet: hsl(270, 7%, 64%); /* Background (Linear Gradients) */ --Light-Magenta: hsl(293, 100%, 63%); --Light-Violet: hsl(264, 100%, 61%); /* Secondary */ --White: hsl(0, 0%, 100%); /* (app background) */ --Light-Grayish-Violet: hsl(270, 20%, 96%); /* (submit button background) */ --Very-Dark-Desaturated-Violet: hsl(271, 36%, 24%); /* (radio button outline) */ --Very-Light-Magenta : hsl(289, 100%, 72%);}/* Root Design */* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rubik', sans-serif; max-width: 100%; overflow-x: hidden; overflow-y: hidden;}/* Background */.bgCardLeft { position: absolute; z-index: -1; /* Send Back */ width: 400px; height: 530px; margin-left: -80px; background-image: linear-gradient(180deg, var(--Light-Magenta), var(--Light-Violet)); border-radius: 0 0 20rem 20rem;}.bgCardRight { position: absolute; z-index: -1; width: 400px; height: 500px; margin: 70px 0 0 1000px; background-image: linear-gradient(var(--Light-Magenta), var(--Light-Violet)); opacity: .1; border-radius: 20rem 20rem 0 0;}/* ----------------- Body-Start ----------------- */.bodyContent { z-index: 2; display: flex; flex-direction: row;}/* ------ Mobile ------ */.mobile { width: 15rem; height: 29rem; background-color: var(--White); box-shadow: 0 .5rem 2rem #00000050; border-radius: 1.5rem; overflow: hidden; margin: 3rem 0 2rem 17rem; /* Clock-Wise: Top Righ Bottom Left */}.mobileBg { width: 14rem; height: 28rem; margin: .5rem; background-color: var(--Light-Grayish-Violet); border-radius: 1.3rem; overflow: hidden; overflow-y: auto; /* hide scrollbar in other browser */ -ms-overflow-style: none; scrollbar-width: none;}/* hide scrollbar in chrome */.mobileBg::-webkit-scrollbar { display: none;}/* Mobile - Top action bar */.mobileActionBar { width: 14rem; height: 3.5rem; border-radius: 0 0 .3rem .3rem; background-image: linear-gradient(-90deg, var(--Light-Magenta), var(--Light-Violet)); overflow: hidden;}.whiteNotch { width: 9rem; height: 2rem; background-color: var(--White); border-radius: 1rem; margin-left: 2.5rem; margin-top: -.9rem;}.actionbarContent { display: flex; flex-direction: row; align-items: center; margin: .4rem .5rem;}.arrowBack { width: 1rem; height: .7rem;}.arrowBack:hover { cursor: pointer;}.avatar { width: 2rem; border: 1.5px solid var(--White); border-radius: 100%; margin: 0 .1rem;}.avatar:hover { cursor: pointer;}.userName { font-size: .7rem; font-weight: 400; color: var(--White); margin-left: .3rem; padding-right: 3.5rem;}.userName span { font-size: .5rem; color: var(--Pale-Violet);}.menu { width: 1rem; height: .7rem; margin-left: .5rem;}.menu:hover { cursor: pointer;}/* Mobile - Chats */.chats { display: flex; flex-direction: column; margin: .8rem .5rem; overflow: hidden;}.chatLeft { float: left; font-size: .5rem; padding: .5rem; margin-bottom: .5rem; margin-right: 5rem; border-radius: .5rem .5rem .5rem 0; color: var(--Moderate-Violet); background-color: #ede4f3;}.chatRight { float: right; font-size: .5rem; padding: .5rem; margin-bottom: .5rem; margin-left: 5rem; border-radius: .5rem .5rem 0 .5rem; color: var(--Desaturated-Dark-Violet); background-color: var(--White);}.chatImg { display: flex; flex-direction: row; justify-content: right; margin: .5rem 0;}.chatImg img { width: 2.5rem; margin-left: .5rem; border-radius: .6rem;}.chatImg img:hover { cursor: pointer;}.chatLeftPrice { float: left; display: flex; flex-direction: row; font-size: .5rem; padding: .5rem; margin-bottom: .5rem; margin-right: 3rem; border-radius: .5rem .5rem .5rem 0; color: var(--White); background-image: linear-gradient(45deg, var(--Light-Magenta), var(--Light-Violet)); vertical-align: middle;}.chatLeftPrice span { font-size: .8rem; font-weight: 500; vertical-align: middle;}.first { margin-left: 2rem;}.second { margin-left: 3rem;}.radioBtn { width: .7rem; height: .7rem; border: 1.5px solid var(--Very-Light-Magenta); border-radius: 5rem; background-color: #e942ff99; margin-right: .5rem; vertical-align: middle;}/* Chat - Send */.typeMsg { display: flex; flex-direction: row; width: 100%; height: 2.2rem; background-color: var(--Desaturated-Dark-Violet); border-radius: 5rem; margin-top: .3rem; align-items: center;}.typeMsg:hover { cursor: text;}.typeMsg p { font-size: .7rem; color: var(--Grayish-Blue); margin-left: 2rem;}.sendBtnBg { display: flex; width: 1.7rem; height: 1.7rem; border-radius: 5rem; margin-left: 3.3rem; background-color: var(--Very-Dark-Desaturated-Violet); justify-content: center; align-items: center;}.sendBtnBg img { width: 1rem; height: 1rem;}.sendBtnBg img:hover { cursor: pointer;}/* ------ Right text content ------ */.rightTextContent { position: relative; max-width: 30rem; margin: auto 0 auto 7rem; padding-right: 2rem;}.heading { font-weight: 500; color: var(--Very-Dark-Desaturated-Violet);}.desc { color: var(--Dark-Grayish-Violet); margin-top: 2rem; line-height: 1.5rem;}/* ----------------- Body-End ----------------- *//* Footer attribution */.attribution { z-index: 2; text-align: center; font-size: .8rem; font-weight: 500;}.attribution a { text-decoration: none; color: var(--Light-Magenta);}/* ----------------- Tab-Responsive ----------------- */@media (max-width: 1024px) { * { overflow-y: auto; } .bgCardRight { visibility: hidden; } .bodyContent { flex-direction: column; justify-content: center; align-items: center; } .mobile { margin: 3rem 0; } .rightTextContent { margin: 0; text-align: center; } .attribution { margin-top: 3rem; }}/* ----------------- Mobile-Responsive ----------------- */@media (max-width: 414px) { * { overflow-y: auto; } .bgCardRight { visibility: hidden; } .bodyContent { flex-direction: column; justify-content: center; align-items: center; } .mobile { margin: 3rem 0; } .rightTextContent { margin: 0; text-align: center; } .attribution { margin-top: 3rem; }}