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

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

@font-face{
    font-family: text-security-disc;
    src: url("/fonts/text-security-disc.woff");
  }

#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, 0.5) 0%, rgba(12, 60, 102, 0.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;
    margin: auto;
    width: 12rem;
    height: 12rem;
    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;
    transform-origin: center;
}
.loader .internal-circle {
    stroke-dasharray: 187;
    animation: internal 1.5s ease-in-out infinite;
    opacity: 0.6;
}
.loader .external-circle {
    stroke-dasharray: 312;
    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;
    }
}