body{
    font-family: "Lora", serif;
    background-color: hsl(350, 70%, 94%);
    min-height: 100vh;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slide{
    color: hsl(340, 40%, 30%);
    background: linear-gradient(135deg, hsl(350, 70%, 94%) 0%, hsl(320, 60%, 92%) 50%, hsl(10, 80%, 95%) 100%);
    padding: 50px;
    box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.5);
    min-width: 300px;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
}

.slide .buttons {
    display: flex;
    gap:10px;
}

.slide .buttons button{
    background-color: hsl(340, 40%, 30%);
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-weight: bold;
}

#Nobutton{
    position: absolute;
    top: 66.6%;
}

#face{
    width: 80px;
}
#kiss, #kiss2{
    width: 80px;
}

.slide{
    display: none;
}

.slide.displaySlide{
    display: flex;
    animation: fade;
    align-items: center;
    animation-duration: 1.5s;
}

.nextslide{
    background-color: hsl(340, 40%, 30%);
    margin: auto;
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-weight: bold;
    display: block;
}

#cat{
    width: 100px;
    margin: auto;
}

#cherry{
    width: 100px;
    margin: auto;
}

#hands{
    width: 100px;
    margin: auto;
}
@keyframes fade {
    from {opacity: .5;}
    to {opacity: 1;}
}