.book-title {
    font-size: 2.5em;
    font-family: 'JobberWackyNF';
    color: red;
    text-shadow: 0.05em 0.05em black;
}

.btn-primary {
    margin-bottom: 0.5em;
    color: var(--gray);
    background-color: var(--lblue-3);
    border-color: var(--lblue-3);
}

.btn-primary:hover {
    color: black;
    background-color: var(--lblue-1);
    border-color: var(--lblue-1);
}

.scroll-btn {
    position: absolute;
    top: 2.25em;
    right: 1.5em;
    padding: 0 !important;
    font-size: 0.75em;
}

.work {
    position: relative;
}

.teacher-quiz-title {
    background-color: var(--lblue-3);
    border-radius: 1em 1em;
    padding: 0.5em;
}

.teacher-quiz-title-2 {
    background-color: var(--lblue-3);
    border-radius: 1em 1em 0 0;
    padding: 0.5em;
}

.vocab-container {
    background-color: var(--lblue-3);
    padding: 0.5em;
}

.word {
    padding: 0.25em;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    width: max-content;
    border-radius: 0.5em;
    text-wrap: wrap;
}

.word:hover {
    background-color: #bbe7ff;
}

.text-wrapper {
    box-sizing: border-box !important;
    max-width: 100%;
}

.hide {
    visibility: hidden;
}

.no-display {
    display: none;
}

#hide-translations {
    margin-top: 0.5em;
}

p {
    font-size: 0.75em;
}

.exercise-btn {
    background-color: #1cd0fd;
    color: white !important;
    text-shadow: 0.05em 0.05em black;
}

.exercise-btn:hover {
    background-color: #00b7ff;
}

.digtest-btn {
    margin-bottom: 0.5em;
    background-color: var(--lgreen-2);
    color: white !important;
    text-shadow: 0.05em 0.05em black;
}

.digtest-btn:hover {
    background-color: var(--green-2);
}

.tq-smiley {
    margin-bottom: 0.5em;
}

@media only screen and (orientation: portrait) {
    .tq-smiley {
        position: relative;
        left: -40%;
    }
}