body{
    margin: 0;
    background-color: black;
}

.sectionBell{
    width: 100vw;
    height: 100vh;
    background-image: url(../images/farmOld.webp);
    background-size: cover;
    display: absolute;
    justify-content: center;
    overflow-y: hidden;

}

.divBell{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;
}
.bell{
    height: 100%;
    margin: -20px auto 0 auto;
    justify-self: center;
}

.bell:hover{
    height: 100%;
    margin: -20px auto 0 auto;
    justify-self: center;
    transform-origin: top center;
    transform: rotate(20deg);
}

.bellRing{
    height: 100%;
    margin: -20px auto 0 auto;
    justify-self: center;
    transform-origin: top center;
    animation: bellanimation 25s ease-out forwards;
}

.haende{
    width: 100vw;
    height: 100vh;
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    direction: row;
    justify-content: space-between;
    overflow-x: hidden;

}

.handLeft{
    height: 200vh;
    margin: -50vh 0 0 -200vw;
}
.handRight{
    height: 150vh;
    margin: -30vh -150vw 0 0;
    transform: scaley(-1)
}

.handLeftMove{
    height: 200vh;
    margin: -50vh 0 0 -200vw;
    animation: handLeftMoveAnimation 5s 13s forwards;
}

.handRightMove{
    height: 150vh;
    margin: -30vh -150vw 0 0;
    transform: scaley(-1);
    animation: handRightMoveAnimation 5s 13s forwards;
}

@keyframes bellanimation {
  0%   { transform: rotate(20deg); }
  5%   { transform: rotate(-17.73deg); }
  10%  { transform: rotate(15.71deg); }
  15%  { transform: rotate(-13.93deg); }
  20%  { transform: rotate(12.37deg); }
  25%  { transform: rotate(-11.00deg); }
  30%  { transform: rotate(9.80deg); }
  35%  { transform: rotate(-8.75deg); }
  40%  { transform: rotate(7.83deg); }
  45%  { transform: rotate(-7.03deg); }
  50%  { transform: rotate(6.32deg); }
  55%  { transform: rotate(-5.70deg); }
  60%  { transform: rotate(5.15deg); }
  65%  { transform: rotate(-4.67deg); }
  70%  { transform: rotate(4.24deg); }
  75%  { transform: rotate(-3.86deg); }
  80%  { transform: rotate(3.52deg); }
  85%  { transform: rotate(-3.22deg); }
  90%  { transform: rotate(2.95deg); }
  95%  { transform: rotate(-2.71deg); }
  100% { transform: rotate(0deg); }

}

@keyframes handLeftMoveAnimation {
    0%{margin: -50vh 0 0 -200vw;}
    100%{margin: -50vh 0 0 -25vw;}
}

@keyframes handRightMoveAnimation {
    0%{margin: -30vh -150vw 0 0;}
    100%{margin: -30vh -10vw 0 0;}
}

.sectionDead{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    display: none;
    h1{
        color: darkred;
        margin: auto 0;
        font-size: 8ch;
        padding: 20px;
    }
    background-color: black;
}

.scp513{
    position: absolute;
    z-index: 1;
    top: 26vh;
    display: none;
}
.scp513Move{
    position: absolute;
    z-index: 1;
    top: 26vh;
    animation: scp513flicker 10s 3s forwards;
    display: block;
    opacity: 0;
}

@keyframes scp513flicker {
    0%{opacity: 0; left: 50vw;}
    4%{opacity: 0;}
    5%{opacity: 0.5;}
    6%{opacity: 0;}
    9%{opacity: 0;left: 50vw;}
    10%{opacity: 0.3;left: 0vw;}
    11%{opacity: 0;}
    19%{opacity: 0;}
    20%{opacity: 0.4;}
    21%{opacity: 0;}
    25%{opacity: 0;}
    26%{opacity: 0.5;}
    27%{opacity: 0;}
    35%{opacity: 0;}
    36%{opacity: 0.6;}
    37%{opacity: 0;}
    42%{opacity: 0; left: 0vw;}
    43%{opacity: 0.4;left: 80vw;}
    44%{opacity: 0;}
    67%{opacity: 0;}
    68%{opacity: 0.7;}
    69%{opacity: 0;}
    77%{opacity: 0;}
    78%{opacity: 0.9;left: 80vw;}
    79%{opacity: 0;left: 0vw;}
    85%{opacity: 0;}
    86%{opacity: 0.8;}
    87%{opacity: 0;}
    89%{opacity: 0;}
    90%{opacity: 1;}
    91%{opacity: 0;}
    100%{opacity: 0;}
}


.sectionFloor{
    width: 100vw;
    min-height: 100vh;
    background-image: url(../images/wall.webp);
    background-size: cover;
    align-content: flex-end;
    padding-top: 10vh;
}
.akte{
    width: 80vw;
    height: auto;
    max-width: 700px;
    background-color: rgb(241, 236, 236);
    padding: 10px 10px 50px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    h1{
      color: darkred;
    }
}
@media screen and (min-width: 986px){
    .scp513{
        top: 40vh;
        left: 80vw;
    }

    @keyframes scp513flicker {
        0%{opacity: 0; left: 80vw;}
        4%{opacity: 0;}
        5%{opacity: 0.5;}
        6%{opacity: 0;}
        9%{opacity: 0;left: 80vw;}
        10%{opacity: 0.3;left: 50vw;}
        11%{opacity: 0;}
        19%{opacity: 0;}
        20%{opacity: 0.4;}
        21%{opacity: 0;}
        25%{opacity: 0;}
        26%{opacity: 0.5;}
        27%{opacity: 0;}
        35%{opacity: 0;}
        36%{opacity: 0.6;}
        37%{opacity: 0;}
        42%{opacity: 0; left: 50vw;}
        43%{opacity: 0.4;left: 70vw;}
        44%{opacity: 0;}
        67%{opacity: 0;}
        68%{opacity: 0.7;}
        69%{opacity: 0;}
        77%{opacity: 0;}
        78%{opacity: 0.9;left: 70vw;}
        79%{opacity: 0;left: 80vw;}
        85%{opacity: 0;}
        86%{opacity: 0.8;}
        87%{opacity: 0;}
        89%{opacity: 0;}
        90%{opacity: 1;}
        91%{opacity: 0;}
        100%{opacity: 0;}
    }
}