/* Fonts */
@font-face {
  font-family: 'vazir';
  src: url(../Fonts/vazir/Vazir-Regular.ttf);
}

/* public Styles */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  direction: rtl;
}
body{
  direction: rtl;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f1424;
  font-family: 'vazir';
  color: #fff;
}
.container{
  width: 80%;
  height: 50%;
  display: grid;
  grid-gap: 1.5rem ;
  grid-auto-rows: 230px;
}
.card{
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
.active{
  color: #fff !important;
  font-size: 22px !important;
}

/* Design Cards */
.bg{
  width: 100%;
  height: 35%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 15px;
}
.bg img {
  position: absolute;
  right: 20px;
  top: -10px;
}
.bg-title{
  position: absolute;
  left: 20px;
  bottom: 5px;
  font-size: 20px;
  font-weight: 900;
}
.card-info{
  z-index: 300;
  width: 100%;
  height: 80%;
  background-color: hsl(235, 46%, 20%);
  border-radius: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}
.card-info:hover{
  background-color: #292f70;
  cursor: pointer;
}
.card-info .title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-info .title  svg:hover path{
  fill: #ffffff ;
}
.card-info .content{
  margin-top: 1rem;
}
.card-info .content h1 {
  font-size: 35px;
  font-weight: 300;
}
.card-info .content p{
  margin-top: 3px;
  font-size: 14px;
}

.work .bg ,
.work .bg-title{
  color: #d96c47;
  background-color: hsl(15, 100%, 70%);
}
.play .bg,
.play .bg-title{
  color: #3f9cbb;
  background-color: hsl(195, 74%, 62%);
}
.study .bg,
.study .bg-title{
  color: #f04667;
  background-color: hsl(348, 100%, 68%);
}
.exercise .bg,
.exercise .bg-title{
  color: #29ba66;
  background-color: hsl(145, 58%, 55%);
}
.social .bg,
.social .bg-title{
  color: #5a1cbb;
  background-color: hsl(264, 64%, 52%);
}
.self-care .bg,
.self-care .bg-title{
  color: #e6a532;
  background-color: hsl(43, 84%, 65%);
}

/* Design User section */
.menu{
  z-index: 200;
  width: 100%;
  height: 35%;
  padding: 2rem;
  background-color: hsl(235, 46%, 20%);
  border-radius: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.menu ul {
  width: 100%;
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
.menu ul li a {
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  color: #4c4e89;
  transition: all 0.3s ease;
}
.menu ul li a:hover{
  color: #fff;
}
.user-info{
  z-index: 300;
  width: 100%;
  height: 70%;
  background-color: hsl(246, 80%, 60%);
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.user-info p {
  color: rgba(255,255,255,0.7);
  line-height: 25px;
}
.user-info h1 {
  line-height: 45px;
  font-size: 40px;
  font-weight: 300;
}
.user-img{
  width: 75px;
  height: 75px;
  border-radius: 50px;
  border: 3px solid #fff;
  margin-bottom: 2rem;
}
.user-img img {
  width: 100%;
  height: 100%;
  
}

/* Animations */
.animation{
  animation-name: cardChange;
  animation-duration: 2s;
  animation-timing-function: ease;
}
@keyframes cardChange{
  0% {transform: scale(1) translatey(0em); }
  10% {transform: scale(1.04) translatey(0em);}
  25% {transform: scale(1.04) translatey(2.4em);}
  40% {transform: scale(0.95) translatey(2.4em); z-index: -1;}
  50%, 55% {transform: scale(0.95) translatey(-1em) scaleY(0); transform-origin: top;
    z-index: -1;}
  65% {transform: scale(0.95) translatey(2.4em) scaleY(1); transform-origin: top;
   z-index: -1; }
  75% {transform: scale(1.04) translatey(2.4em) scaleY(1);
    z-index: 2;}
  90% {transform: scale(1.04) translatey(0em) scaleY(1); z-index: 2;}
  100% {transform: scale(1) translatey(0em) scaleY(1); z-index: 2; }
}

/* Media query */
@media only screen and (max-width:  500px)  {
  body{
    align-items: flex-start;
  }
  .menu ul{
    flex-direction: row ;
  }
  .user-info{
    flex-direction: row ;
  }
  .user-info .user-img{
    margin-left: 2rem;
  }
  .user {
    grid-area: 1/1/2/5;
  }
  .work {
    grid-area: 2/1/3/5;
  }
  .play {
  grid-area: 3/1/4/5;
  }
  .study {
  grid-area: 4/1/5/5; 
  }
  .exercise {
    grid-area: 5/1/6/5;
  }
  .social {
  grid-area: 6/1/7/5;
  }
  .self-care {
  grid-area: 7/1/8/5; 
  }
}
@media only screen and (min-width:  500px)  {
  body{
    align-items: flex-start;
  }
  .menu ul{
    flex-direction: row ;
  }
  .user-info{
    flex-direction: row;
  }
  .user-info .user-img{
    margin-left: 5%;
  }
  .user {
    grid-area: 1/1/2/5;
  }
  .work {
    grid-area: 2/1/3/3;
  }
  .play {
  grid-area: 2/3/3/5;
  }
  .study {
  grid-area: 3/1/4/3; 
  }
  .exercise {
    grid-area: 3/3/4/5;
  }
  .social {
  grid-area: 4/1/5/3;
  }
  .self-care {
  grid-area: 4/3/5/5; 
  }
}
@media only screen and (min-width: 1050px)  { 
  body{
    align-items: center ;
  }
  .menu ul{
    flex-direction: column ;
  }
  .user-info{
    flex-direction: column ;
  }
  .user {
    grid-area: 1/1/3/2;
  }
  .work {
    grid-area: 1/2/2/3;
  }
  .play {
  grid-area: 1/3/2/4;
  }
  .study {
  grid-area: 1/4/2/5; 
  }
  .exercise {
    grid-area: 2/2/3/3;
  }
  .social {
  grid-area: 2/3/3/4;
  }
  .self-care {
  grid-area: 2/4/3/5; 
  }
}