main.css

body .nav2 {
  background-color: #432874;
  height: 60px;
}

body .nav2 ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-left: 40px;
}

body .nav2 div {
  display: flex;
  padding-top: 18px !important;
}

body .nav2 .right {
  padding-top: 10px !important;
}

body .nav2 ul li a {
  color: white;
  text-decoration: none;

}

body .nav2 .page {
  font-weight: 500;
  font-size: 16px;
  margin-right: 20px;
}

body .nav2 .right .page {
  font-size: 20px;
}

body .nav2 .logo i {
  font-size: 20px;
  margin-right: 30px;
}

.countPage {
  margin-right: 10px;
}

.fa-rotate-right {
  margin-left: 20px;
}

.countPage,
.countPage i {
  font-size: 20px;
}

.countPage img {
  height: 20px;
  width: 20px;
}

main .profile {
  height: 190px;
  background-color: #36205D;
  display: flex;
  justify-content: space-between;
}

.photo {
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;

}

.prof_box {
  display: flex;
}

.bar_system {
  width: 300px;
  height: 100%;
}

body .nav1 {
  width: 80%;
  margin: auto;
}

body .nav1 div {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

body .nav1 .right {
  margin-top: 12px;
}

body .nav1 ul {
  margin: 0px;
  padding: 0px;
}

body .nav1 li {
  list-style: none;
}

body .nav1 li a {
  text-decoration: none;
  color: black;
}

body .nav1 li .logo {
  font-size: 30px;
}

body .nav1 li .account {
  font-size: 18px;
  margin-right: 30px;
  background-color: #9a62ff;
  padding: 8px 15px;
  border-radius: 3px;
}

body .nav1 li .account:hover {
  background: #4f2a93;
  transition: 0.3s;
}



li a {
  display: inline-block;
  position: relative;
  color: #0087ca;
  transform: 0.25ms;
}

li a:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 3px;
  bottom: -5px;
  left: 0;
  background-color: #7045c1;
  transform-origin: bottom right;
}

li a:hover:after {
  transform: scale(1);
  bottom: -15px;
  transform-origin: bottom left;
}


.photo .wizardImage {
  width: 250px;
  height: 250px;
  margin-bottom: 25px;
}

.progress {
  border-radius: 2px;
  margin-top: 5px;
}

.prog {
  display: flex;
  flex-direction: column;
}

.bar_system {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 300px;
}

.progress {
  width: 80%;
  background-color: #1c122e;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

span {
  margin-right: 10px;
}


.prog {
  width: 80%;
  margin-right: 0;
}

.full_prog {
  display: flex;
}

.progress-bar {
  background-color: rgb(101, 101, 152);
}

.Username {
  color: white;
  margin-bottom: 5px;
}

.Level {
  color: gray;
  margin: 0;
  font-weight: 600;
}


.r_box {
  height: 100%;
  width: 400px;
  display: flex;
  align-items: flex-end;
  flex-direction: row-reverse;
}

.addbtn {
  height: 50px;
  width: 50px;
  border-radius: 4px;
  background-color: #5dcd90;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  transition: 200ms;
  margin-bottom: -25px;
  margin-right: 40px;
}

.addbtn:hover {
  background-color: #2d995e;
}

.addbtn img {
  width: 40px;
  transform: rotate(90deg);
}


.Main_todo {
  margin-top: 30px;
  height: 600px;
  width: 100%;
  display: flex;
}

.habit_box {
  height: 100%;
  width: 25%;
  margin-left: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.habit_nav {
  width: 95%;
  height: 40px;
}

.todo_box {
  height: 100%;
  width: 25%;
  margin-left: 40px;
}

.Routine {
  height: 100%;
  width: 25%;
  margin-left: 40px;
}

.shop {
  height: 100%;
  width: 25%;
  margin-left: 40px;
}

.habit_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.habit_nav p {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  color: #35323b;
}

.habit_nav a {
  margin-left: 12px;
  text-decoration: none;
}


.nav_right a {
  display: inline-block;
  position: relative;
  color: #0087ca;
  transform: 0.25ms;
}

.nav_right a:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 3px;
  bottom: -5px;
  left: 0;
  background-color: #7045c1;
  transform-origin: bottom right;
}

.nav_right a:hover:after {
  transform: scale(1);
  bottom: -10px;
  transform-origin: bottom left;
}

.h_box {
  width: 95%;
  height: 50px;
  border-radius: 6px;
  background-color: #e1dfe2;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.Inner {
  margin-left: 25px;
  color: #797979;
  font-weight: 700;
}

.Todo_item {
  width: 97%;
  height: 90px;
  border-bottom: 3px solid grey;
  margin-top: 25px;
  border-radius: 3px;
  display: flex;
}

.Add_button {
  height: 100%;
  width: 13%;
  background-color: #5dcd90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center_content {
  height: 100%;
  width: 74%;
  display: flex;
  background-color: #f4f3f3;
  flex-direction: column;
}

.minus_button {
  height: 100%;
  width: 13%;
  background-color: #dbd7de;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plus_box {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #469f73;
  transition: 100ms;
  cursor: pointer;
}

.Cross {
  transform: rotate(45deg);
  color: #fff;
  width: 20px;
  filter: invert(100%) sepia(8%) saturate(0%) hue-rotate(161deg) brightness(108%) contrast(109%);
}

.plus_box:hover {
  background-color: #337e59;
}

.description {
  color: rgb(50, 50, 50);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  padding: 5% 5%;
}

.minus_box {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9f4646;
  transition: 100ms;
  cursor: pointer;
}

.minus {
  color: #fff;
  width: 15px;
  filter: invert(100%) sepia(8%) saturate(0%) hue-rotate(161deg) brightness(108%) contrast(109%);
}

.minus_box:hover {
  background-color: #672525;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 1% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 30%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  width: 25px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.add_Todo {
  height: 500px;
  display: flex;
  flex-direction: column;
  padding: 0 5%;
}

.Add_text {
  font-size: 25px;
  color: #000;
  font-weight: 900;
}

.saxeli {
  text-indent: 10px;
  margin-top: 25px;
}

.modal_button {
  width: 25%;
  margin-top: 25px;
}

.choose_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.choose_box .btn {
  width: 90px;
  height: 40px;
  margin-right: 15px;
}

.shop_box {
  height: 100%;
  width: 25%;
  margin-left: 20px;
  display: flex;
  border-left: 1px grey solid;
  justify-content: center;
  flex-direction: column;
}

.Shop_label {
  height: 10%;
  width: 90%;
  border-radius: 6px;
  padding: 0 5%;
  margin-top: 15px;
  background-color: #e1dfe2;
  text-align: center;
}

.Shop_tag {
  margin: 12px;
  color: #FFF5E7;
  font-size: 24px;
}

.inner_hp {
  color: #fff;
}

.patara {
  font-size: 16px;
  color: #000;
  margin-left: 9px;
}

.rewards_box{
  height: 60%;
  width: 95%;
}

.yuti{
  height: 100%;
  width: 25%;
  margin-left: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-left: solid 2px grey ;
}

.item_box{
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  margin-top: 25px;
  display: grid;
  grid-template: 150px / auto auto auto;
  column-gap: 20px;
}

.item1{
  height: 130px;
  width: 100px;
  border: solid 2px grey;
  text-align: center;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.item1 img{
  width: 60px;
  margin-top: 8px;
}

.price_box{
  width: 100%;
  height: 25px;
  background-color: #f0e0ca;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price_box img{
  width: 20px;
  margin: 0;
}

.price_box span{
  margin-left: 5px;
}

.input_box{
  width: 90%;
}

.input_box input{
  width: 90%;
}
.ukan{
  width: 50px;
  color: white;
  background-color: #fff;
  color: #fff;
}

.ukan h1{
  color: #fff !important  ;
}