body {
    margin: 0px;
    display: flex;
    width: auto;
    min-width: 800px;
    min-height: 800px;
    justify-content: center;
    font-family: LCD_Solid;
    background-color: #323232;
}
@font-face {
    font-family: LCD_Solid;
    src: url(LCD_Solid.ttf);
}

canvas {
    width: 800px;
    height: 800px;
    z-index: 1;
    position: absolute;
}

#gridOverlay{
    width: 800px;
    height: 800px;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
}

#theGame{
    width: 1400px;
    height: 800px;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#background{
    width: 800px;
    height: 800px;
    position: absolute;
    z-index: 0;
    opacity: 0;
    background-image: url("bilder/background.png");
    background-size: 123%;
}

#statsbar{
    width: 300px;
    height: 800px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    background-color: black;
    color: white;
    font: 15px;
    justify-content: center;
}

#shop{
    width: 300px;
    height: 800px;
    z-index: 10;
    background-color: black;
    color: white;
    font: 15px;
    display: flex;
    flex-wrap: wrap;
}

button{
    width: 150px;
    height: 50px;
}

#towerStats {
    height: 150px;
    margin-top: 10px;
    width: 300px;
}

#startScreen {
    width: 1400px;
    height: 800px;
    background-color: #aaaaaa;
    position: absolute;
    margin-right: auto;
    margin-left: auto;
    z-index: 11;
}

h1 {
    margin-left: 570px;
}

#modes {
    width: 100%;
    height: 700px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.adjust {
    width: 200px;
    height: 150px;
    background-color: #afafaf;
    margin-left: 10px;
}

.adjust:hover {
    animation: border ;
    border: 1px solid black;
}

.adjust:nth-child(odd){
    background-color: rgb(116, 116, 212);
}
.adjust:nth-child(even){
    background-color: rgb(195, 111, 111);
}
.adjust:nth-child(3n){
    background-color: rgb(92, 156, 92);
}

.inputNumber {
    width: 180px;
    height: 30px;
    border: 1px black solid;
    margin-left: 10px;
    margin-top: 5px;
}

/* The slider itself */
.slider {
    margin-left: 10px;
    margin-top: -8px;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 180px; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

#closeButton{
    background-color: transparent;
    position: absolute;
    z-index: 2;
    margin-left: 100px;
    width: 1200px;
    height: 100px;
    border: none;
    font-family: LCD_Solid;
    font-size: 40px;
    text-align: center;
    background-color: #4CAF50;
    margin-top: 50px;
}

#closeButton:hover {
    cursor: pointer;
}

#startButton {
    background-color: transparent;
    position: absolute;
    z-index: 9;
    margin-top: 290px;
    width: 130px;
    height: 130px;
    border: none;
    font-family: LCD_Solid;
    font-size: 40px;
    text-align: center;
    background-color: #4CAF50;
    animation: rave 3s infinite linear;
}

#startButton:hover {
    cursor: pointer;
}

@keyframes rave{
    0% {background-color: green;}
    10%{background-color: red;}
    20%{background-color: blue;}
    30%{background-color: yellow;}
    40%{background-color: black;}
    50%{background-color: greenyellow;}
    60%{background-color: blueviolet;}
    70%{background-color: lightsalmon;}
    80%{background-color: rgb(0, 141, 134);}
    90%{background-color: white;}
    100%{background-color: green;}
}