@import url('https://fonts.googleapis.com/css2?family=Inter&family=Roboto:ital,wght@1,300&display=swap');
html,
body {
  position: relative;
  max-height: 1080px;
  height: 100%;
  color: #858594;
}
.wrapper,
.wrapper > div {
  height: 100%;
  font-family: 'Inter', sans-serif;
}

.wrapper > div:nth-child(2) {
  padding: 20px;
}

.wrapper div:first-child > h1 {
  position: relative;
  left: 100px;
  font-size: 24px;
  font-weight: 500;
  color: #424242;
}

.wrapper div:first-child > h1::before {
  position: absolute;
  left: -50px;
  display: block;
  content: '';
  width: 47px;
  height: 26px;
  background: transparent url(/img/SVG.svg) no-repeat center;
}

/* center */
.main {
  background: url(/img/bg.svg) no-repeat center;
  background-position: right 80%;
}
.content {
  position: relative;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%,-50%);
}
.content > div {
  position: absolute;
}

.shopping {
  background-color: white;
  border-radius: 20px;
  padding: 0 25px;
  position: absolute;
  top: 20px;
  left: 10px;
  width: 200px;
  height: 200px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #858594;
}

.num {
  margin-bottom: 3px;
}

.total {
  margin-top: 0;
  font-weight: 300;
}

.month {
  background-color: #eff0f1;
  width: 112px;
  border-radius: 15px;
  padding-left: 10px;
  
}

.user {
  background-color: white;
  border-radius: 20px;
  padding: 25px;
  right: 20px;
  top: 10px;
  width: 300px;
  height: 90px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  font-weight: 700;
}

.desc {
  padding-left: 20px;
}

.desc::after {
  display: block;
  content: 'New Customers';
  color: #858594;
  width: 100%;
  font-weight: 300;
}
.player {
  background: url(img/user-back.png) no-repeat center;
  background-size: 100%;
  border-radius: 20px;
  padding: 25px;
  width: 200px;
  height: 550px;
  transform: scale(0.7);
  bottom: 0;

}


.graph {
  background-color: white;
  border-radius: 20px;
  padding: 25px;
  right: 20px;
  bottom: 140px;
  width: 200px;
  height: 205px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  font-weight: 700;
}

.graph img {
  position: relative;
  left: -8px;
}

.block-one {
  align-items: end;
}

.block-one p {
  
}

.content div * i {
  background: lightgray;
  padding: 5px;
  border-radius: 10px;
  color:#7c4dff;
  align-items: end;
}
.rate-up {
  color: lightgreen;
  font-weight: 500;
  font-size: 13px;
}
.rate-down {
  color: red;
  font-weight: 500;
  font-size: 13px;
}

/* form */

.form {
  height: 50%;
  
}
.nav-head > div {
  font-size: 14px;
  font-weight: 400;

  
}
.nav-head {
  width: 100%;
  padding: 0!important;
}
h2 {
  font-size: 24px;
  font-weight: 600;
  color: #636578;
  font-weight: 600;
  margin: 0 0 5px 0;
}

.nav-head > div p {
  margin: 0;
}
form {
  width: 100%;
  font-family: 'Inter', sans-serif;
}
form > div:first-child {
  margin-top: 20px;
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  background: rgba(102, 108, 255, 0.12);
  color: #666cff;
  font-weight: 300;
}
form > div:first-child p {
  margin-top: 0;
}
form > div:first-child p:last-child {
  margin-bottom: 0;
}
.form p {
  font-size: 14px;
}
.form-span {
  font-weight: 700;
  color: #666cff;
}
.input-field {
  border: 2px solid lightgray;
  border-radius: 20px;
  margin-top: 25px;
}


.check {
  width: 100%;
  justify-content: space-between;
  margin-bottom: 15px;
}

input[type="submit"] {
  width: 100%;
  border: 0;
  border-radius: 15px;
  padding: 20px;
  cursor: pointer;
  color: white;
  margin-bottom: 15px;
}

.or {
  margin-bottom: 15px;
}

hr {
  border: 1px solid lightgray;
  width: 40%;
}

.icon a div {
  margin-top: 15px;
  width: 24px;
  height: 24px;
  padding: 15px;
}

.icon a:first-child div {
  background: url(icon/f.svg) no-repeat center;
}

.icon a:nth-child(2) div {
  background: url(icon/t.svg) no-repeat center;
}

.icon a:nth-child(3) div {
  background: url(icon/g.svg) no-repeat center;
}

.icon a:last-child div {
  background: url(icon/google.svg) no-repeat center;
}