body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-image: url("../assets/background/EPL_bg.gif");
}

header {
    width: 100vw;
    z-index: 10;
    text-align: center;
    background: #394170;
}
header > h1 {
    margin: 0;
    display: inline;
    color:white;
}
header > img {
    padding-right: 8px;
    padding-top: 8px;
}

header > a {
    float: right;
    transition: opacity .05s;
}
header > a:hover {
    opacity: 0.5;
}

#containerGraph {
  position: relative;
    z-index: 5;
    height: 95vh;
    width: 100vw;
    overflow: hidden;
}

.minimap {
    position: relative;
    left: 8px;
    border: 1px rgba(0, 0, 0, 0.3) solid;
    border-radius: 4px;
    box-shadow: 3px 3px 20px -5px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
    .minimap {
        top: 5.5vh;
    }
}

#minimap-square {
    position: absolute;
    z-index: 12;
}
#minimap-canvas {
    position: absolute;
    z-index: 11;
    background-color:#f8f1e0;
}


.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #ffffff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}