* {
    overflow: hidden;
    padding: 0%;
    margin: 0%;
    font-family: 'Josefin Sans', sans-serif;
    list-style-type: none;

}

.nav-bar {
    background: black;
}

.nav-bar li {
    padding: 23px;
    color: white;
    font-weight: bolder;
    font-size: 20px;
    transition: 600ms;
}

.nav-bar li:hover {
    background: white;
    color: black;
    border-radius: 15px;
    font-size: 1000;
}

ul {
    display: flex;
    flex-direction: row;
    padding: 5px;

}

body {
    background: right 50%/ 100% 150% url(https://images.unsplash.com/photo-1584931423298-c576fda54bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);

}

.main {
    color: white;
    background-color: rgba(7, 7, 8, 0.844);
    margin-left: 4rem;
    margin-right: 4rem;
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    padding: 20px;
}

h1 {
    text-align: center;
    font-family: 'Satisfy', cursive;
    font-size: 30px;




}

h2 {
    text-align: center;
    font-family: 'Satisfy', cursive;
    font-size: 20px;

}


h3 {
    font-family: 'Satisfy', cursive;
    font-size: 25px;
}

p {
    font-family: 'Titillium Web', sans-serif;
    font-size: 16px;

}


@media screen and (max-width: 600px) {
    * {
        overflow: visible;
        scroll-behavior: smooth;
        scrollbar-width: 1px;
        margin: -1% ;
        margin-top: 0px;

    }


    .main {
        margin-left: 1rem;
        margin-right: .5rem;
        margin-top: 1.5rem;
        margin-bottom: 1.4rem;
        display: flex;
        flex-direction: column;
        border-radius: 15px;
        padding: 20px;
    }


    nav-bar {
        background: black;
        overflow:hidden ;
    }

    .nav-bar li {
        padding: 20px;
        color: white;
        font-weight: bolder;
        font-size: 15px;
        transition: 600ms;
    }



    ul {
        display:flexbox;
        margin-left: 0.5rem;
        flex-direction: row;
        padding: 3px;

    }

}