/*
# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### Primary

#### Text

- Pale Violet (sub-heading at the top of the app UI): hsl(276, 100%, 81%)
- Moderate Violet (chat on the left): hsl(276, 55%, 52%)
- Desaturated Dark Violet (chat on the right): hsl(271, 15%, 43%)
- Grayish Blue (placeholder text): hsl(206, 6%, 79%)
- Very Dark Desaturated Violet (main heading): hsl(271, 36%, 24%)
- Dark Grayish Violet (paragraph): hsl(270, 7%, 64%)

#### Gradients

These two colors are the vibrant background colors you see throughout the design and are applied as a linear gradient:

- Light Magenta: hsl(293, 100%, 63%)
- Light Violet: hsl(264, 100%, 61%)

### Secondary

- White: hsl(0, 0%, 100%)
- Light Grayish Violet (app background): hsl(270, 20%, 96%)
- Very Dark Desaturated Violet (submit button background): hsl(271, 36%, 24%)
- Very Light Magenta (radio button outline): hsl(289, 100%, 72%)

## Typography

### Body Copy

- Font size: 16px

### Font

- Family: [Rubik](https://fonts.google.com/specimen/Rubik)
- Weights: 400, 500, 700

*/
*{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
body{
 overflow-x: hidden;
 font-family: 'Rubik', sans-serif;
 background-color: #fafafa;
}
p{
 margin: 0;
}
.background{
 position: absolute;
 z-index: -1;
}
.background-violet{
 background-image: linear-gradient(hsl(293, 100%, 63%) 1%,hsl(264, 100%, 61%));
 height: 100vh;
 width: 570px;
 border-bottom-left-radius: 50%;
 border-bottom-right-radius: 50%;
 left: -120px;
 top: -70px;
}
.background-gray{
 background-color: hsl(270, 20%, 96%);
 width: 580px;
 height: 85vh;
 right: -280px;
 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
 bottom: 0;
}
.content{
 width: 59%;
 position: relative;
 top: 80px;
 left: 27%;
 display: flex;
 justify-content: space-between;
}
.chat{
 border: hsl(0, 0%, 100%) solid 7px;
 width: 290px;
 height: 560px;
 box-shadow: 5px 0px 20px lightgray;
 background-color: hsl(270, 20%, 96%);
 border-radius: 27px;
 position: relative;
}
.top{
 background-image:  linear-gradient(to right, hsl(264, 100%, 61%),hsl(293, 100%, 63%));
 height: 70px;
 border-top-left-radius: 20px;
  border-top-right-radius: 20px;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
}
.offset{
 width: 145px;
 height: 30px;
 background-color:  hsl(0, 0%, 100%);
 position: absolute;
 left: 74px;
 top: -7px;
 border-radius: 14px;
}
.top-content{
 position: relative;
 top: 29px;
 width: 89%;
 margin: 0 auto;
  color: white;
}
.profile img{
float: left;
 border: lightgray solid 2px;
 margin-right: 9px;
}
.profile p{
 font-size: 10px;
 color:  lightgray ;
}
.profile h6{
 margin: 0;
 font-size: 13px;
 color:  rgb(240, 232, 232) ;
}
.icon-angle{
 margin-right: 10px;
 float: left;
}
.icon-ellipsis{
 margin-top: 5px;
}
.top-content{
display: flex;
justify-content: space-between;
}
.all{
 flex-basis: 70%;
}
.center{
 width: 95%;
 margin: 0 auto;
 font-size: 10px;
 margin-top: 7px;
}
.group-1 p, .group-3 p:first-child{
 width: 160px;
 background-color:hsla(206, 7%, 79%, 0.336);
 margin-bottom: 7px;
 padding: 5px 13px 8px 8px;
 border-radius: 10px;
 color:hsl(276, 55%, 52%);
}
.group-2 {
 width: 170px;
 margin-left: 100px;
}
.group-2 img{
 height: 42px;
 border-radius: 10px;
 margin-right: 8px;
}
.group-2 p{
 background-color: #fff;
  margin-top: 6px;
   border-radius: 10px;
   padding: 5px 13px 8px 8px;
   width: 150px;
   margin-left: 4px;
}
.group-2 > div{
 margin-left: 7px;
}
.group-2 p:last-of-type{
 width: 100px;
 margin-left: 52px;
}
.group-3{
 margin-top: 10px;
}
.circle{
 border: lightgray solid 0.5px;
 padding: 0px 0px 0px 15px;
 border-radius: 50%;
 margin-right: 10px;
 margin-left: 5px;
}
.group-3 p:first-of-type ~ p{
 background-image: linear-gradient(to right, hsl(293, 100%, 63%),hsl(264, 100%, 61%)); 
 color: lightgray;
 padding:10px 5px 10px 5px;
 width: 190px;
 margin-bottom: 6px;
 border-radius: 12px;
border-bottom-left-radius: 5px;
font-size: 11px;
}
.money{
 margin-left: 30px;
 color: #fff;
 font-size: 15px;
 font-weight: bolder;
}
.t{
 margin-left: 49px;
}
.typer{
 background-color: #fff;
 display: flex;
 justify-content: space-between;
 border-radius: 20px;
 align-items: center;
 padding: 6px 0px;
 padding-right: 5px;
 margin-top: 9px;
}
.typer .icon{
 color: white;
 background-color: hsl(271, 36%, 24%);
 padding: 3px 7px 29px 12px;
 border-radius: 50%;
 height: 34px;
}
.typer p{
 margin-left: 25px;
 font-size: 11px;
 color: lightgray;
}
section >div:last-of-type{
 flex-basis: 50%;
 margin-top: 180px;
}
section >div:last-of-type p{
 font-size: 15px;
}
@media screen and (max-width:650px){
.content{
 flex-direction: column;
 top: 60px;
 width: 90%;
 left: 0;
 margin: 0 auto;
}
.chat{
 margin: 0 auto;
}
.background-violet{
 top: -170px;
 left: -220px;
 width: 460px;
}
.background-gray{
 bottom: -250px;
 height: 400px;
 right: -300px;
 width: 550px;
}
section > div:last-of-type{
 margin: 0 auto;
 margin-top: 50px;
 text-align: center;
 width: 80%;
}
section > div:last-of-type p{
 font-size: 19px;
}
}