styleForms.css

body {
    width: 100vw;
    height: 100vh;
    font-family: 'Roboto Mono', monospace;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("FoodImagesVideo/ramen-7187810_1920.jpg");
    background-position: contain;
    background-color: black;
}

form {
    width: 500px;
    height: 450px;
    border: 3px solid #87909f;
    background-color: #ffffff;
    border-radius: 2rem;


}

h1 {

    margin-left: 35px;
    margin-bottom: 60px;
    text-decoration-line: underline;
}

div {
    margin: 10px;

    text-align: center;
}

input {
    margin: 5px;
}

button {
    margin-left: 197px;

}

input:hover {
    box-shadow: 3px 3px red;
}

#data:hover {
    box-shadow: 3px 3px red;

}

button:hover {
    box-shadow: 3px 3px red;
}

.pagination {
    display: inline-block;
    width: auto;
    height: 8vh;
    margin-top: 20px;
    border-radius: 20px;
    background-color: white;
    border: 3px solid #87909f;

}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}



a {
    color: #f8edeb;

}

a:hover {
    color: aqua;

}

a:active {
    color: yellow;
}

.topNav,
.bottomNav {
    width: 100vw;
    height: 2vh;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

}

ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;


}



.breadCrumbs {
    width: 100vw;
    height: 10vh;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 30px;
}

.breadCrumbs li::after {
    content: ">  ";
}
/* used pseudo element:: after to insert symbol for breadcrumbs and ::after ="" empty to denote to stop after that. */

.breadCrumbs li:last-child::after {
    content: "";
}

.menu {
    display: none;
}


@media (max-width:619px) {

    body {
        height: auto;
    }

    .topNav {
        display: none;
    }

    form {
        width: auto;

    }

    button {
        margin-left: 50px;
    }

    .pagination {
        width: auto;
        height: auto;
    }


}