/**** Theme Fonts ********/
/***  THEME COLORS **********/
* {
  margin: 0;
  padding: 0; }

body {
  background: url("http://img.lum.dolimg.com/v1/images/Death-Star-I-copy_36ad2500.jpeg?region=0%2C31%2C1600%2C800") no-repeat center center fixed;
  background-size: cover;
  height: 100%; }

.wrapper {
  width: 1050px;
  margin: 0 auto;
  color: #ffe81f;
  font-family: "Starjedi", "distant_galaxyregular", sans-serif;
  font-weight: bold; }

#panel {
  background: #002b36;
  min-height: 700px;
  margin: 5%;
  border-top: 20px solid #ffe81f;
  border-bottom: 20px solid #ffe81f;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 20px 100%;
  -moz-background-size: 20px 100%;
  background-size: 20px 100%;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #ffe81f 0%, #ffe81f 100%), -webkit-linear-gradient(top, #ffe81f 0%, #ffe81f 100%);
  background-image: -moz-linear-gradient(top, #ffe81f 0%, #ffe81f 100%), -moz-linear-gradient(top, #ffe81f 0%, #ffe81f 100%);
  background-image: -o-linear-gradient(top, #ffe81f 0%, #ffe81f 100%), -o-linear-gradient(top, #ffe81f 0%, #ffe81f 100%);
  background-image: linear-gradient(to bottom, #ffe81f 0%, #ffe81f 100%), linear-gradient(to bottom, #ffe81f 0%, #ffe81f 100%);
  border-radius: 15px; }

/*** CONTROLS ***/
.controls {
  text-align: center;
  width: 100%;
  margin: 0 auto; }
  .controls h1 {
    margin: 10%;
    font-size: 3rem; }
  .controls .buttons a {
    display: inline-block;
    margin: 5px;
    text-decoration: none; }

.btn {
  padding: 15px 30px;
  border-radius: 5px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 2rem; }

.btn-small {
  border-radius: 5px; }

.btn:hover {
  background: #ffed52; }

.btn-empire {
  background: #465ee2; }

.btn-empire:hover {
  background: #7284e9; }

.btn-rebel {
  background: #a61313; }

.btn-rebel:hover {
  background: #d41818; }

/*** GRID ***/
.grid {
  display: block;
  height: 400px;
  width: 700px;
  margin: 0 auto;
  margin-top: 10px; }

.cell {
  display: inline-block;
  min-height: 70px;
  margin-top: 10px;
  width: 32%;
  border: 1px solid #ffe81f;
  font-size: 70px;
  text-align: center; }

.center {
  margin: 0 auto;
  text-align: center; }

#top-left {
  border-top: none;
  border-left: none; }

#top {
  border-top: none; }

#top-right {
  border-top: none;
  border-right: none; }

#middle-left {
  border-left: none; }

#middle-right {
  border-right: none; }

#bottom-left {
  border-left: none;
  border-bottom: none; }

#bottom {
  border-bottom: none; }

#bottom-right {
  border-right: none;
  border-bottom: none; }

.turns {
  width: 90%;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 10px; }
  .turns .player-turn {
    display: inline-block;
    width: 90px;
    padding: 20px;
    margin: 0 auto; }
  .turns .player-turn:first-child {
    margin-right: 20%; }
  .turns .player-turn:last-child {
    margin-left: 20%; }

.score .player-score {
  display: inline-block;
  margin: 20px; }

.reset {
  display: inline-block;
  margin: 50px;
  margin-bottom: 5px;
  margin: 0 auto;
  padding: 9px;
  width: 190px;
  border: 2px dashed #ffe81f;
  border-radius: 50px; }
  .reset a {
    color: #ffe81f;
    text-decoration: none; }

.reset:hover {
  border: 2px dashed #ffe81f;
  border-radius: 50px;
  color: #ffe81f; }

/***** CONTROL SELECTION *******/
.control-selection {
  width: 80%;
  margin: 0 auto;
  margin-top: 10%; }
  .control-selection h1 {
    font-size: 4rem; }
  .control-selection .buttons {
    font-size: 8rem; }
    .control-selection .buttons .btn {
      background: #a61313;
      text-decoration: none; }
    .control-selection .buttons .btn:hover {
      background: #465ee2; }

/* Laptops and higher*/
@media (max-width: 1080px) {
  .wrapper {
    width: 90%; }
  .computer .screen {
    border: 30px solid #FFFFFF; } }

/* Tablet */
@media (max-width: 800px) {
  .wrapper {
    width: 90%; }
  .computer .screen {
    border: 30px solid #FFFFFF; }
  .computer .base {
    display: hidden; } }

/* Mobile */
@media (max-width: 425px) {
  .wrapper {
    width: 90%; }
  .jumbotron {
    font-size: 1rem; }
  .computer {
    height: 250px; }
    .computer .screen {
      border: 30px solid #FFFFFF;
      height: 200px; }
    .computer .base {
      display: none; } }

@font-face {
    font-family: 'distant_galaxyregular';
    src: url('fonts/DISTGRG_-webfont.eot');
    src: url('fonts/DISTGRG_-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DISTGRG_-webfont.woff') format('woff'),
         url('fonts/DISTGRG_-webfont.ttf') format('truetype'),
         url('fonts/DISTGRG_-webfont.svg#distant_galaxyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Starjedi';
    src: url('fonts/Starjedi.eot');
    src: url('fonts/Starjedi.eot?#iefix') format('embedded-opentype'),
         url('fonts/Starjedi.woff') format('woff'),
         url('fonts/Starjedi.ttf') format('truetype'),
         url('fonts/Starjedi.svg#distant_galaxyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}