body {
  background-color: #ffca00;
  min-height: 100vh;
}

.black-top-tab {
  position: relative;
  background-color: black;
  height: 50px;
  z-index: 10;
}

.black-top-tab::before {
  content: "";
  position: absolute;
  top: 100%;
  width: 50%;
  border-top: 40px solid black;
  border-right: 30px solid transparent;
  border-left: 0 solid transparent;
  border-bottom: 0 solid transparent;
}

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 99;
}

footer .nav-bottom {
  background-color: #1b1b19;
  width: 100%;
  height: 50px;
}

.black-bot-tab {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
  z-index: 10;
}

.black-bot-tab::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 50%;
  border-bottom: 40px solid black;
  border-right: 0 solid transparent;
  border-left: 30px solid transparent;
  border-top: 0 solid transparent;
}

main {
  position: relative;
  height: calc(100vh - 220px);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.black-bot-tab .mobile-content {
  display: none;
}

.mobile-content p {
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  text-indent: 2em;
  font-style: italic;
  overflow: hidden; */
}

@media screen and (max-width: 992px) {
  main {
    height: 55vh;
  }

  .black-top-tab {
    display: none;
  }

  .black-bot-tab {
    height: calc(45vh - 80px);
  }

  .black-bot-tab::before {
    width: 40%;
  }

  .black-bot-tab .mobile-content {
    display: block;
  }

  footer .nav-bottom {
    height: 40px;
  }
}

@media screen and (max-width: 1100px) and (orientation:landscape) {
  body * {
    display: none !important;
  }

  body {
    background-color: #aaa !important;
  }
}