/* General Reset */
@font-face {
  font-family: 'montserrat';
  src: url('../fonts/montserrat.woff') format('woff');
  src: url('../fonts/montserrat.woff2') format('woff2');
  src: url('../fonts/montserrat.ttf') format('truetype');
}
.dropdown {
  display: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  letter-spacing: 1.5px;
}
h1 {
  font-family: montserrat;
}
html, body {
  height: 100%;
  line-height: 1.2;
  background-color: rgb(26, 26, 26);
  background-attachment: fixed;
  height: 100%;
  min-height: 100%;
}
a {
  text-decoration: none;
  font-weight: bold;
}
ul {
  display: flex;
  list-style: none;
}
#active {
  color: orangered;
}


/* Header */
.mainNavigation {
  padding: 16px 32px 16px 32px;
  text-transform: uppercase;
  display: flex;
  background-color: rgb(26, 26, 26);
  color: white;
  width: 100%;
  align-items: center;
}
.mainNavigation img {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
}
.mainNavigation nav {
  text-transform: uppercase;
}
.mainNav_list li {
  transform: translateX(50%);
  margin: 0 15px;
}
.mainNav_list li a{
  font-size: 14px;
  font-weight: 600;
}
.mainNavigation a {
  border-radius: 15px;
  font-weight: bold;
  font-size: 15px;
  color: white;
  transition: 0.1s;
}
.dropdown {
  width: 200px;
  position: relative;
  overflow: visible;
}
.dropdown button {
  background-color:transparent;
  border: none;
  color: white;
  width: 100%;
  text-align: right;
  font-weight: bolder;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1.2;
}
.dropdown-content {
  display: none;
  position: absolute;
  width: 200px;
  right: 0;
  padding: 10px;
  overflow: auto;
  background-color: rgba(26, 26, 26, 1);
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a {
    display: block;
    color: #fff;
    padding: 5px;
    text-decoration: none;
    transition: 0.1s;
    text-align: right;
    font-size: 15px;
}
.dropdown-content a:hover {
  background-color: orangered;
  padding: 8px;
}


/* Home */
.homeWrapper {
  color: white;
}
.topContentContainer {
  background-image: url(images/sunsetplaceholder.jpg);
  width: 100%;
  background-size:cover;
  background-repeat: no-repeat;
  text-align: center;
  display: block;
  width: 100%;
  height: 300px;
  position: relative;
  display: flex;
}
.topContentContainer div {
  width: max-content;
  height: max-content;
  margin: auto;
  display: flex;
  flex-direction: column;

  justify-content: space-between;
  height: 50%;
}
.topContentContainer div h1 {
  color: rgb(26, 26, 26);
  font-size: 45px;
  font-family: montserrat;
  margin: 0;
  text-transform: uppercase;
  font-weight: 800;
}
.topContentContainer div p {
  color: rgb(26, 26, 26);
  margin: 0;
  font-family: montserrat;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-align: center;
}
.topContentContainer div a {
  color: rgb(26, 26, 26);
  font-size: 20px;
  font-weight: 600;
  font-family: montserrat;
  text-transform: uppercase;
  margin: 0;
}
.topContentGradient {
  background-image: linear-gradient(180deg, rgba(1, 1, 1, 0), rgba(26,26,26,1) 70%);  
  position: absolute;
  bottom: 0;
}
.highlightGameContainer {
  width: 45%;
  margin: 60px auto;
}
.highlightGameContainer h1{
  margin: 10px;
}
/* Highlight Game Contianer */
.highlightGameWrapper {
  background-image: url(/images/biggame-placeholderimage.jpg);
  border-radius: 15px;
  width: 100%;
  margin:  auto;
  padding: 30px;
}
.highlightGameWrapper hr {
  width: 200px;
  border-top: solid 2px;
  margin: 20px auto 20px;
  border-top-color: white;
}
.highlightGameWrapper a{
  color: white;
  display: block;
  text-align: center;
  text-transform: uppercase;
}
.titleWrapper {
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: max-content;
  padding: 10px 100px 10px 100px;
  border-radius: 10px;
}
.titleWrapper h1{
  text-transform: uppercase;
  line-height: 0.7;
  align-self: flex-end;
}




/* Footer */
footer {
  background-color: rgb(15, 15, 15);
  color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 16px 32px 16px 32px;
  width: 100%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.footer_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.footer_top img {
  display: block;
}
.footer_siteLogo {
  height: max-content;
  margin-top: auto;
  margin-bottom: auto;
}
.footer_siteLogo a img {
  display: block;
}
.footer_socialList {
  list-style: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  justify-content: space-between;
  width: 60px;
}
.footer_copyright {
  font-size: 14px;
  font-weight: 100;
  letter-spacing: normal;
  font-family: "Source Sans Pro", sans-serif;
}


/* Site Soon */
.siteSoonContainer {
  margin: 100px 100px 0;
  justify-content: space-between;
  text-align: center;
  display: block;
  font-size: 20px;
  color: black;
}
.siteSoonContainer *{
  letter-spacing: normal;
  color: white;
}
.siteSoonContainer a {
font-weight: bold;
color: orangered;
font-size: larger;
}
.backToSiteHeader {
  background-color: rgb(26, 26, 26);
  border-bottom: solid 2px rgb(54, 54, 54);

  padding: 2px;
  width: 100%;
  text-align: center;
}
.backToSiteHeader a {
  color: white;
  font-weight: 100;
  font-size: 14px;
  transition: 0.1s;
}
.backToSiteHeader a:hover {
  color: orangered;
}


/* Responsive */
@media (max-width: 700px) {
  .dropdown {
    display: block;
  }
  .siteSoonContainer {
    font-size: 15px;
    margin: auto;
    background-attachment: fixed;
  }
  .topContentContainer h1 {
    font-size: 1px;
  }
  .mainNavigation {
    justify-content: space-between;
    padding: 8px 16px 8px 16px;

  }
  footer {
    padding: 8px 16px 8px 16px;

  }
  #footer_hewcomStraightLogo {
height: 15px;
  }
  .mainNav_list {
    display: none;
  }
}


/* About Page */
.summaryContainer {
  padding: 5px;
  transform: translateY(100px);
  width: 75%;
  margin: auto;
}
.summaryContainer h1,
.summaryContainer p {
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: center;
}

.summaryContainer h1 {
  font-size: 50px;
}
.portraitContainer {
  width: max-content;
  margin: 20px auto;
  background-image: linear-gradient(90deg, rgba(209, 209, 209, 0.507), rgba(167, 167, 167, 0.514));
  border-radius: 10px;
  line-height: 0;
  
}
.portraitContainer img{
  margin: auto;
  border-radius: 20px;
  padding: 15px;
  display: flex;

}


/* 404 Page */
.unavailable_error {
  text-align: center;
  margin: 100px;
}
.unavailable_error div {
  font-size: 20px;
}
.unavailable_error div a {
  color: orangered;
}