@charset "UTF-8";

:root {
  --breakit-body-bg: black;
  --breakit-font-color: white;
  --breakit-lifes-def-color: #8B0000;
  --breakit-hud-color: cornflowerblue;
  --breakit-menubuttons-color: darkcyan;
  --breakit-menubuttons-border: lightskyblue;
  --breakit-background-fallback: gray;
  --breakit-margin-x: 1px;
  --breakit-padding: 1vw;
  --breakit-hud-padding-x: 0;
  --breakit-lifes-offset: 0.15vw;
  --breakit-lifes-borderWidth: 1px;
  --breakit-font-main: "Comic Sans MS", cursive, sans-serif;
  --breakit-aspect-ratio: 0.5625;                 /* 16:9 */
  --breakit-aspect-ratio_frac: 16 / 9;
  --breakit-width: calc(100vw - 2 * var(--breakit-margin-x) - 2 * var(--breakit-padding));
  --breakit-fontsize-1: calc(1 / var(--breakit-aspect-ratio) * 3vh);
  --breakit-fontsize-2: calc(1 / var(--breakit-aspect-ratio) * 2vh);
  --breakit-fontsize-3: calc(1 / var(--breakit-aspect-ratio) * 1vh);
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--breakit-font-main);
  letter-spacing: 0.1vw;
  background-color: var(--breakit-body-bg);
  overflow: hidden;
}

#breakit {
  /* ratio keeping mechanism */
  display: flex;
  aspect-ratio: var( --breakit-aspect-ratio_frac);
  width: min( 95vw, 95vh * var( --breakit-aspect-ratio_frac) );    /* val1= maxWidth, val2=maxHeight */
  /* cosmetical stuff */
  justify-content: center;
  align-items: center;
  padding: var(--breakit-padding);
  background: url('../gfx/bg-startScreen.jpg'), var(--breakit-background-fallback);
  background-size: cover;
  align-self: center;
  margin: var(--breakit-margin-x);
}

#breakit > div {
  margin:  0;
  padding: 0;
  height: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
}

#hud > div {
  margin: 0 0 0 var(--breakit-padding);
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  overflow: hidden;
}

.spielfeld,
.menuScreen {
  flex: 75% 1 1;
  overflow: hidden;
  left: 0;
  top: 0;
}

.spielfeld {
  cursor: none !important;
}

.menuScreen {
  display: flex;
  position: relative;
}

.menuScreen {
  cursor: pointer !important;

}

.overlay {
  position: absolute !important;
  display: flex;
  height: 100%;
  width: 100%;
  opacity: 0.7;
}

.pauseScreen {
  background-image: url('../gfx/bg-startScreen.jpg'), var(--breakit-background-fallback);  /*set dynamical by JS*/
  background-size: cover;
}

.buttonContainer {
  width: 33%;
  height: 66%;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  align-items: center;
  justify-content: space-evenly;
}

.menuButton {
  display: flex;
  position: relative;
  height: 15%;
  width: 100%;
  margin: 1% 0;
  justify-content: center;
  align-items: center;
  font-size: var(--breakit-fontsize-3);
  background-color: var(--breakit-menubuttons-color);
  border: 0.25vw solid var(--breakit-menubuttons-border);
  cursor: pointer;
}

#hud {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  flex: 25% 1 1;
}

#hud > div.blueBorder {
  height: 25%;
  margin-bottom: 10%;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: var(--breakit-hud-padding-x) 0;
  justify-content: space-evenly;
}

#hudLifes {
  flex-grow: 1;
  color: var(--breakit-font-color);
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
}

#hud > div.blueBorder span {
  display: block;
  text-align: center;
  color: var(--breakit-font-color);
}

h1 {
  text-align: center;
  color: var(--breakit-hud-color);
  margin: 0;
}

.blueBorder {
  border: 0.1vw solid var(--breakit-hud-color);
}

.life {
  aspect-ratio: 1;
  background-color: var(--breakit-lifes-def-color);
  margin: 0 var(--breakit-lifes-offset);
  height: calc( 50% - 2 * var(--breakit-lifes-offset) );
  border: var(--breakit-lifes-borderWidth) solid var(--breakit-hud-color);
  text-align: center;
  -moz-border-radius:    50%;
  -webkit-border-radius: 50%;
  border-radius:         50%;
}

#score {
  letter-spacing: 0.2vw;
}

#startScreen {
  position: relative;
  display:  flex;
}

.fs-1 {
  font-size: var(--breakit-fontsize-1) !important;
}

.fs-2 {
  font-size: var(--breakit-fontsize-2) !important;
}

.fs-3 {
  font-size: var(--breakit-fontsize-3) !important;
}


@media all and ( max-width: calc(1 / var(--breakit-aspect-ratio) * 100vh) ) {
  :root {
    --breakit-fontsize-1: calc(1 / var(--breakit-aspect-ratio) * 3vh);
    --breakit-fontsize-2: calc(1 / var(--breakit-aspect-ratio) * 2vh);
    --breakit-fontsize-3: calc(1 / var(--breakit-aspect-ratio) * 1vh);
  }
}