
.review1 {
    width: 50%;
    align-content:center;
    border: 10px solid #a1a5d1;
    border-radius: 25px;
    padding: 20px;
    margin: auto;
    color:white;
    text-align: center;
}
.review2 {
    width: 50%;
    align-content:center;
    border: 10px solid #d1a1a5;
    border-radius: 25px;
    padding: 20px;
    margin: auto;
    color:white;
    text-align: center;
}
body{
    background-color: #d1b5a1 ;
      
}
.form{
    padding-left: 10%;
    padding-right: 10%;
    background-color: rgb(0, 0, 0, 0.3);
    padding: 2em 2em;
}
a{
    text-decoration: none;
    color: rgb(255, 184, 152);
}
div{
    color:white;
    size:400%;
}
.frontpage{
    text-align: center;
    width: 100%;
    color:rgb(255, 255, 255);
}
.frontpage h1{
    font-size: 300%;
}
.frontpage p{
    font-size: 150%;
}

.frontpage > * {
    margin: 1em 0em;
    margin-left: auto;
    margin-right: auto;
}

.table-title {
    font-weight: bold;
}

td{
    font-size: 150%;
}
.header{
    font-size: 120%;
    text-decoration: underline;
}
.table-wrapper {
  border: 1px solid black;
  border-radius: 20px;
  margin: 10%;
}

table, td, th {
  border: 1px solid black;
  padding: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-style: hidden;
}
#menu{
    color:white;
}

.menu-title {
    margin: 1em 0em;
}

.menu-item {
    margin: 1em 0em;
}

.menu-content {
    font-weight: 400;
    font-size: 25px;
}

.menu-price {
    margin: 0em 1em;
    font-weight: 400;
    background-color: rgb(187, 117, 85);
    padding: 2px;
    font-size: 18px;
    border-radius: 20%;
}

.menu-ingredients {
    font-weight: 100;
    color: rgb(235, 235, 235);
    margin-left: 1em;
    font-size: 16px;
}

.menu-section {
    padding: 1em 0em;
    margin: 50px 0px;
    background-color: rgb(0, 0, 0, 0.3);
}

.navbar {
    background-color: rgb(0, 0, 0, 0.6);
    padding: 1.2rem 1rem;
}

.content {
    max-width: 1300px;
    margin: auto;
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

/* navbar text */
/* default */
.navbar-light .navbar-nav .nav-link {
    color: white;
}

/* current page */
.navbar-light .navbar-nav .active>.nav-link {
    color:rgb(155, 155, 155);
}

/* hover */
.navbar-light .navbar-nav .nav-link:hover {
    color:rgb(221, 221, 221);
}

.navbar-toggler {
    background-color: white;
}

/* I got help with both selectors below from stackoverflow, there was a lot of troubleshooting to get the dimmed background image to stay dimmed on the pages that scrolled*/
.wrapper{
    background:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url(../images/friends-having-pasta-dinner-white-wine.webp);
       background-repeat: no-repeat;
       background-position: 50% 0;
       background-size: cover;
}

.form {
    max-width: 1000px;
    margin: auto;
}