body.index {
    background-image: url('./suicideDoor.jpg');
    background-repeat: infinite;
    background-size: 100%;
    overflow: hidden;    
}

body.finery {
    background-image: url('suicideDoor.jpg');
    background-blend-mode: hard-light;
    background-color: black;
    background-repeat: infinite;
    background-size: 150%;
    overflow: scroll;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    animation: fade 2s linear infinite alternate;
}

@keyframes fade {
    from {color: black;}
    to {color: white;}
}

.nav {
    position: fixed;
    margin-top: 2vmin;
    margin-left: 2vmin;
    font-size: 200%;
    z-index: 1;
}


.item {
    position: absolute;
    width: 3%;
    animation: bobbing 7s linear infinite;
}

.item:hover {
    opacity: 10%;
}

.panel {
    position: absolute;
/*    mix-blend-mode: difference;*/
/*    background-blend-mode: soft-light;*/
    padding: 6%;
    opacity: 50%;
}

#wall1 {
    mix-blend-mode: difference;
    position: absolute;
    left: 10%;
    top: 12%;
    animation: bobbing 10s linear infinite;
}

#wall2 {
    mix-blend-mode: difference;
    position: absolute;
    left: 28%;
    top: 28%;
}

#wall3 {
    mix-blend-mode: difference;
    position: absolute;
    left: 55%;
    top: 12%;
    animation: bobbing 7s linear infinite;
}


#wall4 {
    mix-blend-mode: difference;
    position: absolute;
    width:70%; 
    height:60%;
    animation: twitching 7s linear infinite;
    padding: 5%;
}

#wall5 {
    mix-blend-mode: difference;
    position: absolute;
    width: 70%; 
    height: 60%;
    animation: twitching0 7s linear infinite;
    padding: 5%;
}

#ray {
    mix-blend-mode: exclusion;
    position: absolute;
    left: 32%;
    top: 35%;
}

@keyframes bobbing {
    0% {transform: translateY(10%) rotate(0.245turn);}
    50% {transform: translateY(0%) rotate(0.25turn);}
    75% {transform: translateY(10%) rotate(0.247turn);}
    100% {transform: translateY(10%) rotate(0.25turn);}
}

@keyframes twitching {
    0% {transform: scale(1, 0.4) skew(1deg, 1deg);}
    25% {transform: scale(1, 0.4) skew(-1deg, -1deg);}
    50% {transform: scale(1, 0.4) skew(1deg, 1deg);}
    75% {transform: scale(1, 0.4) skew(-1deg, -1deg);}
    100% {transform: scale(1, 0.4) skew(1deg, 1deg);}
}

@keyframes twitching0 {
    0% {transform: rotate(0.25turn) scale(1, 0.4) skew(0deg, 1deg);}
    25% {transform: rotate(0.25turn) scale(1, 0.4) skew(-1deg, -1deg);}
    50% {transform: rotate(0.25turn) scale(1, 0.4) skew(1deg, 1deg);}
    75% {transform: rotate(0.25turn) scale(1, 0.4) skew(-1deg, -1deg);}
    100% {transform: rotate(0.25turn) scale(1, 0.4) skew(1deg, 1deg);}
}