#game {
    border: 1px solid black;
    margin-top: 10vh;
}

.game-center-outer-div {
    position:fixed;
    left:50%; 
}

.game-center-outer-div .game-center-inner-div {
        position:relative; 
        left:-50%;
}

#mute-button {
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: absolute;
    top: 30px;
    left: 30px;
}

#gameover {
    margin-top: 10vh;
    width: 600px;
    height: 750px;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.game-over-div {
    position:fixed;
    left:50%; 
}

.game-over-div .game-over-div-inner {
    position:relative; 
    left:-50%;
}

#youlose {
    padding-top: 100px;
    padding-left: 58px;
    display: none;
}

#youwon {
    padding-top: 100px;
    padding-left: 88px;
    display: none;
}

#play-again {
    font-family: "Big Shoulders Stencil Display";
    cursor: pointer;
    color: white;
    font-size: 4em;
    padding-top: 130px;
    padding-left: 189px;
    display: none;
}

#play-again:hover {
    color: pink;
}

#start {
    margin-top: 10vh;
    width: 600px;
    height: 750px;
}

.start-div {
    position:fixed;
    left:50%; 
}

.start-div .start-div-inner {
    position:relative; 
    left:-50%;
}

#play {
    cursor: pointer;
    display: inline-block;
    animation: pulse 2s infinite;
    padding-left: 150px;
    padding-top: 76px;
}

#play:hover {
    transform: scale(1.33);
}

#wide-paddle-brick {
    font-family: "Big Shoulders Stencil Display";
    color: white;
    font-size: 2em;
    padding-top: 83px;
    padding-left: 52px;
}

#speed-brick {
    padding-left: 218px;
}

#normal-brick {
    font-family: "Big Shoulders Stencil Display";
    color: white;
    font-size: 2em;
    padding-top: 42px;
    padding-left: 219px;
}

#ghost-brick {
    font-family: "Big Shoulders Stencil Display";
    color: white;
    font-size: 2em;
    padding-top: 4px;
    padding-left: 57px;
}

#big-ball-brick {
    padding-left: 223px;
}

#logo {
    padding-left: 51px;
    padding-top: 100px;
}

@keyframes pulse {
    0%,
    100% {
      animation-timing-function: ease-in;
    }
    50% {
      transform: scale(1.33);
    }
  }

body {
    background: url("../img/bg_tile.jpg");
    background-repeat: repeat;
    background-position: center;
    z-index:-1;
}

.mute_bg {
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 50%, purple 50%);
  bottom:0;
  left:-120%;
  position:fixed;
  right:0%;
  top:0;
  z-index:-1;
}

.backlight:before, .backlight:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 13vh;
    background: linear-gradient(45deg, #fb00a7, #0000eb, #03ff03,#ffff08, #f30101, #fb00a7, #0000eb, #03ff03,#ffff08, #f30101);
    background-size: 500%;
    width: 600px;
    height: 700px;
    z-index: -1;
    animation: rgbEffect 60s linear infinite;
}

@keyframes rgbEffect {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 500% 0;
	}
	100% {
		background-position: 0 0;
	}
}

.backlight:after {
	filter: blur(80px);
}