@import "variables";
@import "globals";

.section-heading,
.section-subheading {
  padding-top: 2em;
}

.section-title {
  //padding-top: 1em;
  line-height: 0.5;
  text-align: center;
  //padding: 1em;
}

// the bottom section
h3.section-title {
  padding-top: 1em;
}

// --------------------------
//        add horizontal lines around the section title.
//----------------------------
.section-title span:before,
.section-title span:after {
  content: "";
  position: absolute;
  height: 8px;
  border-bottom: 1.7px solid black;
  top: 0;
  width: 400px;
}

.section-title span:before {
  right: 100%;
  margin-right: 10px;
}

.section-title span:after {
  left: 100%;
  margin-left: 10px;
}

// Topics
.random-topics {
  margin-top: .5em;
}

.random-section-title {
  bottom: -3px;

}

// buttons
.random-topic {
  button {
    background: white;
  }
  // topics
  .view-topics-link {
    justify-self: left;
    bottom: 36px;
    position: relative;
    padding: 0px;
  }
  .view-all-topics {
    left: 0;
    //position: absolute;
    justify-self: left;
    padding: 1em 0px;
    padding-right: 5px;
  }
  // shuffle
  .shuffle-button {
    justify-self: right;
    bottom: 36px;
    position: relative;
    padding: 10px;
    padding-right: 0px;
  }
}

// fonts
.shuffle-button, .view-all-topics {
  span.arabic-text {
    font-size: 18px;
  }
  span.english-text {
    font-size: 16px;
  }
}

.buttons-grid {
  height: 8px;
}

span.english-text.bold-english-text{
  font-size: 28px;
}
span.arabic-text.bold-arabic-text{
  font-size: 28px;
}