.day__content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 100px 0 140px;
    z-index: 2;
}

.darkness {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
    opacity: 0;
    transition: opacity 1.5s linear;
}
#darkness-1 {
    background-image: url(../img/environment/darkness-1.png);
    transform: scale(1.2);
}
@keyframes flicker {
    0% { transform: scale(1.03); }
    20% { transform: scale(1.01); }
    40% { transform: scale(1.02); }
    60% { transform: scale(1); }
    80% { transform: scale(1.04); }
    100% { transform: scale(1.03); }
}
#darkness-2 {
    background-image: url(../img/environment/darkness-2.png);
    animation: flicker 1s linear infinite;
    transform: scale(1.12);
}
.controls__top {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.controls__top:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 168px;
    background-image: url(../img/day/border-top.png);
    background-repeat: no-repeat;
}

.controls__bottom {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    z-index: 9;
}

.controls__bottom:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 168px;
    background-image: url(../img/day/border-bottom.png);
    background-repeat: no-repeat;
    z-index: 0;
}

.special-1 {
    position: absolute;
    left: 1308px;
    top: 720px;
    z-index: 5;
}

.exchange {
    position: absolute;
    left: 1080px;
    top: 500px;
}

.crate {
    position: absolute;
    left: 1080px;
    top: 340px;
    z-index: 5;
}

.steg {
    position: absolute;
    left: 1350px;
    top: 728px;
    z-index: 5;
}

.notebook {
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scaleX(0.3);
    opacity: 0;
    transition: transform 0.2s ease-out,
                opacity 0.2s ease-out;
}

.notebook.open {
    transform: translate(-50%, -50%) scaleX(1);
    opacity: 1;
}

.hint {
    position: absolute;
    z-index: 300;
    animation: hintupdown 2s linear infinite;
}

@keyframes hintupdown {
    0% { transform: translateY(0); }
    50% { transform:  translateY(8px); }
    100% { transform: translateY(0); }
}

#campfire-ready {
    position: absolute;
    width: 137px;
    height: 100px;
    top: 428px;
    left: 865px;
}
#fishJetty-ready {
    position: absolute;
    width: 280px;
    top: 725px;
    left: 1350px;
    z-index: 1;
}
#workbench-ready {
    position: absolute;
    width: 228px;
    top: 460px;
    left: 319px;
    z-index: 1;
}
#house-ready {
    position: absolute;
    width: 285px;
    top: 610px;
    left: 700px;
    z-index: 1;
}