@font-face {
    font-family: RiseOfKingdom;
    src: url(RiseOfKingdom.ttf);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #000;
    font-family: RiseOfKingdom;
    padding: 0 1rem;
}

.card-header,
.card-body,
.card {
    background-color: #000;
    border: none;
    margin: 0;
    padding: 0;
}

img {
    height: 30vh;
    width: 50vw;
    border: solid 0.2rem #6c757d;
    border-radius: 5%;
}

p {
    color: #fff;
    font-size: 1.2rem;
    user-select: none;
}

button {
    margin-top: 0.5rem;
    font-size: 1.2rem;
}

#btn2,
#btn3,
#btn4 {
    visibility: hidden;
}

.fade-in {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}

.fade-out {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}

.waitress-hello,
.help,
.laugh,
.orc-death,
.merchant-hello,
.howl,
.wolf-death,
.stop,
.hiss,
.spider-death,
.hands-up,
.end,
.wizard-laugh,
.wizard-death,
.tavern,
.orc-battle,
.intro-outro,
.merchant,
.mountain,
.forest,
.spider-battle,
.mine,
.final-battle,
.village {
    display: none;
}

@media (orientation:landscape) {
    img {
        height: 15rem;
        width: 15rem;
    }
}