@import url('https://fonts.googleapis.com/css2?family=Slackey&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Slackey&display=swap');
body {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    background-color: rgb(21, 21, 21);
}

#wrap {
    height: 500px;
}

h1 {
    font-family: 'Slackey', cursive;
    font-size: 100px;
    text-align: center;
    color: rgba(9, 197, 37, 0.646);
    /* text-transform: uppercase; */
}

p {
    font-family: 'Slackey', cursive;
    color: rgb(253, 255, 236);
    text-align: center;
    margin: 0 280px 10px 280px;
    visibility: hidden;
}

img.london {
    display: block;
    position: absolute;
    filter: sepia(100%);
    width: 250px;
    height: 500px;
    object-fit: cover;
    top: 80px;
    left: calc(50% - 125px);
    transition: all 1.5s;
    z-index: -1;
}

#wrap:hover img.london {
    filter: sepia(0%);
}

#wrap:hover p {
    font-family: 'Slackey', cursive;
    color: rgb(253, 255, 236);
    text-align: center;
    margin: 0 280px 10px 280px;
    visibility: visible;
}

#first {
    transform: rotate(-140deg);
}

#second {
    transform: rotate(140deg);
}

#wrap:hover #first {
    transform: translate(500px);
}

#wrap:hover #second {
    transform: translate(-500px);
}