@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700&display=swap');
*{
    font-family: 'Poppins', sans-serif;
    color: #71357b;
}
.texting{
    font-size: 80px;
    color: rgb(255, 0, 25);
}
.backg{
    height: 100vh;
    width: 100vw;
    /* background-color: #eae1d4; */
    background: linear-gradient(135deg, #00c3ff, #eeef1c);
    background: linear-gradient(135deg, #fc00ff, #00dbde);
    background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
    background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
    
}
.mainArea{
    height: 100vh;
    width: 100vw;
    background-color: #ffffff;
    /* border-radius: 30px; */
    /* background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}
.user1{
    height: 50%;
    max-width: 40%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    
}

.profile{
    display: flex;
    justify-content: space-around;
}
.area1{
    border-right: 1px solid rgb(152, 146, 146);
}
.area2{
    border-radius: 30px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    height: 96vh;
}
.area3{
    background-color: #faf5ef;
    height: 96vh;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

.card{
    border-radius: 10px;
    /* background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px; */
    cursor: pointer;
    
    
}
.card:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.cardpremium{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

}
.taskcards{
    border-radius: 8px;
    border-left: 8px solid #fd7e51 ;
}
.taskcards1{
    border-left: 8px solid #71357b ;
}
.taskcards2{
    border-left: 10px solid #95d0d4 ;
}
.taskcards3{
    border-left: 10px solid #0e008d ;
}
.taskcards4{
    border-left: 10px solid #970404 ;
}
.taskcards5{
    border-left: 10px solid #fd7e51 ;
}

.taskcards6{
    border-left: 10px solid #c800a0 ;
}




/* CSS */
.button-40 {
  background-color: #111827;
  border: 1px solid transparent;
  border-radius: .75rem;
  box-sizing: border-box;
  color: #FFFFFF ;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1.100rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: .75rem 1.2rem;
  text-align: center;
  text-decoration: none #6B7280 solid;
  text-decoration-thickness: auto;
  transition-duration: .2s;
  transition-property: background-color,border-color,color,fill,stroke;
  transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
}

.button-40:hover {
  background-color: #374151;
}

.button-40:focus {
  box-shadow: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .button-40 {
    padding: .75rem 1.5rem;
  }
}

.card {


    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
    
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  }
  
  
  .card:hover,
  .card:focus,
  .card:active {
    transform: scale(1.1);
  }


 


/* CSS */
.button-70 {
  background-image: linear-gradient(#0dccea, #0d70ea);
  border: 0;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: Montserrat,sans-serif;
  font-size: .7em;
  margin: 5px;
  padding: 10px 15px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
small, p{
    font-size: 12px;
}
span{
    font-size: 13px;
}