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

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

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

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

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

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

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

@font-face {
    font-family: wickedmouse;
    src: url("../font/wickedmouse.otf");
}

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

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

.consolas { font-family: consolas; }
.courier { font-family: courier; }
.koenigsberg { font-family: koenigsberg; }
.slant { font-family: slant; }
.berlinsans { font-family: berlinsans; }
.comicsansut { font-family: comicsansut; }
.carissa { font-family: carissa; }
.wickedmouse { font-family: wickedmouse; }
.milkynice { font-family: milkynice; }
.tojapan { font-family: milkynice; }

.cant-select {
    user-select: none;
}

.can-select {
    user-select: text;
}

.cant-interact {
    pointer-events: none;
}


body {
  background-color: black;
}

.borderDark {
    border-color: #222222 !important;
}
.borderPurple {
    border-color: #6f00ff !important;
}
.borderOrange {
    border-color: #ffc400 !important;
}

.alert-success {
    background-color: #000;
    border-color: #00ebb8;
    color: #00ebb8;
}

.alert-danger {
    background-color: #000;
    border-color: #ffb005;
    color: #ffb005;
}

.alert-warning {
    background-color: #000;
    border-color: #ffb005;
    color: #ffb005;
}

.greenFilter {
    filter: invert(100%) sepia(21%) saturate(6906%) hue-rotate(71deg) brightness(104%) contrast(100%);
}

.purpleFilter {
    /* #5000FF Spooky paars */
    filter: invert(9%) sepia(95%) saturate(6918%) hue-rotate(263deg) brightness(105%) contrast(136%);
}

.cyanFilter {
    /* #00FFFF cyan */
    filter: invert(92%) sepia(91%) saturate(5892%) hue-rotate(102deg) brightness(103%) contrast(102%);
}

.orangeFilter {
    /* #ffa200 oranje */
    filter: invert(57%) sepia(97%) saturate(1153%) hue-rotate(0deg) brightness(103%) contrast(104%);
}

.redFilter {
    /* #FF0000 Super rood */
    filter: invert(22%) sepia(89%) saturate(5433%) hue-rotate(354deg) brightness(96%) contrast(128%);
}

.seaColor { color: #33ffc5; }
.orangeColor { color: #ffa200; }
.redColor { color: #FF0000; }

.rotate {
    animation-name: rotateAnim;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block;
}

@keyframes rotateAnim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.shake {
    animation: shakeAnim;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shakeAnim {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.advertisey {
    animation-name: advertiseyAnim;
    transform-origin: 50% 50%;
    display: inline-block;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 1.2s;
}

@keyframes advertiseyAnim {
    25% {
        transform: rotate(-12deg);
    }
    75% {
        transform: rotate(12deg);
    }
}

/* Haalt super lelijke blauwe outline weg bij het drukken op buttons */
.btn { box-shadow: none !important; }
.form-control { box-shadow: none !important; }

/* Kleur van bootstrap4 tooltip text */
.tooltip-inner {
    color: #33ffc5 !important;
}

.tooltip {
    user-select: none;
    pointer-events: none !important;
}

/* Text selectie kleuren */
::-moz-selection {
  color: white;
  background: #ff00ae;
}
::selection {
  color: white;
  background: #ff00ae;
}