@font-face {
    font-family: 'silkscreen';
    src: url('../../../fonts/slkscreb-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;
   
}

.gamearea {
    border: inset 3px #b9b8b8;
    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:600px;
    width:90%;
    margin:auto;
}

.skycontainer {
    display: grid;
    height: 450px;
    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,#9f7336);
    }

  .citycolor0 {
      color:#7c2525;
  }  

  .citycolor1 {
      color:#5e4e4c;
  }

  .citycolor2 {
      color:#6e4828;
  }

  .citycolor3 {
      color:#c2c2c2;
  }

  .housecolor0 {
      color:#e7e8b4;
  }

  .housecolor1 {
      color:#b2e5d0;
  }

  .housecolor2 {
      color:#f1eded;
  }

  .housecolor3 {
      color:#f9fba9;
      
  }

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;
}