html {
  font-size: 16px;
}

#mainView {
  /*min-width: 600px;*/
  /*min-height: 337.5px;*/
  /* min-width: 700px; */
  /* min-height: 393.75px; */
}

@media (min-aspect-ratio: 16/9) {
  #content {
    height: 92%;
    margin: auto;
  }
}

@media (min-aspect-ratio: 16/9) {
  html, body {
    height:100%;
  }

  #mainView {
    /* height: 100vh; */
    height:100%;
    margin: auto;
  }
}

@media (max-aspect-ratio:15.999/9) {
  #mainView {
    width: 100vw;
    height: 100%;
    overflow-y: visible;
  }
}

@media (orientation: portrait) {
  #heading {
    font-size: 3vw;
  }
}

.backbtn:hover {
  transform: scale(1.2);
}

.actionbtn:hover {
  transform: scale(1.2);
}

@media (max-aspect-ratio:15.999/9) {
  .pageTitle {
    font-size: calc(2.9vw + 0.4rem);
  }
}

@media (max-aspect-ratio:15.999/9) and (min-width:1921px) {
  .pageTitle {
    /*font-size: 4.21875vw;*/
  }
}

@media (min-aspect-ratio: 16/9) and (max-height: 415px) {
  .itemTitle {
    font-size: max(7vh,23.625px);
  }
}

@media (min-aspect-ratio: 16/9) and (min-height: 416px) {
  .itemTitle {
    font-size: calc(4vh + 1rem);
  }
}

@media (max-aspect-ratio:15.9999/9) {
  .actionbtn {
    font-size: calc(1.7vw + 0.4rem);
  }
}

@media (min-aspect-ratio:16/9) and (max-height: 415px) {
  .pageText {
    font-size: max(3.84vh, 12.96px);
  }
}

@media (min-aspect-ratio:16/9) and (min-height: 416px) {
  .pageText {
    font-size: calc(1.2vh + 1rem);
  }
}

@media (min-aspect-ratio:16/9) and (min-height: 1081px) {
  .pageText {
    /*font-size: 3.84vh;*/
  }
}

@media (max-aspect-ratio:15.999/9) {
  .pageText {
    font-size: calc(1.45vw + 0.4rem);
  }
}

@media (max-aspect-ratio:15.999/9) and (min-width: 1921px) {
  .pageText {
    /*font-size: 2.16vw;*/
  }
}

@media (min-aspect-ratio: 16/9) {
  #top-bar {
    height: 8%;
  }
}

@media (max-aspect-ratio: 15.999/9) {
  #top-bar {
    height: 10vh;
  }
}

@media (min-aspect-ratio: 16/9) and (min-height: 1081px) {
  .itemTitle {
    /*font-size: 5.5vh;*/
  }
}

@media (min-aspect-ratio: 16/9) and (min-height: 1081px) {
  .actionbtn {
    /*font-size: 4vh;*/
  }
}

@media (min-aspect-ratio: 16/9) and (min-height: 416px) {
  .actionbtn {
    font-size: calc(2vh + 1rem);
  }
}

@media (min-aspect-ratio: 16/9) and (max-height: 415px) {
  .actionbtn {
    font-size: max(5vh,16.875px);
  }
}

@media (max-aspect-ratio: 15.999/9) {
  .itemTitle {
    font-size: calc(2.9vw + 0.4rem);
  }
}

@media (max-aspect-ratio: 15.999/9) {
  .homebtn {
    width: calc(0.3rem + 1.5vw);
    height: calc(0.3rem + 1.5vw);
  }
}

@media (min-aspect-ratio: 16/9) and (max-height: 415px) {
  .homebtn {
    min-width: 15px;
    min-height: 15px;
  }
}

@media (min-aspect-ratio: 16/9) and (min-height: 1081px) {
  .homebtn {
    /*width: 3vh;*/
    /*height: 3vh;*/
  }
}

@media (min-aspect-ratio: 16/9) {
  .homebtn {
    width: calc(0.6rem + 2vh);
    height: calc(0.6rem + 2vh);
  }
}

@media (min-aspect-ratio:16/9) and (max-height: 415px) {
  .pageTitle {
    font-size: max(7.5vh, 25.313px);
  }
}

@media (min-aspect-ratio:16/9) and (min-height: 416px) {
  .pageTitle {
    font-size: calc(4vh + 1rem);
  }
}

@media (min-aspect-ratio:16/9) and (min-height: 1081px) {
  .pageTitle {
    /*font-size: 7.5vh;*/
  }
}

@media (min-aspect-ratio: 16/9) {
  .activityFrame {
    height: 100%;
    width: auto;
  }
}

.activityFrame {
  width: 100%;
}

@media (max-aspect-ratio:15.999/9) {
  body {
    overflow-y: visible;
  }
}

.wordBtn {
  color: black;
  background: none;
}

.wordBtn:hover {
  background-color: #DBDBDB;
  color: #000000;
  border-radius: 5%;
}

.wordBtn-check:checked + .wordBtn, .wordBtn.active, .wordBtn.show, .wordBtn:first-child:active, :not(.btn-check) + .wordBtn:active, .wordBtn:focus {
  color: #FFFFFF;
  background-color: #494949;
  border-radius: 5%;
}

.nav-link {
  color: black;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #FFFFFF;
  background-color: #494949;
  border-radius: 5%;
}

.nav-link:focus, .nav-link:hover {
  background-color: #DBDBDB;
  color: #000000;
  border-radius: 5%;
}

.wordBtn.active {
  display: inline-flex;
  font-family: 'Source Sans 3', sans-serif;
  color: #FFFFFF;
  background-color: #494949;
  border-radius: 5%;
}

.wordBtn {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-focus-color: #000;
  --bs-btn-active-color: #fff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
}

@media (min-aspect-ratio: 16/9) and (max-height: 480px) {
  .pageText {
    font-size: 3.84vh;
    margin-bottom:0;
    padding-top:2vh;
    padding-bottom:1vh;
  }
  .pageTitle {
    font-size: 7.5vh;
    margin-bottom:0;
    padding-bottom:2vh;
  }

  .itemTitle {
    font-size: 7vh;
    margin-bottom:0;
    padding-bottom:0.5vh;
  }
  
  .actionbtn {
    font-size: 5vh;
  }

  p{
    margin-bottom:0;
    padding-bottom:1vh;
  }

  .carousel-indicators{
    margin-bottom:0;
  }
}

@media (max-aspect-ratio: 15.999/9) and (max-width: 700px) {
  .pageTitle {
    font-size: 4.21875vw;
    margin-bottom:0;
    padding-bottom:2vw;
  }

  .pageText {
    font-size: 2.3vw;
    padding-bottom:2vw;
    padding-top:2vw;
    margin-bottom:0;
  }

  .itemTitle {
    font-size: 3.5vw;
    padding-bottom:2vw;
    margin-bottom:0;
  }

  .actionbtn {
    font-size: 2.5vw;
  }

  p{
    margin-bottom:0;
    padding-bottom:2vw;
  }

  .carousel-indicators{
    margin-bottom:0;
  }
}