@font-face {
    font-family: "player";
    src: url("VellanypixelRegularDemo-V4K2V.otf");
}

@font-face {
    font-family: "coroner";
    src: url("MediterapixelRegularDemo-2vVew.otf");
}

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

.cave {
    color: #cccccc;
}

.cave p {
    font-size: 2vw;
    font-family: "coroner";
}

.cave button {
    color: #000000;
    font-family: "player";
    width: 23%;
    height: 3.4vw;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    background-position: center;
}

.normalcavebutton {
    font-size: 2.4vw;
}

.smallcavebutton {
    font-size: 1.6vw;
}

#option1 {
    background-image: url("../images/cave/dialogue_box_1.png");

}

#option2 {
    background-image: url("../images/cave/dialogue_box_2.png");
}

#cave-screen {
    width: 98vw;
    height: 96vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    overflow: hidden;
}

.cavelayer {
    position: absolute;
    width: 90%;
}

#coroner {
    padding-top: 8.3vw;
    padding-left: 1.5vw;
    transform: scale(1.32);
}

#text-screen {
    width: 98vw;
    height: 96vh;
    display: flex;
    justify-content: right;
    align-items: center;
    position: absolute;

}

#text-interface {
    width: 35%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 10px 20px 10px;
    position: absolute;
    right: 16vw;
    transform: translateY(calc(4vh - 10vw));
}

#blank {
    z-index: 100;
}

#coroner-dialogue {
    background-image: url("../images/cave/textbox.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 70%;
    height: 13.4vw;
    padding: 0 2vw;
}


.cartext p {
    font-family: "vehicles";
    font-size: 15vw;
    transform: translateY(-20vw);
}

#player-buttons {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

}

.clickable-area {
    fill: transparent;
    stroke: transparent;
}

.clickable-area:hover {
    cursor: pointer;
}

.front {
    z-index: 101;
}

.back {
    z-index: -101;
}

.itemhover {

    animation: item-inspect 0.6s;
    animation-iteration-count: infinite;
}

.detooth {
    animation: detoothanim 2s;
    animation-iteration-count: 1;
}

.pulse {
    animation: pulseanim 2s;
    animation-iteration-count: 1;
}

@keyframes item-inspect {
    0% { transform: translate(1px, -31px) rotate(0.5deg); }
    10% { transform: translate(-1px, -29px) rotate(0deg); }
    20% { transform: translate(-1px, -30px) rotate(-0.5deg); }
    30% { transform: translate(1px, -31px) rotate(0.5deg); }
    40% { transform: translate(1px, -29px) rotate(-0.5deg); }
    50% { transform: translate(-1px, -31px) rotate(0deg); }
    60% { transform: translate(-1px, -30px) rotate(0.5deg); }
    70% { transform: translate(0px, -31px) rotate(-0.5deg); }
    80% { transform: translate(1px, -31px) rotate(0deg); }
    90% { transform: translate(1px, -29px) rotate(0.5deg); }
    100% { transform: translate(0px, -29px) rotate(-0.5deg); }
}

@keyframes detoothanim {
    0% { transform: translate(20px, -1px) rotate(0deg); }
    10% { transform: translate(-18px, 1px) rotate(0deg); }
    20% { transform: translate(16px, 0px) rotate(0deg); }
    30% { transform: translate(-14px, -1px) rotate(0deg); }
    40% { transform: translate(12px, 1px) rotate(0deg); }
    50% { transform: translate(-10px, -1px) rotate(0deg); }
    60% { transform: translate(8px, 0px) rotate(0deg); }
    70% { transform: translate(-6px, -1px) rotate(0deg); }
    80% { transform: translate(4px, 1px) rotate(0deg); }
    90% { transform: translate(-2px, 0px) rotate(0deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

@keyframes pulseanim {
    0% { opacity: 0; }
    10% { opacity: 50; }
    20% { opacity: 100; }

    100% { opacity: 0; }
}

#vertical-view {
    display: none;
    width: 95vw;
    height: 95vh;

}

#vertical-view a {
    color: #ff0000;
}



@media (max-width: 500px) {
    #cave-screen,  #text-screen {
        display: none;
    }

    #vertical-view {
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}