.main{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:black;
}
.start {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    background-color:black;
}
.game-menu {
    position: absolute;
    display:none;
    top: 50%;
    left: 50%;
    width:1000px;
    height:650px;
    background-position: left -400px top -400px;
    transform: translate(-50%, -50%);
    background-repeat:no-repeat;
    background-image: url("images/m8_vanderhaven_big.jpg");
}
.logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 200px;
    background-size:contain;
    background-repeat: no-repeat;
    background-image: url("images/MeteorBallmetallogo.png");
}
.meteor-sprite {
    position: absolute;
    top: 0;
    left: 275px;
    width: 72px;
    height: 72px;
    background-repeat: no-repeat;
    background-image: url("images/asteroid1.png");
    animation: meteor-spin 3s steps(1) infinite;
}
.menu-nav{
    position:absolute;
    top:225px;
    left:275px;
    bottom:0;
    width:225px;
}
.menu-button {
    position: relative;
    height: 100px;
    width: 210px;
    border-radius: 15px;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    cursor:pointer;
}
.menu-button:hover {
    background-color:chartreuse;
}
.menu-play{
    background-image:url("images/buttons/playmenu.png");
}
.earth {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("images/earthsmall.png");
    opacity: .1;
}
.level-select {
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 650px;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-image: url("images/orion-nebula-hubble.jpg");
    overflow:auto;
}
.level-button {
    position: relative;
    display: inline-block;
    height: 150px;
    width: 150px;
    background-position: left 25px top 25px;
    background-repeat:no-repeat;
    background-image: url('images/earth100.png');
}
.level-button-stars{
    position:absolute;
    bottom:25px;
    height:46px;
    width:100px;
    left:25px;
    background-repeat:no-repeat;
    background-size:contain;
}
.no-stars{
    background-image: url("images/0star.png");
}
.level-button-title{
    position:absolute;
    padding:0;
    margin:0;
    bottom:0;
    left:0;
    right:0;
    height:25px;
    color:white;
    text-align:center;
}
.lock-icon{
    position:absolute;
    background-image:url('images/lock.png');
    background-repeat:no-repeat;
    height:128px;
    width:128px;
    top:5px;
    left:11px;
}
.game-board {
    position: absolute;
    display:none;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 650px;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-image: url("images/space.jpg");
}
.tiles{
    position:absolute;
    top:-175px;
    left:0;
    height:1000px;
    width:1000px;
    margin:0;
    padding:0;
    transform: scale(.5);
}
.tile{
    position:absolute;
    margin:0;
    padding:0;
    height:125px;
    width:125px;
    background-repeat:no-repeat;
    background-size:contain;
}
.tile-dark {
    background-image: url("images/DarkSquareGlass.png");
}
.tile-light {
    background-image: url("images/LightSquareGlass.png");
}
.tile:hover {
    background-image: url("images/SelectedTile.png");
}

.explosiion-sprite {
    position: absolute;
    height: 64px;
    width: 64px;
    top: 225px;
    left: 500px;
    background-image: url("images/explosion_transparent.png");
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 0;
    animation: explosion 2s steps(1) forwards;
}


/*Game pieces, case sensitive (I think)*/
.piece-Shuttle {
    background-image: url("images/gamepieces/Shuttle.png");
}

.piece-Satellite {
    background-image: url("images/gamepieces/Satellite.png");
}

.piece-Astronaut {
    background-image: url("images/gamepieces/Astronaut.png");
}

.piece-BackSlash {
    background-image: url("images/gamepieces/BackSlash.png");
}

.piece-ForwardSlash {
    background-image: url("images/gamepieces/ForwardSlash.png");
}

.piece-S_SE {
    background-image: url("images/gamepieces/S_SE.png");
}

.piece-N_NW {
    background-image: url("images/gamepieces/N_NW.png");
}

.piece-E_NE {
    background-image: url("images/gamepieces/E_NE.png");
}

.piece-W_SW {
    background-image: url("images/gamepieces/W_SW.png");
}

.piece-E_SE {
    background-image: url("images/gamepieces/E_SE.png");
}

.piece-N_NE {
    background-image: url("images/gamepieces/N_NE.png");
}

.piece-S_SW {
    background-image: url("images/gamepieces/S_SW.png");
}

.piece-W_NW {
    background-image: url("images/gamepieces/W_NW.png");
}

.piece-Horizontal {
    background-image: url("images/gamepieces/Horizontal.png");
}

.piece-Vertical {
    background-image: url("images/gamepieces/Vertical.png");
}

.piece-RedSwitch {
    background-image: url("images/gamepieces/RedSwitch.png");
}

.piece-BackSlashRed {
    background-image: url("images/gamepieces/BackSlashRed.png");
}

.piece-ForwardSlashRed {
    background-image: url("images/gamepieces/ForwardSlashRed.png");
}

.piece-S_SERed {
    background-image: url("images/gamepieces/S_SERed.png");
}

.piece-N_NWRed {
    background-image: url("images/gamepieces/N_NWRed.png");
}

.piece-E_NERed {
    background-image: url("images/gamepieces/E_NERed.png");
}

.piece-W_SWRed {
    background-image: url("images/gamepieces/W_SWRed.png");
}

.piece-E_SERed {
    background-image: url("images/gamepieces/E_SERed.png");
}

.piece-N_NERed {
    background-image: url("images/gamepieces/N_NERed.png");
}

.piece-S_SWRed {
    background-image: url("images/gamepieces/S_SWRed.png");
}

.piece-W_NWRed {
    background-image: url("images/gamepieces/W_NWRed.png");
}

.piece-BackSlashPerm {
    background-image: url("images/gamepieces/BackSlashPerm.png");
}

.piece-ForwardSlashPerm {
    background-image: url("images/gamepieces/ForwardSlashPerm.png");
}

.piece-S_SEPerm {
    background-image: url("images/gamepieces/S_SEPerm.png");
}

.piece-N_NWPerm {
    background-image: url("images/gamepieces/N_NWPerm.png");
}

.piece-E_NEPerm {
    background-image: url("images/gamepieces/E_NEPerm.png");
}

.piece-W_SWPerm {
    background-image: url("images/gamepieces/W_SWPerm.png");
}

.piece-E_SEPerm {
    background-image: url("images/gamepieces/E_SEPerm.png");
}

.piece-N_NEPerm {
    background-image: url("images/gamepieces/N_NEPerm.png");
}

.piece-S_SWPerm {
    background-image: url("images/gamepieces/S_SWPerm.png");
}

.piece-W_NWPerm {
    background-image: url("images/gamepieces/W_NWPerm.png");
}

.piece-HorizontalPerm {
    background-image: url("images/gamepieces/HorizontalPerm.png");
}

.piece-VerticalPerm {
    background-image: url("images/gamepieces/VerticalPerm.png");
}

.piece-AlienShip {
    background-image: url("images/gamepieces/AlienShip.png");
}

.piece-HorizontalRed {
    background-image: url("images/gamepieces/HorizontalRed.png");
}

.piece-VerticalRed {
    background-image: url("images/gamepieces/VerticalRed.png");
}