/***** Always True *****/
@media only screen {
    #book, #book #cover {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('../book-bg-4k.png');
    }

    #book #cover {
        box-shadow: 4px 0 4px 1px rgba(0, 0, 0, 0.5);
    }

    #book .page {
        padding: 40px 0;
        color: var(--bg-primary);
        margin: -30px 0 0 -15px;
        background-color: var(--font-color-primary);
    }

    #book nav {
    }

    #book #intro > p {
        margin: 5px 0px;
    }

    #book nav a {
        margin: 0;
        width: 75px;
        opacity: 0.5;
        padding: 5px 20px;
        text-align: center;
        color: var(--bg-primary);
        background: var(--font-color-primary);
        font-size: var(--font-size-title-large);
    }

    #book nav a:not(.active):hover {
        opacity: 1;
        background: var(--font-color-secondary);
    }

    #book nav a.active {
        opacity: 1;
        margin: -5px 0 0 0;
        padding: 7.5px 20px;
    }

    #book input, #book textarea {
        margin: 5px;
        border: none;
        width: 330px;
        box-shadow: none;
        padding: 5px 10px;
        font-family: var(--font-family);
        color: var(--font-color-primary);
        font-size: var(--font-size-body-medium);
        background-image: url('../book-bg-4k.png');
    }

    #book #contactForm textarea {
       height: 200px; 
       resize: none;
    }

    #book input::placeholder, #book textarea::placeholder {
        color: var(--font-color-secondary);
        font-weight: bolder;
        font-style: normal;
        color: var(--font-color-secondary);
    }

    #book #contactForm button {
        margin: 0;
        padding: 0;
        font-size: var(--font-size-title-large);
        background-color: var(--font-color-primary);
    }

    #book #contactForm button > i {
        text-align: end;
    }

    .fa-spigot {
        width: 30px;
        height: 24px;
        border-radius: 2px;
        display: inline-block;
        fill: var(--bg-primary);
        background: var(--spigot) no-repeat center / contain;
    }

    .entry * {
        color: var(--bg-primary)
    }

    .entry-img-container {
        height: 100%;
        min-width: 100px;
        padding: 0 20px;
        background: url('../book-bg-4k.png');
        box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    }

    .entry-label.__status {
        border-radius: 50%;
        padding: 0;
        width: 10px;
        height: 10px;
    }

    .entry-label {
        margin: 0 2px;
        padding: 0px 5px;
        height: fit-content;
        color: var(--font-color-primary);
        background-color: var(--bg-primary);
    }

    .send-message {
        -webkit-animation: send-animation 1s ease-out both;
        animation: send-animation 1s ease-out both;
    }

    @-webkit-keyframes send-animation {
        0% {
            width: 0px;
        }
        100% {
            width: 275px;
        }
    }
    @keyframes send-animation {
        0% {
            width: 0px;
        }
        100% {
            width: 275px;
        }
    }

    .open-cover {
	    -webkit-animation: open-cover 2s ease-out both;
	    animation: open-cover 2s ease-out both;
    }

    .close-cover {
        -webkit-animation: close-cover 2s ease-out both;
        animation: close-cover 2s ease-out both;
    }

    @-webkit-keyframes close-cover {
        0% {
            transform: translate(10px, 0px);
            z-index: -1;
        }
        50% {
            transform: translateY(-135%);
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes close-cover {
        0% {
            transform: translate(10px, 0px);
            z-index: -1;
        }
        50% {
            transform: translateY(-135%);
        }
        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes open-cover {
        0% {
            opacity: 1;
        }
        100% {
            transform: translateY(100%);
            opacity: 0;
        }
    }
    @keyframes open-cover {
        0% {
            opacity: 1;
        }
        50% {
            transform: translateY(-135%);
        }
        100% {
            transform: translate(10px, 0px);
            z-index: -1;
        }
    }
}