@font-face
{
    font-family: 'iransansdn';
    src: url('../fonts/Kalameh-Bold.ttf');
}

html {
  --black: #000000;
  --white: #ffffff;
  --darkest: #101010;
  --darker: #16171A;
  --dark: #A3AFBF;
  --medium: #DFE7EF;
  --light: #CAD4E1;
  --lighter: #F5F8FC;
  --lightest: var(--white);
  --primary: #7B16FF;
  --primary-light: #DDD9FF;
  --primary-trans: rgba(123,22,255,0.4);
  --yellow: #FDCB6E;
  --orange: #E17055;
  --teal: #00CEC9;
  --bg: var(--darkest);
  --color: var(--lightest);
  --surface: var(--darker);
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  direction: rtl !important;
  font-family: iransansdn !important;
}

html, body {
  width: 100%;
  height: 100%;
  direction: rtl !important;
}

body {
  background: #1B1464;
  color: var(--color);
  font-size: 1.6rem;
  font-family: iransansdn;
  text-align: center !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  font-family: "Oswald", system-ui;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: all 120ms ease-out 0s;
  display: inline-block;
  border-radius: 0.4rem;
}
a:hover {
  background: var(--primary-trans);
  color: var(--primary-light);
  box-shadow: 0px 0px 0px 0.4rem var(--primary-trans);
}

button, textarea, input, select {
  font-family: inherit;
  color: inherit;
}
button:active, button:focus, textarea:active, textarea:focus, input:active, input:focus, select:active, select:focus {
  outline: 0;
}

button, select {
  cursor: pointer;
}

.l-wrapper {
  width: 100%;
  max-width: 960px;
  margin: auto;
  padding: 1.6rem 1.6rem 3.2rem;
}

.l-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
  position: relative;
}
@media screen and (max-width: 700px) {
  .l-grid {
    grid-template-columns: 1fr;
  }
}

.c-header {
  padding: 1.6rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.4rem;
  position: relative;
}
.c-header:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 0.2rem;
  background: var(--primary-trans);
}

.c-card {
  border-radius: 0.8rem;
  background: var(--surface);
  width: 100%;
  margin-bottom: 1.6rem;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
}
.c-card__body, .c-card__header {
  padding: 2.4rem;
}
@media screen and (max-width: 700px) {
  .c-card__body, .c-card__header {
    padding: 1.2rem;
  }
}
.c-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0;
}
@media screen and (max-width: 700px) {
  .c-card__header {
    flex-direction: column;
  }
}

@media screen and (max-width: 700px) {
  .c-place {
    transform: translateY(4px);
  }
}

.c-logo {
  display: inline-block;
  width: 100%;
  max-width: 17.6rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.c-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.c-list__item {
  padding: 1.6rem 0;
}
.c-list__item .c-flag {
  margin-top: 0.8rem;
}
@media screen and (max-width: 700px) {
  .c-list__item .c-flag {
    margin-top: 0.4rem;
  }
}
.c-list__grid {
  display: grid;
  grid-template-columns: 4.8rem 3fr 1fr;
  grid-column-gap: 2.4rem;
}
@media screen and (max-width: 700px) {
  .c-list__grid {
    grid-template-columns: 3.2rem 3fr 1fr;
    grid-column-gap: 0.8rem;
  }
}

.c-media {
  display: inline-flex;
  align-items: center;
}
.c-media__content {
  padding-right: 1.6rem;
}
@media screen and (max-width: 700px) {
  .c-media__content {
    padding-left: 0.8rem;
  }
}
.c-media__title {
  margin-bottom: 0.4rem;
}
@media screen and (max-width: 700px) {
  .c-media__title {
    font-size: 1.4rem;
  }
}

.c-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  box-shadow: inset 0px 0px 0px 1px currentColor;
  border-radius: 50%;
  background: var(--lightest);
  color: var(--dark);
}
@media screen and (max-width: 700px) {
  .c-avatar {
    width: 3.2rem;
    height: 3.2rem;
  }
}
.c-avatar--lg {
  width: 9.6rem;
  height: 9.6rem;
}

.c-button {
  display: inline-block;
  background: var(--dark);
  border: 0;
  border-radius: 0.4rem;
  padding: 1.2rem 2rem;
  transition: all 120ms ease-out 0s;
}
.c-button--block {
  display: block;
  width: 100%;
}
.c-button:hover, .c-button:focus {
  filter: brightness(0.9);
}
.c-button:focus {
  box-shadow: 0px 0px 0px 0.4rem var(--primary-trans);
}
.c-button:active {
  box-shadow: 0px 0px 0px 0.4rem var(--primary-trans), inset 0px 0px 0.8rem rgba(0, 0, 0, 0.2);
  filter: brightness(0.8);
}

.c-select {
  background: transparent;
  padding: 1.2rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 1.4rem;
  border-color: rgba(255, 255, 255, 0.2);
  transition: all 120ms ease-out 0s;
}
.c-select:hover {
  background: var(--darkest);
}

.c-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--lightest);
  color: var(--dark);
  border-radius: 0.4rem;
}
@media screen and (max-width: 700px) {
  .c-flag {
    width: 2.4rem;
    height: 2.4rem;
  }
}

.c-button--light {
  background: var(--lightest);
}

.c-button--primary {
  background: var(--primary);
}

.c-button--dark {
  background: var(--darkest);
}

.c-button--transparent {
  background: transparent;
}

.c-button--medium {
  background: var(--medium);
}

.c-button--yellow {
  background: var(--yellow);
}

.c-button--orange {
  background: var(--orange);
}

.c-button--teal {
  background: var(--teal);
}

.c-button--light-gradient {
  background: linear-gradient(to top, var(--light), var(--lightest));
}

.u-text--title {
  font-family: "Oswald", system-ui;
}

.u-text--left {
  text-align: left;
}
.u-text--center {
  text-align: center;
}
/*.u-text--right {
  text-align: right;
}*/

.u-bg--light {
  background: var(--lightest) !important;
}

.u-text--light {
  color: var(--lightest) !important;
}

.u-bg--primary {
  background: var(--primary) !important;
}

.u-text--primary {
  color: var(--primary) !important;
}

.u-bg--dark {
  background: var(--darkest) !important;
}

.u-text--dark {
  color: var(--darkest) !important;
}

.u-bg--transparent {
  background: transparent !important;
}

.u-text--transparent {
  color: transparent !important;
}

.u-bg--medium {
  background: var(--medium) !important;
}

.u-text--medium {
  color: var(--medium) !important;
}

.u-bg--yellow {
  background: var(--yellow) !important;
}

.u-text--yellow {
  color: var(--yellow) !important;
}

.u-bg--orange {
  background: var(--orange) !important;
}

.u-text--orange {
  color: var(--orange) !important;
}

.u-bg--teal {
  background: var(--teal) !important;
}

.u-text--teal {
  color: var(--teal) !important;
}

.u-bg--light-gradient {
  background: linear-gradient(to top, var(--light), var(--lightest)) !important;
}

.u-text--light-gradient {
  color: linear-gradient(to top, var(--light), var(--lightest)) !important;
}

.u-display--flex {
  display: flex;
}

.u-align--center {
  align-items: center;
}

.u-justify--center {
  justify-content: center;
}

.u-align--flex-end {
  align-items: flex-end;
}

.u-justify--flex-end {
  justify-content: flex-end;
}

.u-align--flex-start {
  align-items: flex-start;
}

.u-justify--flex-start {
  justify-content: flex-start;
}

.u-align--space-between {
  align-items: space-between;
}

.u-justify--space-between {
  justify-content: space-between;
}

.u-text--small {
  font-size: 1.4rem;
}

.u-pl--2 {
  padding-left: 0.2rem;
}

.u-ml--2 {
  margin-left: 0.2rem;
}

.u-pr--2 {
  padding-right: 0.2rem;
}

.u-mr--2 {
  margin-right: 0.2rem;
}

.u-pb--2 {
  padding-bottom: 0.2rem;
}

.u-mb--2 {
  margin-bottom: 0.2rem;
}

.u-pt--2 {
  padding-top: 0.2rem;
}

.u-mt--2 {
  margin-top: 0.2rem;
}

.u-pl--4 {
  padding-left: 0.4rem;
}

.u-ml--4 {
  margin-left: 0.4rem;
}

.u-pr--4 {
  padding-right: 0.4rem;
}

.u-mr--4 {
  margin-right: 0.4rem;
}

.u-pb--4 {
  padding-bottom: 0.4rem;
}

.u-mb--4 {
  margin-bottom: 0.4rem;
}

.u-pt--4 {
  padding-top: 0.4rem;
}

.u-mt--4 {
  margin-top: 0.4rem;
}

.u-pl--8 {
  padding-left: 0.8rem;
}

.u-ml--8 {
  margin-left: 0.8rem;
}

.u-pr--8 {
  padding-right: 0.8rem;
}

.u-mr--8 {
  margin-right: 0.8rem;
}

.u-pb--8 {
  padding-bottom: 0.8rem;
}

.u-mb--8 {
  margin-bottom: 0.8rem;
}

.u-pt--8 {
  padding-top: 0.8rem;
}

.u-mt--8 {
  margin-top: 0.8rem;
}

.u-pl--16 {
  padding-left: 1.6rem;
}

.u-ml--16 {
  margin-left: 1.6rem;
}

.u-pr--16 {
  padding-right: 1.6rem;
}

.u-mr--16 {
  margin-right: 1.6rem;
}

.u-pb--16 {
  padding-bottom: 1.6rem;
}

.u-mb--16 {
  margin-bottom: 1.6rem;
}

.u-pt--16 {
  padding-top: 1.6rem;
}

.u-mt--16 {
  margin-top: 1.6rem;
}

.u-pl--24 {
  padding-left: 2.4rem;
}

.u-ml--24 {
  margin-left: 2.4rem;
}

.u-pr--24 {
  padding-right: 2.4rem;
}

.u-mr--24 {
  margin-right: 2.4rem;
}

.u-pb--24 {
  padding-bottom: 2.4rem;
}

.u-mb--24 {
  margin-bottom: 2.4rem;
}

.u-pt--24 {
  padding-top: 2.4rem;
}

.u-mt--24 {
  margin-top: 2.4rem;
}

.u-pl--32 {
  padding-left: 3.2rem;
}

.u-ml--32 {
  margin-left: 3.2rem;
}

.u-pr--32 {
  padding-right: 3.2rem;
}

.u-mr--32 {
  margin-right: 3.2rem;
}

.u-pb--32 {
  padding-bottom: 3.2rem;
}

.u-mb--32 {
  margin-bottom: 3.2rem;
}

.u-pt--32 {
  padding-top: 3.2rem;
}

.u-mt--32 {
  margin-top: 3.2rem;
}

.numeroUno {
  position: relative;
  overflow: visible;
  max-width: 45px;
  width: 45px;
  height: auto;
  .medalion {
    transform: scale(0);
    transform-origin: 51% 81%;
    animation: oneAnimation 0.5s 0.6s forwards ease;
  }
  .glory_rays_rapper {
    transform: scale(0);
    animation: scaleRays 0.5s 0.4s forwards ease;
    transform-origin: 51% 81%;
    .glory_rays {
      transform-origin: 51% 81%;
      /* animation: rotateRays 1s 0.4s forwards ease; */
    }
  }

  .left_branch,
  .right_branch {
    .bottom_leafs {
      .leaf_rapper {
        .leaf {
          transform: scale(0) rotate(-50deg);
          animation: stemAnimation 0.6s 1.1s forwards ease;
        }
        &:nth-child(2) {
          .leaf {
            animation-delay: 1.2s;
          }
        }
      }
    }
    .stem_rapper {
      transform-origin: 36% 78%;
      transform: rotate(2deg);
      animation: leftStemRotate 3s 1.9s infinite linear;
      .stem {
        transform: scale(0) rotate(-50deg);
        transform-origin: 36% 78%;
        animation: stemAnimation 0.6s 1.3s forwards ease;
      }
    }
  }

  .left_branch {
    .bottom_leafs {
      .leaf_rapper {
        transform-origin: 37% 78%;
        transform: rotate(4deg);
        animation: leftLeafRotate 3s 1.7s infinite ease;
        &:nth-child(2) {
          animation-delay: 1s;
        }
        .leaf {
          transform-origin: 37% 78%;
        }
      }
    }
    .stem_rapper {
      .top_leaf {
        transform-origin: 10% 38%;
        transform: rotate(-9deg);
        animation: rightTopLeafRotate 3s 2.2s infinite ease;
        .leaf {
          transform: scale(0);
          animation: scaleToOne 0.6s 1.85s forwards ease;
          transform-origin: 10% 36%;
        }
      }
      .left {
        .leaf_rapper {
          &:nth-child(1) {
            transform-origin: 8% 51%;
            transform: rotate(-4deg);
            animation: rightLeafRotate 3s 2.3s infinite ease;
            .leaf {
              transform: scale(0) rotate(50deg);
              animation: stemAnimation 0.6s 1.7s forwards ease;
              transform-origin: 8% 51%;
            }
          }
          &:nth-child(2) {
            transform-origin: 10% 52%;
            transform: rotate(-4deg);
            animation: rightLeafRotate 3s 2.25s infinite ease;
            .leaf {
              transform: scale(0) rotate(50deg);
              animation: stemAnimation 0.6s 1.65s forwards ease;
              transform-origin: 10% 52%;
            }
          }
          &:nth-child(3) {
            transform-origin: 10% 59%;
            transform: rotate(-4deg);
            animation: rightLeafRotate 3s 2.2s infinite ease;
            .leaf {
              transform: scale(0) rotate(50deg);
              animation: stemAnimation 0.6s 1.6s forwards ease;
              transform-origin: 10% 59%;
            }
          }
          &:nth-child(4) {
            transform-origin: 17% 69%;
            transform: rotate(-4deg);
            animation: rightLeafRotate 3s 2.15s infinite ease;
            .leaf {
              transform: scale(0) rotate(50deg);
              animation: stemAnimation 0.6s 1.55s forwards ease;
              transform-origin: 17% 69%;
            }
          }
        }
      }
      .right {
        .leaf_rapper {
          &:nth-child(1) {
            transform-origin: 10% 43%;
            transform: rotate(-4deg);
            animation: rightLeafRotate 3s 2.6s infinite ease;
            .leaf {
              transform: scale(0) rotate(-50deg);
              animation: stemAnimation 0.6s 1.8s forwards ease;
              transform-origin: 10% 43%;
            }
          }
          &:nth-child(2) {
            transform-origin: 12% 52%;
            transform: rotate(-4deg);
            animation: rightLeafRotate 3s 2.55s infinite ease;
            .leaf {
              transform: scale(0) rotate(-50deg);
              animation: stemAnimation 0.6s 1.75s forwards ease;
              transform-origin: 12% 52%;
            }
          }
          &:nth-child(3) {
            transform-origin: 13% 59%;
            transform: rotate(-4deg);
            animation: rightLeafRotate 3s 2.5s infinite ease;
            .leaf {
              transform: scale(0) rotate(-50deg);
              animation: stemAnimation 0.6s 1.7s forwards ease;
              transform-origin: 13% 59%;
            }
          }
          &:nth-child(4) {
            transform-origin: 20% 69%;
            transform: rotate(-4deg);
            animation: rightLeafRotate 3s 2.45s infinite ease;
            .leaf {
              transform: scale(0) rotate(-50deg);
              animation: stemAnimation 0.6s 1.65s forwards ease;
              transform-origin: 20% 69%;
            }
          }
        }
      }
    }
  }

  .right_branch {
    .bottom_leafs {
      .leaf_rapper {
        transform-origin: 63% 78%;
        transform: rotate(-4deg);
        animation: rightLeafRotate 3s 1.7s infinite ease;
        &:nth-child(2) {
          animation-delay: 1s;
        }
        .leaf {
          transform: scale(0) rotate(50deg);
          transform-origin: 63% 78%;
        }
      }
    }
    .stem_rapper {
      transform-origin: 67% 78%;
      transform: rotate(-2deg);
      animation: rightStemRotate 3s 1.9s infinite linear;
      .top_leaf {
        transform-origin: 90% 38%;
        transform: rotate(9deg);
        animation: leftTopLeafRotate 3s 2.2s infinite ease;
        .leaf {
          transform: scale(0);
          animation: scaleToOne 0.6s 1.85s forwards ease;
          transform-origin: 90% 36%;
        }
      }
      .left {
        .leaf_rapper {
          &:nth-child(1) {
            transform-origin: 93% 43%;
            transform: rotate(4deg);
            animation: leftLeafRotate 3s 2.6s infinite ease;
            .leaf {
              transform: scale(0) rotate(50deg);
              animation: stemAnimation 0.6s 1.8s forwards ease;
              transform-origin: 93% 43%;
            }
          }
          &:nth-child(2) {
            transform-origin: 90% 52%;
            transform: rotate(4deg);
            animation: leftLeafRotate 3s 2.55s infinite ease;
            .leaf {
              transform: scale(0) rotate(50deg);
              animation: stemAnimation 0.6s 1.75s forwards ease;
              transform-origin: 90% 52%;
            }
          }
          &:nth-child(3) {
            transform-origin: 87% 59%;
            transform: rotate(4deg);
            animation: leftLeafRotate 3s 2.5s infinite ease;
            .leaf {
              transform: scale(0) rotate(50deg);
              animation: stemAnimation 0.6s 1.7s forwards ease;
              transform-origin: 87% 59%;
            }
          }
          &:nth-child(4) {
            transform-origin: 80% 69%;
            transform: rotate(4deg);
            animation: leftLeafRotate 3s 2.45s infinite ease;
            .leaf {
              transform: scale(0) rotate(50deg);
              animation: stemAnimation 0.6s 1.65s forwards ease;
              transform-origin: 80% 69%;
            }
          }
        }
      }
      .right {
        .leaf_rapper {
          &:nth-child(1) {
            transform-origin: 93% 51%;
            transform: rotate(4deg);
            animation: leftLeafRotate 3s 2.3s infinite ease;
            .leaf {
              transform: scale(0) rotate(-50deg);
              animation: stemAnimation 0.6s 1.7s forwards ease;
              transform-origin: 93% 51%;
            }
          }
          &:nth-child(2) {
            transform-origin: 91% 52%;
            transform: rotate(4deg);
            animation: leftLeafRotate 3s 2.25s infinite ease;
            .leaf {
              transform: scale(0) rotate(-50deg);
              animation: stemAnimation 0.6s 1.65s forwards ease;
              transform-origin: 91% 52%;
            }
          }
          &:nth-child(3) {
            transform-origin: 90% 59%;
            transform: rotate(4deg);
            animation: leftLeafRotate 3s 2.2s infinite ease;
            .leaf {
              transform: scale(0) rotate(-50deg);
              animation: stemAnimation 0.6s 1.6s forwards ease;
              transform-origin: 90% 59%;
            }
          }
          &:nth-child(4) {
            transform-origin: 83% 69%;
            transform: rotate(4deg);
            animation: leftLeafRotate 3s 2.15s infinite ease;
            .leaf {
              transform: scale(0) rotate(-50deg);
              animation: stemAnimation 0.6s 1.55s forwards ease;
              transform-origin: 83% 69%;
            }
          }
        }
      }
      .stem {
        transform: scale(0) rotate(50deg);
        transform-origin: 67% 78%;
      }
    }
  }
  .one {
    transform-origin: 50% 50%;
    transform: scale(0);
    animation: oneAnimation 0.8s 1s forwards ease;
  }
  .sparks {
    opacity: 0;
    transform: scale(0.6);
    transform-origin: 50% 50%;
    animation: fadeInSparkRapper 2s 1.7s forwards ease;
    .spark {
      opacity: 0;
      animation: fadeInSparks 5s infinite ease;
      @for $f from 1 to 15 {
        &:nth-child(#{$f}) {
          animation-delay: $f * 0.4s;
        }
      }
    }
  }
}

@keyframes stemAnimation {
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes leftLeafRotate {
  0% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(4deg);
  }
}

@keyframes rightLeafRotate {
  0% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

@keyframes leftTopLeafRotate {
  0% {
    transform: rotate(9deg);
  }
  50% {
    transform: rotate(-9deg);
  }
  100% {
    transform: rotate(9deg);
  }
}

@keyframes rightTopLeafRotate {
  0% {
    transform: rotate(-9deg);
  }
  50% {
    transform: rotate(9deg);
  }
  100% {
    transform: rotate(-9deg);
  }
}

@keyframes leftStemRotate {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}

@keyframes rightStemRotate {
  0% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}

@keyframes scaleToOne {
  100% {
    transform: scale(1);
  }
}

@keyframes oneAnimation {
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeInSparkRapper {
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInSparks {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes scaleRays {
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes rotateRays {
  100% {
    transform: rotate(180deg);
  }
}

.score-bg {
    background-image: url('../image/bg.png') !important;
    background-repeat: repeat-y;
}

.profile-bg {
    background-image: url('../image/bottom-bg.jpg') !important;
    background-size: 1200px 900px;
    background-repeat: no-repeat;
}