body {
    background-color: #FFFCF7;
}

.navbar {
    position: sticky;
    top: 0;
    background-color: #FFFCF7;
}

.navbar > ul {
    color: #8A9CB4;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-size: 20px;
    /*text-align: center;*/
    display: flex;
    align-items:center;
    justify-content: center;
    flex-wrap: wrap;
}

.logo {
    font-size: 22px;
    font-family: "Lexend", sans-serif;
    font-weight: bold;
    color: #A1B5D8;
}

.navbar > ul > li {
    list-style-type: none;
    padding: 1.2vw;
}

.navbar > ul > li:not(.logo)>a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

.navbar > ul > li > a {
    color: inherit;
    text-decoration: inherit;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.image {
    width: 30vw;
    height: 30vw;
    object-fit: cover;
    margin-bottom: 3vw;
    padding: 0;
    display: flex;
}

.one {
    background-image: url("photos/succulent1.jpg");
    background-size: cover;
}

.two {
    background-image: url("photos/succulent2.jpg");
    background-size: cover;
}

.three {
    background-image: url("photos/succulent3.jpg");
    background-size: cover;
}

.four {
    background-image: url("photos/succulent4.jpg");
    background-size: cover;
}

.five {
    background-image: url("photos/succulent5.jpg");
    background-size: cover;
}

.six {
    background-image: url("photos/succulent6.jpg");
    background-size: cover;
}

.seven {
    background-image: url("photos/succulent7.jpg");
    background-size: cover;
}

.eight {
    background-image: url("photos/succulent8.jpg");
    background-size: cover;
}

.nine {
    background-image: url("photos/succulent9.jpg");
    background-size: cover;
}

.ten {
    background-image: url("photos/succulent10.jpg");
    background-size: cover;
}

.eleven {
    background-image: url("photos/succulent11.jpg");
    background-size: cover;
}

.twelve {
    background-image: url("photos/succulent12.jpg");
    background-size: cover;
}

.halfimage {
    width: 15vw;
    height: 30vw;
    color: white;
}

.holdstext {
    padding: 1vw;
    color: rgba(1, 1, 1, 0);
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-size: 1.8vw;
}

@keyframes slidinghalf {
    0% {width: 0; background-color: rgba(1, 1, 1, 0);color: rgba(1, 1, 1, 0);}
    76% {color: rgba(138, 156, 180, 0)}
    100% {width: 20vw;background-color: rgba(255, 252, 247, 0.7); color: rgba(138, 156, 180, 1);}
}

.holdstext:hover {
    animation: slidinghalf 2s;
    animation-fill-mode: forwards;
}

.name {
    font-family: "Lexend", sans-serif;
    font-weight: bold;
}