* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h4 {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
}

main p {
    margin-top: 20px;
    margin-left: 10px;
}

nav,
header{
    padding: 20px;
        text-align: center;
        background: #341171;
}

nav,
a {
    color: rgb(122, 88, 171);
    opacity: 0.6;
    padding-top: 7px;
    padding-left: 10px;
    font-size: 30px;
}

nav,
a:hover {
    color: white;
    opacity: 1;
}

body {
    background: #b29dd2e3;
}

#flowers {
    animation-name: movingAround;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    width: 450px;
}

@keyframes movingAround {
    0% {
        transform: translateX(0px);
    }

    48% {
        transform: translateX(600px);
    }
    50% {
        transform: rotateY('180deg') translateX(-600px);
    }
    98% {
        transform: translateX(0px) rotateY('180deg');
    }
    100% {
        transform: translateX(0px);
    }
}
    /* solution */
    article {
        position: relative;

    }
    article section{
        position: absolute;
        top: 2.44em;
        width: 700px;
        left: -700px;
        padding: 0 1em 0.5em 0.5em;
        background-color: rgba(16, 16, 16, 0.95);
        transition: transform 0.5s;
      }
      
    article section nav{
        width: 110%;
        text-align: right;
        background-color: darkslateblue;
        padding: 0.5em;
    }

    .visible {
        transform: translateX(690px);
    }


@media screen and (max-width: 768px) {
 
    @keyframes movingAround {
        0% {
            transform: translateX(0px);
        }
    
        48% {
            transform: translateX(100px);
        }
        50% {
            transform: rotateY('180deg') translateX(-100px);
        }
        98% {
            transform: translateX(0px) rotateY('180deg');
        }
        100% {
            transform: translateX(0px);
        }
    }
    #flowers {
        width: 300px;
    }
    
    
}