.h_iframe-aparat_embed_frame {
  position: relative;
}
.h_iframe-aparat_embed_frame .ratio {
  display: block;
  width: 100%;
  height: auto;
}
.h_iframe-aparat_embed_frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body {
  background-image: url("../images/background.png");
  background-position: center;
  background-size: cover;
}
.content-container {
  text-align: start;
  border-radius: 10px;
  margin-top: 12%;
  text-align: end;
  background-color: rgba(14, 16, 21, 1);
  padding: 22px;
}
.poster,
.content-header {
  padding: 0 40px;
}
.poster {
  margin-top: 38px;
}
.content-header {
  display: flex;

  justify-content: space-between;
  align-items: center;
}
.content-header h1 {
  font-size: x-large;
}
.content-info {
  display: flex;
  flex-direction: row-reverse;
  gap: 8%;
  align-items: center;
  white-space: nowrap;
}
.share-content,
.study-time {
  display: flex;
  color: rgba(178, 179, 180, 1);
  align-items: center;
  font-size: 12px;
  gap: 7px;
}
.tutorial-headers {
  text-align: start;
  width: 80%;
  margin: 40px auto;
  margin-bottom: 80px;
  padding: 15px 25px;
  border: 1px solid #b2b3b4;
  border-radius: 8px;
}
.tutorial-headers h2 {
  margin-bottom: 10px;
  font-size: larger;
}
.nav-items__item a:hover,
.menu__item a:hover {
  color: #e9213d;
  transition: 100ms;
}
.tutorial-headers ol li:hover {
  color: rgba(233, 33, 60, 0.78);
  transition: 100ms;
  cursor: pointer;
}
.main-content h2 {
  font-size: larger;
  color: #e9213d;
  margin-bottom: 12px;
}
.main-content p {
  font-size: 15px;
}
.main-content p,
.main-content h3 {
  padding-right: 8px;
}
.qs {
  text-align: start;
}
.qs h2 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #e9213d;
}
.show {
  height: max-content !important;
}
.question {
  cursor: pointer;
  height: 30px;
  overflow: hidden;
  padding: 15px;
  background-color: rgba(12, 15, 20, 1);
  margin-bottom: 10px;
  transition: 100ms;
}

.question p {
  font-size: 11px;
}

.question h3 {
  font-size: 13px;
}
@media only screen and (max-width: 992px) {
  .content-header {
    flex-direction: column;
  }
  .content-container {
    margin-top: 30%;
  }
}
@media only screen and (max-width: 768px) {
  .main-content h2 {
    font-size: 10px;
  }
  .main-content p {
    font-size: 11px;
  }
  .main-content h3 {
    font-size: 12px;
  }
  .nav {
    margin: 2rem 0;
  }

  .tutorial-headers {
    font-size: 12px;
  }
}