@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-Regular.ttf");
}

@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald-Regular.ttf");
}

#navbar-placeholder {
  min-height: 100px;
}

#image {
  height: 300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, rgba(117, 17, 62, .5) 0%, rgba(12, 60, 102, .8) 100%), url("/img/mainbar-background.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}

#image h1 {
  font-size: calc(15px + (80 - 15) * ((100vw - 100px) / (1600 - 100)));
  color: #fbfbfb;
  text-transform: uppercase;
}

.loader {
  position: relative;
  left: calc(50% - 60px);
  margin: auto;
  width: 120px;
  height: 120px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  stroke-linecap: round;
  stroke-width: 4;
  fill: none;
}
.loader .internal-circle {
  stroke: #ea8533;
}
.loader .external-circle {
  stroke: #337ab7;
}
.loader .internal-circle,
.loader .external-circle {
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.loader .internal-circle {
  stroke-dasharray: 187;
  -webkit-animation: internal 1.5s ease-in-out infinite;
          animation: internal 1.5s ease-in-out infinite;
  opacity: 0.6;
}
.loader .external-circle {
  stroke-dasharray: 312;
  -webkit-animation: external 1.5s linear infinite;
          animation: external 1.5s linear infinite;
  opacity: 0.9;
}

@-webkit-keyframes internal {
  0% {
    stroke-dashoffset: 187;
  }
  25% {
    stroke: #337ab7;
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes internal {
  0% {
    stroke-dashoffset: 187;
  }
  25% {
    stroke: #337ab7;
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes external {
  0% {
    stroke-dashoffset: 312;
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  40% {
    stroke: #ea8533;
  }
  60% {
    stroke-dashoffset: -312;
  }
  100% {
    stroke-dashoffset: -312;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
@keyframes external {
  0% {
    stroke-dashoffset: 312;
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  40% {
    stroke: #ea8533;
  }
  60% {
    stroke-dashoffset: -312;
  }
  100% {
    stroke-dashoffset: -312;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
@-webkit-keyframes bgcolors {
  0% {
    background: #222;
  }
  25% {
    background: #c51a3a;
  }
  50% {
    background: #e6d121;
  }
  75% {
    background: #22cf76;
  }
  100% {
    background: #1a87c5;
  }
}
@keyframes bgcolors {
  0% {
    background: #222;
  }
  25% {
    background: #c51a3a;
  }
  50% {
    background: #e6d121;
  }
  75% {
    background: #22cf76;
  }
  100% {
    background: #1a87c5;
  }
}