/* Load the pixel font so it can be used */
@font-face {
    font-family: "visitor1";
    src: url(../fonts/visitor1.ttf) format("truetype");
}


/* ---General--- */
body {
  background: black;
  color: rgba(255,170,170, 0.9);
  font-family: "visitor1",sans-serif;
}

.mainContainer {
  position: relative;
  width: 1024px;
  height: 768px;
  margin: 0 auto 0 auto;
  transform: scale(0.75);
  border-radius: 50px;
  overflow: hidden;
  animation: hue-rotate 10s linear infinite;
}

/* ---End of General--- */



/* ---Interface--- */
.uiContainer {
  position: absolute;
  width: 1024px;
  z-index: 9000;
}

#score {
  font-size: 32px;
  margin: 20px 50px 0 0;
  text-align: right;

}

#title {
  margin-top: 10%;
  text-align: center;
  font-size: 64px;
}

#buttonContainer {
  width: 50%;
  margin: 14% auto;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 32px;
  border: 4px rgba(255,170,170, 0.9) solid;
  border-radius: 10px;
}

#buttonLeft {
  float: left;
}

#buttonRight {
  float: right;
}

#buttonBottom {
  text-align: center;
  display: block;
  max-width: 250px;
  margin: 300px auto 0 auto;
}

.selectedButton {
  box-shadow: 0px 0px 10px 2px rgba(255,170,170, 0.9), 0px 0px 10px 2px rgba(255,170,170, 0.9) inset;
}

input {
  font-family: "visitor1",sans-serif;
  color: rgba(255,170,170, 0.9);
  font-size: 32px;
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: rgba(255,170,170, 0);
  border: none;
}
/* --- End of Interface--- */



/* ---Game--- */
.gameContainer {
  position: relative;
  background-color: darkgrey;
  background: url("../img/background.svg");
  width: 1024px;
  height: 768px;
  margin: 0 auto 0 auto;
}

.centerHexagon {
  position: absolute;
  background: url("../img/centerhexagon.svg");
  top: 334px;
  left: 462px;
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
  z-index: 5000;
}

.triangles {
  position: absolute;
  top: 374px;
  left: 442px;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform-origin:70px 10px;
}

.triangle1 {
  border-right: 10px solid rgba(255,170,170, 0.9);
}

.triangle2 {
  border-left: 10px solid rgba(255,102,102, 0.9);
}

.blockContainer {
  position: relative;
}

.block {
  position: absolute;
  width: 816px;
  height: 73px;
}

.blockPosition0 {
  left: -480px;
  top: 15px;
  transform: rotate(300deg);
}

.blockPosition1 {
  left: 110px;
  top: -300px;
}

.blockPosition2 {
  left: 690px;
  top: 25px;
  transform: rotate(60deg);
}

.blockPosition3 {
  left: 690px;
  top: 680px;
  transform: rotate(122deg);
}

.blockPosition4 {
  left: 100px;
  top: 1000px;
  transform: rotate(180deg);
}

.blockPosition5 {
  left: -490px;
  top: 680px;
  transform: rotate(240deg);
}
/* ---End of Game--- */



/* ---Animations--- */

@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

/* ---End of Animations--- */