@font-face {
  font-family: 'lexend deca regular';
  src: url("../fonts/Lexend_Deca/static/LexendDeca-Regular.ttf");
}

@font-face {
  font-family: 'inter regular';
  src: url("../fonts/inter/static/Inter-Regular.ttf");
}

@font-face {
  font-family: 'inter bold';
  src: url("../fonts/inter/static/Inter-Bold.ttf");
}

* {
  padding: 0px;
  margin: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

main {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #0a0c1b;
  overflow-y: auto;
}

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  height: 60%;
  background: #1c1938;
  border-radius: 8px;
}

.panel {
  height: 100%;
}

.left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50%;
  font-family: 'inter regular';
  color: white;
  border-radius: 8px 0 0 8px;
}

.left section {
  width: 70%;
  height: 70%;
}

.left section .mainParagraph {
  height: 75%;
}

.left section .mainParagraph h1 {
  font-size: 30px;
  font-family: 'inter bold';
  margin-bottom: 20px;
}

.left section .mainParagraph h1 span {
  color: #aa5cdb;
}

.left section .mainParagraph p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
}

.left section .stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  height: 25%;
}

.left section .stats .stat {
  width: 25%;
  height: 50px;
}

.left section .stats .stat h1 {
  font-size: 20px;
  font-family: 'inter bold';
}

.left section .stats .stat span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-family: 'lexend deca regular';
}

.right {
  position: relative;
  width: 50%;
  background: url("../images/image-header-desktop.jpg");
  border-radius: 0 8px 8px 0;
}

.right::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #5b1c82;
  opacity: 0.7;
  border-radius: inherit;
}

@media only screen and (max-width: 376px) {
  .card {
    height: 90%;
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
  }
  .panel {
    height: 50%;
    width: 100%;
  }
  .right {
    height: 30%;
    background: url("../images/image-header-mobile.jpg");
    background-size: cover;
    border-radius: 8px 8px 0 0;
  }
  .left {
    height: 70%;
    border-radius: 0 0 8px 8px;
  }
  .left section {
    height: 90%;
    width: 80%;
  }
  .left section .mainParagraph {
    height: 50%;
    text-align: center;
  }
  .left section .mainParagraph h1 {
    width: 80%;
    font-size: 20px;
    margin: auto;
    margin-bottom: 8px;
  }
  .left section .mainParagraph p {
    width: 90%;
    font-size: 12px;
    margin: auto;
  }
  .left section .stats {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: 50%;
    text-align: center;
  }
  .left section .stats .stat {
    width: 100%;
  }
  .left section .stats .stat h1 {
    font-size: 18px;
  }
  .left section .stats .stat span {
    font-size: 13px;
  }
}
/*# sourceMappingURL=main.css.map */