/* frame.html */
.main {
  margin-top: 50px;
}

.main > section {
	text-align: left;
	width: 90%;
	max-width: 960px;
	margin: 0 auto;
}

.footer {
  margin-top: 10px;
}

/* text manipulation */

.text-center {
  text-align: center !important;
}

.text-justify {
  text-align: justify !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* div manipuation */

.v-align-m {
  vertical-align: middle;
}

.w-90 {
  width: 90%;
}

/* button colors */

.color-discord {
	background-color: #7289da;
}

/* component card */
.card {
	border: none;
	background-color: #3d3b3b;
}

.card img {
	object-fit: cover;
	width: 100%;
	height: 200px;
}

.card.domains h3 {
  margin: 0;
  padding: 0;
}

/* component hero */
.hero {
  position: relative;
  width: 100%;
  /* http://stackoverflow.com/a/28151062/938236 */
  height: 40vh;
  transition: height 999999s;
  text-align: center;
  min-height: 300px;
  color: #fff;
  padding: 1px 0;
  background-color: #424242;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  background-size: cover;

  /* Vertical center for the content */
  .content {
    position: relative;
    top: 45%;
    transform: translateY(-50%);
  }

  h1 {
    font-size: 3em;
    line-height: 1;
    padding: 0;
  }

  p {
    margin: 0;
  }

  .slogan {
    font-size: 1.3em;
  }

  .npm {
    max-width: 720px;
    color: $black;
    margin-bottom: 0;
    text-align: center;
    border-radius: 0;
    margin: 1.3em auto 0.3em;

    &.slim,
    &.wide {
      display: none;
    }

    &.slim {
      @media (max-width: 700px) {
        display: block;
        max-width: 500px;
      }
    }

    &.wide {
      @media (min-width: 700px) {
        display: block;
      }
    }
  }

  .links a {
    color: $black;
    box-shadow: 0 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
  }

  .links a:hover {
    box-shadow: 0 2px $black;
  }

  .links a:active {
    background: none;
    border-radius: 0;
  }

  @keyframes bounce {
    from {
      bottom: 20px;
    }
    70% {
      bottom: 10px;
    }
    to {
      bottom: 20px;
    }
  }
}

.transparent ~ .hero .keepgoing {
  opacity: 1;
}

@media all and (max-width: 960px) {
  .hero {
    background-attachment: scroll;
  }
}

/* backgrounds */
.bg-responsive {
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  background-size: cover;
}

.bg-battlebit {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url(/static/images/battlebit/frontend/battlebit.webp);
}

.bg-battlebit-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url(/static/images/battlebit/frontend/battlebit-300.webp);
}

.bg-battlefield {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(/static/images/battlefield/frontend/battlefield.webp);
}

.bg-battlefield-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(/static/images/battlefield/frontend/battlefield-300.webp);
}

.bg-battlefront {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(/static/images/battlefront/frontend/battlefront.webp);
}

.bg-battlefront-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(/static/images/battlefront/frontend/battlefront-300.webp);
}

.bg-counterstrike {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(/static/images/counterstrike/frontend/counterstrike.webp);
}

.bg-counterstrike-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(/static/images/counterstrike/frontend/counterstrike-300.webp);
}

.bg-farmsim {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/static/images/farmsim/frontend/farmsim.webp);
}

.bg-farmsim-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/static/images/farmsim/frontend/farmsim-300.webp);
}

.bg-kandrunet {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/static/images/kandrunet/frontend/kanrunet.webp);
}

.bg-kandrunet-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/static/images/kandrunet/frontend/kandrunet-300.webp);
}

.bg-palworld {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(/static/images/palworld/frontend/palworld.webp);
}

.bg-palworld-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(/static/images/palworld/frontend/palworld-300.webp);
}

.bg-retrowan {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/static/images/retrowan/frontend/retrowan.webp);
}

.bg-retrowan-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/static/images/retrowan/frontend/retrowan-300.webp);
}

.bg-warfork {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(/static/images/warfork/frontend/warfork.webp);
}

.bg-warfork-300 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(/static/images/warfork/frontend/warfork-300.webp);
}