body {
    background-color: black;
    background-image: linear-gradient(rgb(50,50,255) 40%, lawngreen 42%, black 80%);
    height: 1500px;
    background-repeat: no-repeat;
    color: white;
    margin: 0;
    padding: 0;
}

.welltop1 {
    z-index: 20;
    position: absolute;
    top: 0px;
    background-color: rgb(50,50,255);
    pointer-events: none;
}

.welltop2 {
    z-index: 0;
    position: absolute;
    top: 369px;
    background-color: rgb(50,50,255);
    pointer-events: none;
}

.welltop3 {
    z-index: 3;
    position: absolute;
    top: 526px;
    pointer-events: none;
}

.rope {
    z-index:1;
    position:sticky;
    top:0px;
    width:15px;
    height:369px;
    margin:auto;
    object-fit: none;
}

.bucket {
    z-index:1;
    position:sticky;
    top:369px;
    width:173px;
    height:240px;
    margin:auto;
}

.wellcontent {
    z-index: 5;
    margin: auto;
    position: static;
    padding-top: 250px;
    width: 315px;
    display: flex;
    flex-direction: column;
    text-align: center;
    pointer-events: none;
}

.wellwall {
    position: absolute;
    left: 50vw;
    transform: translateX(-50%);
    top:0px;
    width: 498px;
    padding-top:0px;
    display: flex;
    flex-direction: column;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.8), transparent 50%),
        url(../images/newnewwellwall2.png);
    background-position: center;
    background-size: 305px, 304px;
    background-repeat: repeat-y;
    align-content:center;
}

.wellcontent > part {
    width: auto;
    padding: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 25px;
}

.wellwall > bottom {
    position:relative;
    margin:auto;
    height:90vh;
    width:305px;
    bottom:0px;
    background-position: bottom;
    background-image:
        linear-gradient(transparent, black );
}

.wellwater {
    display: block;
    position: absolute;
    bottom: 0px;
    object-fit: cover;
    width: 215px;
    height: 254px;
    left: 50%;
    transform: translateX(-50%);
}

.lilypad {
    display:block;
    position:absolute;
    bottom:125px;
    left:50%;
    transform: translateX(-50%);
}

.cavefront {
    z-index: 20;
    display: block;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.cavelayer1 {
    z-index: 19;
    display: block;
    overflow: auto;
    white-space: nowrap;
    position: absolute;
    bottom: 20px;
    left: 50%;
    height: 750px;
    transform: translateX(-400px);
    width: 810px;
/*    pointer-events: none;
*/}

.cavelayer1 img {
    display: inline-block;
    pointer-events: none;
    top:20px;
}