* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

html, button {
    font-family: "CorrectionBrush", sans-serif;
    font-size: larger;
    text-align: center;
}

body {
    margin: 0;
    background: url("bg.jpg") center no-repeat;
    background-size: cover;
    color: #fff;
    overflow: hidden;
}

#game-container {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 5% 0 5%;
    background: #0a0a0a;
    opacity: 0.9;
}

#scene {
    display: grid;
    height: 100vh;
}

#scene-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    margin: 0;
}

#scene-description {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35vh;
    margin: 0;
}

#choices {
    display: flex;
    flex-direction: column;
    height: 45vh;
}

.choice {
    padding: 10px 15px;
    margin: 10px 0;
    background: #333;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
}

.choice:hover {
    background: #555;
}

.fade-in {
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}