@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
:root{
  --dGray: #303030;
  --lGray: #404040;
  --vdGray: #181818;
  --vlGray: #606060;
  --dred: #D92828;
}
.outfit-font {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 18px;
  font-style: normal;
}

html,body{
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--dGray);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.app{
  max-width: 870px;
  padding: 20px;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  justify-content: center;

  overflow: scroll;
}

.pp{
  border-radius: 12px;
  width: 124px;
  height: 124px;
}

.box{
  padding: 12px;
  border-radius: 12px;
  background: var(--lGray);
  width: auto;
  height: auto;
}
.box2{
  padding: 12px;
  border-radius: 12px;
  background: var(--lGray);
  width: auto;
  height: auto;
}

.redBar{
  height: 18px;
  background: var(--dred);
  border-radius: 4px;
}

.redStroke{
  border: 1px solid var(--dred);
}

.xContainer{
  width: 345px;
  height: 508px;
  overflow: auto;
}

.tContainer{
  width: 308px;
  height: 508px;
  overflow: hidden;
}

.eduContainer{
  width: 448px;
  height: auto;
  overflow: hidden;
}



.eduCard{
  padding: 12px;
  border-radius: 12px;
  background: var(--vlGray);
  width: 204px;
}

.xCard{
  padding: 12px;
  border-radius: 12px;
  background: var(--vlGray);
}

.bRed{
  background: var(--dred);
}

.s256{
  width: 256px;
}
.s224{
  width: 224px;
}
.s192{
  width: 192px;
}
.s160{
  width: 160px;
}
.s128{
  width: 128px;
}
.s96{
  width: 96px;
}
.s64{
  width: 64px;
}

.f24{
  font-size: 24px;
}

.f20{
  font-size: 20px;
}

.f16{
  font-size: 16px;
}

.f12{
  font-size: 12px;
}

.decoImg{
  width: 204px;
  height: 204px;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 712px) {
  .box{
    width: 100%;
  }
  .eduCard{
    width: 100%;
  }
  .decoImg{
    width: 345px;
  }
}