@font-face {
    font-family: 'silkscreen';
    src: url('../../../fonts/slkscreb-webfont.woff');
}

@font-face {
    font-family: 'dots-line';
    src: url('../../../fonts/BPdotsMinusBold-webfont.woff');
}


body {
    font-family: Verdana, sans-serif;
    background-color: #454544; 
    color:#ffffff;
}

h1 {
    font-family:silkscreen;
    color:#e6d95f;
    font-size:3em;
    text-align:center;
   
}
/*styles for instruction page*/
.instructionarea, .statarea {
    border: inset 3px #b9b8b8;
    background-color: black;
    
    overflow-y: scroll;
    height: 600px;
    
    margin: auto;
    
    font-family: dots-line

}

.playwidth {
    width: 90%;
}

.instructionarea {
    color: #6fb468;
}

    .instructionarea::-webkit-scrollbar, .statarea::-webkit-scrollbar {
        width: 10px;
    }

    .instructionarea::-webkit-scrollbar-track, statarea::-webkit-scrollbar-track {
        background: #2e2e2e;
        
    }

    .instructionarea::-webkit-scrollbar-thumb, .statarea::-webkit-scrollbar-thumb {
        background: #888;
        border: 1px thin #888;
        border-radius: 5px;
    }

.instructionarea p, .statarea p {
    font-size:1.5em;
    padding-left: 10px;
}

.buildingkey {
    display:grid;
    grid-template-columns: 20% 40% 40%;
    width: 85%;
    margin:auto;
}

.keypic {
    font-size: 3em;
    color:#ffffff;
    text-align:center;
}



h2 {
    font-family:silkscreen;
    font-size:2em;
   color:#ffffff;
   text-align:center;
}

/*styles for game page*/
.gamearea {
    border: inset 3px #b9b8b8;
    border-bottom:none;
    background-color: black;
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    overflow:hidden;
    height:550px;
    width:90%;
    margin:auto;
}




.scorearea {
    border: inset 3px #b9b8b8;
    border-top:none;
    background-color: black;
    color:#e6d95f;
    font-family:silkscreen;
    font-size:1.2em;
    
    height:50px;
    margin:auto;
    
}

#scorelabel {
    padding-left:10px;
    padding-top:10px;
    display:inline-block;
    width:fit-content;
    float:left;
}

#statsbutton {
    padding-right:10px;
    padding-top:10px;
    display:inline-block;
    width:fit-content;
    float:right;
    
}

    #statsbutton:hover {
        color: #6fb468;
        cursor: pointer;
    }

    
.hideit {
    visibility: hidden;
}

.showit {
    visibility:visible;
}

.skycontainer {
    display: grid;
    height: 400px;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}

.defendcontainer {
    height:80px;
    width:100%;
    
}



.defender {
    color:#65e2e4;
    font-size:xx-large;
    cursor:pointer;
    margin:auto;
    height:80px;
}

[id*="skyblock"] {
    margin:auto;
}

.laser {
    display: inline-block;
    position: absolute;
    width: 5px;
    height: 20px;
    background-color: #fd1717;
}



.citycontainer {
    display: grid;
    
    grid-template-columns:10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}

    .citycontainer > .horizon {
        height: 70px;
        /*width: 10%;
            border: 2px solid #ffffff;
            color: #e6d95f;
        */
        font-size: 2rem;
        text-align: center;
        background-image: linear-gradient(black,green);
    }

    .citycontainer > .deadblock {
        height: 70px;
        background-image: linear-gradient(black,#70604b);
    }

  .citycolor0 {
      color:#7c2525;
  }  

  .citycolor1 {
      color:#5e4e4c;
  }

  .citycolor2 {
      color:#6e4828;
  }

  .citycolor3 {
      color:#c2c2c2;
  }

  .housecolor0 {
      color:#e7e8b4;
  }

  .housecolor1 {
      color:#b2e5d0;
  }

  .housecolor2 {
      color:#f1eded;
  }

  .housecolor3 {
      color:#f9fba9;
      
  }

  .aliencolor0 {
      color:#2eb52f;
  }

  .aliencolor1 {
      color:#3a61dd;
  }

  .aliencolor2 {
      color:#9b52e9;
  }

  .aliencolor3 {
      color:#ed1af9;
  }

  .alienblock {
      
      font-size:3em;
      
  }

.groundalien {
    font-size: 2em;
    color:#2eb52f;
}

.gameover {
    width:100%;
}

button {
    display: inline-block;
    background-color: #666666;
    color: #ffffff;
    font-size: 1em;
    margin-right: 3px;
}

    button:hover {
        cursor: pointer;
        background-color: #ffffff;
        color: #666666;
    }

.buttoncontain {
    width: fit-content;
    margin: auto;
    padding-top: 5px;
    overflow: hidden;
}

.explosion {
    font-size:2.1em;
    color:#e4971c;
    z-index:100;
}

/*styles for stats page*/
.statslist {
    display: grid;
    grid-template-columns: 70% 30%;
    width: 75%;
    margin:auto;
}



    .statslist > div {
        font-family: dots-line;
        font-size: 1.5em;
        
    }

.statarea p {
    color: #ffffff;
    text-align:center;
}

.statcolor {
    color: #e6d95f;
}

.statcolorgood {
    color: #6fb468;
}

.statcolorbad {
    color: #ba3939;
}

/*dynamic*/
@media screen and (min-width: 900px) {
    .playwidth {
        width:800px;
    }
}

@media screen and (max-height: 750px) {
    .instructionarea, .statarea {
        height:540px;
    }
    .gamearea {
        height:490px;
    }
    
    .skycontainer {
        height:350px;

    }

    .citycontainer > .horizon {
        height: 60px;
    }

    .citycontainer > .deadblock {
        height: 60px;
    }
}