@keyframes lights-out {
    0%   { background-color: rgb(100, 59, 33); }
    6%  { background-color: rgb(100, 59, 33); }
    8%  { background-color: rgb(35, 21, 11); }
    10%  { background-color: rgb(100, 59, 33); }
    12%  { background-color: rgb(35, 21, 11); }
    14%  { background-color: rgb(100, 59, 33); }
    33%  { background-color: rgb(100, 59, 33); }
    35%  { background-color: rgb(35, 21, 11); }
    37%  { background-color: rgb(100, 59, 33); }
    53%  { background-color: rgb(100, 59, 33); text-shadow: 2px 2px darkgrey; }
    58% { background-color: rgb(12, 7, 4); text-shadow: 2px 2px black; }
    78% { color: black; text-shadow: 0px 0px black; }
    100% { color: rgb(165, 34, 34); background-color: rgb(12, 7, 4); text-shadow: 0px 0px black;}
}

.deerstranger {
    grid-area: deerstranger;
    font-family: MeltedMonster, Papyrus, serif;
    background-color: rgb(100, 59, 33);
}

a.project#deerstranger {
    grid-template-columns: 100%;
    font-family: MeltedMonster, Papyrus, serif;
    background-color: rgb(100, 59, 33);
    background-image: repeating-linear-gradient(
        to bottom,
        #000,
        #000 0.05vw,
        transparent 0.15vw,
        transparent 1.5vw
      );
    color: black;
    border: 0.25vw rgb(40, 40, 40) solid;
    padding: 0.35cqw;
    text-shadow: 2px 2px darkgrey;
    border-radius: 0.5vw;
    text-align: left;
    font-size: 2.5cqw;
}
a.project#deerstranger:hover {
    animation: lights-out 5s forwards; 
}

@media only screen and (min-width: 1900px) {
    a.project#deerstranger {
        font-size: 2.5cqw;
    }
}