/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}


/******************************************
/* FONTS
/*******************************************/
@font-face { 
  font-family: myFont; 
  src: url('https://fonts.googleapis.com/css?family=Gentium Plus'); 
} 

* {
   font-family: myFont;
}


/******************************************
/* LAYOUT
/*******************************************/

body{
  background-image: url("../img/empyreanlogo.png");
  background-size: cover;
}

.custom-center{
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

header{
  margin-top: 2%;
  position: relative;
  /* border-top-right-radius: 2%;
  border-top-left-radius: 2%; */
}

p{
  font-size: 2em;
}

.game-description p, .about p{
  font-size: 1.2em;
  color: white;
}

.sidebar p{
  font-size: 2em;
  color: white;
}

.banner{
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  opacity: 1;
}



.game{
  margin: 50px 20px;
}

.game-title {
    color: white;
}





header h1{
  position:absolute;
  width:100%;
  bottom:0;
  text-align:center;
  text-decoration: underline;
  padding-bottom: 1%;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 0 #000;
  font-weight: 600;
  color: white;
}

.main-page{

  width: 80%;
  padding-left: 3%;
  color: white;
  /* box-shadow: 0 4px 8px -2px gray; */
}

.my-nav-link{
  color: white;
  font-family: 'Code Next', Helvetica, sans-serif;
  text-transform: uppercase;
}

.my-nav-link:hover{
  color: cyan;

}

nav{
  margin-top: 1%;
  padding: 0px 5%;
  font-size: 1em;
}

.left-shadow{
  box-shadow: -3px 0px 10px -2px gray;
}

.bottom-shadow{
  box-shadow: 0 4px 10px -2px gray;
/* offset-x offset-y blur spread color*/
}

.my-shadow{
  width: 99%;
}

footer{
  background-color: black;
  width: 100%;
  margin: 2% 0px;
  padding: 0px 13% 2% 13%;
}

.full-footer{
  width: 100%;
  margin: 2% 0px;
  padding: 2% 5% 2% 5%;
  border-top: 2px solid black;
  opacity: 0.5;
}

.footer-container{
  width: 80%;
}

.socials >*
{
  flex-wrap: wrap;
  padding: 0px 5%;
  text-align: center;
}

.socials img{
  height: 30px;
  width: 30px;
}

a{
  text-decoration: none;
  color: white;
}

a:hover{
  color: rgb(94, 163, 94);
}

.active{
  text-decoration: underline;
  color: rgb(81, 136, 81)
}

.fa{
 font-size: 2em;
}

.socials a{
  padding-top: 7px;
}

.socials h4{
  padding-top: 7px;
}

.col-lg-4 img{
  padding-top: 6px;
}

/*Got this from here https://stackoverflow.com/questions/14013924/create-a-dimmed-background-on-click*/
.dimmer
{
    background:#000;
    opacity:0.5;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/*https://stackoverflow.com/questions/19104018/how-to-expand-an-image-in-html-by-clicking-on-it*/
.enlarged {
    color: #424242; 
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(3);
  -ms-transform: scale(3); /* IE 9 */
  -webkit-transform: scale(3); /* Safari and Chrome */
  position: fixed; 
  left: 50%; 
  top: 50%;
    max-width: none;  
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/

/* MOBILE */
@media screen and (min-width:300px) and (max-width:800px) {
    .slimmed-container{
    background-color: black;
    max-width: 100%;
    opacity: 1;
  }

  .sidebar-left
  {
     width: 0%;
     height: 0%;
     position: absolute;
     left: 0;
      top: 0;

      margin: 0px 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-left: 0px;
  }

  .sidebar-right
  {
     width: 0%;
     height: 0%;
     position: absolute;
     right: 0;
      top: 0;

      margin: 0px 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-left: 0px;
  }
  .game .row{
        width: 100%;
        margin-top: 0px;
        margin-left: 0px;
      }
    .about-photo{
        opacity: 1;
        padding-top: 0px;
        padding-bottom: 0px;
        width:40%;
        height:40%;
    }
}

/* DESKTOP AND TABLET */
@media screen and (min-width:800px) {
    .slimmed-container{
        background-color: black;
        max-width: 50%; /*Only should be this if it's desktop!!*/
        opacity: 0.6;
      }

      .sidebar-left
      {
         background-color: black; 
         width: 20%;
         height: 100%;
         position: absolute;
         left: 0;
          top: 0;

          margin: 50px 0px;
          margin-left: 10px;
          padding-top: 30px;
          padding-left: 45px;

      }

      .sidebar-right
      {
         width: 20%;
         height: 100%;
         position: absolute;
         right: 0;
          top: 0;

          margin: 50px 0px;
          margin-left: 10px;
          padding-top: 30px;
          padding-left: 45px;

      }
      .game .row{
        width: 80%;
        margin-top: 100px;
        margin-left: 200px;
      }
      
      .about-photo{
        opacity: 1;
        padding-top: 0px;
        padding-bottom: 0px;
        width:200px;
        height:200px;
    }

}


.pb-5 {
    color: white;
    padding-top: 0px;
    padding-bottom: 0px;
}

.container-fluid {
    color: white;
}

.container-fluid{
    color: white;
}


.about-name{
    font-size:200%;
    color: white;
    opacity: 1;
    padding-top: 0px;
    padding-bottom: 0px;
}

.about-text{
    opacity: 1;
    color: white;
    font-size: 100%;
    
}

.about-company{
    opacity: 1;
    color: white;
    font-size: 150%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}