@font-face {
    font-family: 'Acknowledgement';
    src: url('/fonts/Acknowledgement.eot');
    src: url('/fonts/Acknowledgement.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Acknowledgement.woff2') format('woff2'),
        url('/fonts/Acknowledgement.woff') format('woff'),
        url('/fonts/Acknowledgement.ttf') format('truetype'),
        url('/fonts/Acknowledgement.svg#Acknowledgement') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

a:active {
    outline:none;
}

.card__image.is-flipped {
    transform: rotateY(180deg);
}

.stat::first-letter {
    font-size: 150%;
}

.card__image {
    transition: transform 1s;
    transform-style: preserve-3d;
}

.faction_header {
    font-family: 'Cinzel', serif;
}

@media screen and (max-width: 767px) {
    .card__image {
        width: 330px;
        height: 570px;
    }
}

@media screen and (min-width: 768px) {
    .card__image {
        width: 440px;
        height: 760px;
    }
}

@media screen and (min-width: 1024px) {
    .card__image {
        width: 330px;
        height: 570px;
    }
}

@media screen and (min-width: 1280px) {
    .card__image {
        width: 412px;
        height: 712px;
    }    
}

@media screen and (min-width: 1536px) {
    .card__image {
        width: 412px;
        height: 712px;
    }
}

.card__image--front, .card__image--back {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: -1;
}

.card__image--back {
    transform: rotateY(180deg);
}

.active .item {
    display: block;
}
/* Submenu up from mobile screens */
.submenu-active .submenu {
    display: block;
}
.submenu-active {
    border-radius: 3px;
}

/* Desktop menu */
@media all and (min-width: 1024px) {
    .submenu-active .submenu {
        display: block;
        position: absolute;
        right: 0;
        top: 68px;
    }
    .submenu-active {
        border-radius: 0;
    }
}

.icon {
    display: inline-flex;
    align-self: center;
}

.icon svg, .icon img {
    height: 1.15em;
    width: 1.15em;
    fill: currentColor;
}

.icon.baseline svg, .icon img {
    top: .125em;
    position: relative;
    padding: 0;
    margin: 0;
}

.average {
    /* Prefix required. Even Firefox only supports the -webkit- prefix 
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1a202c; */
    text-shadow: -1px 0 #1a202c, 0 1px #1a202c, 1px 0 #1a202c, 0 -1px #1a202c;
    font-family: 'Acknowledgement';
    font-weight: bold;
    font-style: normal;
}