@keyframes fadeInFromAbove {
  0% {
    opacity:0;
    top: -200px;
  }

  100% {
    opacity:1;
    top: 0px;
  }
}

@keyframes fadeInFromBelow {
  0% {
    opacity:0;
    top: 10px;
  }

  100% {
    opacity:1;
    top: 0px;
  }
}

@keyframes fadeInFromBelowDelayed {
  0% {
    opacity:0;
    top: 10px;
  }

  25% {
    opacity:0;
    top: 10px;
  }

  100% {
    opacity:1;
    top: 0px;
  }
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#logo-block {
  margin: auto;
  display: block;
  text-align: center;
  position: relative;
  width: 800px;
}

#logo {
  text-align: center;
  text-transform: uppercase;

  font-size: 800%;
  font-family: sans-serif;

  color: #dea584;
  text-shadow: 2px 2px #999999;

  position: relative;

  animation: fadeInFromAbove ease-in-out 1;
  animation-duration: 1.5s;
}

#search {
  margin-left: auto;
  margin-right: auto;

  position: relative;
  width: 80%;

  animation: fadeInFromBelow ease-in-out 1;
  animation-duration: 1.5s;
}

#search-results-block {
  margin-top: 20px;
  text-align: center;

  position: relative;

  animation: fadeInFromBelowDelayed ease-in-out 1;
  animation-duration: 3.0s;
}

#video-clip {
  width: 100%;
  height: 100%;
}

#editor-clip {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

#canvas {
  width: 100%;
  height: 100%;
}

#exit-button {
  z-index: 100;
  position: absolute;
  left: 0px;
}

#fps {
  z-index: 100;
  position: absolute;
  left: 0px;
  top: 20px;
}

#delta {
  z-index: 100;
  position: absolute;
  left: 0px;
  top: 40px;
}

.game {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas: 'game-view    game-view  game-video'
                       'game-effects game-tuner game-stats';
}

@media only screen and (max-width: 1024px) {
  .game {
    grid-template-areas: 'game-view game-view game-view'
                         'game-effects game-tuner game-stats'
                         'game-video game-video game-video';
  }
}

.game-view {
  grid-area: game-view;
}

.game-video {
  grid-area: game-video;
}

.game-stats {
  grid-area: game-stats;
}

.game-effects {
  grid-area: game-effects;
}

.game-tuner {
  grid-area: game-tuner;
}

.string-0 {
  background-color: rgba(223, 105, 250, 1);
  padding-top: 15px;
  padding-bottom: 15px;
}

.string-1 {
  user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  background-color: rgba(97, 246, 35, 1);
  padding-top: 15px;
  padding-bottom: 15px;
}

.string-2 {
  user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  background-color: rgba(245, 167, 25, 1);
  padding-top: 15px;
  padding-bottom: 15px;
}

.string-3 {
  user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  background-color: rgba(50, 216, 228, 1);
  padding-top: 15px;
  padding-bottom: 15px;
}

.string-4 {
  user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  background-color: rgba(220, 217, 49, 1);
  padding-top: 15px;
  padding-bottom: 15px;
}

.string-5 {
  user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  background-color: rgba(226, 47, 44, 1);
  padding-top: 15px;
  padding-bottom: 15px;
}

.string-6 {
  user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  background-color: rgba(100, 100, 255, 1);
  padding-top: 15px;
  padding-bottom: 15px;
}

.editor {
  width: 100%;
  height: 100%;
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas: 'editor-controls  editor-video'
                       'editor-fretboard editor-fretboard';
}

.editor-controls {
  grid-area: editor-controls;
}

.editor-video {
  grid-area: editor-video;
}

.editor-fretboard {
  grid-area: editor-fretboard;
}

#app {
  width: 100%;
  height: 100%;
}