/* This section of the code defines the global styles for the page, including the font family, text transform, and styles for the logo and container */

body {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
}

.logo {
display: block;
width: 300px; /* Adjust the width to the size of your logo */
margin-bottom: 50px;

}

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 70vh;
}

/* This section defines the styles for the form, including the styles for the form group and the primary and secondary buttons */

.form-group {
display: flex;
flex-direction: column;
align-items: center;
font-size: 24px;
}

button.btn-primary {
background-color: #4c1b81;
font-size: 23px;
}
.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:active:focus {
background-color: #4c1b81 !important;
box-shadow: none !important;
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary:active:focus {
background-color: #4c1b81 !important;
box-shadow: none !important;
}

h1 {
font-size: 36px;
text-align: center;
margin-bottom: 50px;
}

form {
background-color: #ffffff;
padding: 50px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

label {
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}

/* This section defines the styles for the food banks table and its elements */

#foodbanks {
  margin-top: 30px;
    overflow-x: auto;
}

.table {
  margin-bottom: 0;
}

th {
  background-color: #f4f4f4;
  font-weight: bold;
  text-align: left;
}

tbody tr:nth-of-type(odd) {
  background-color: #f4f4f4;
}

td {
  vertical-align: middle;
}

button.btn-secondary {
  background-color: #4c1b81;
  margin: auto;
  font-size: 20px;
  margin-top: 15px;
  display: block;
}


.footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      padding: 10px;
    z-index: 999;
    }

    .footer-text {
      font-size: 14px;
      color: black;
      vertical-align: middle;
    }

/* This section defines the media queries for smaller screens */

@media (min-width: 992px) {
/* Adjust the styles for larger screens */

.logo {
width: 350px;
margin-bottom: 60px;
}

.form-group {
font-size: 28px;
}

h1 {
font-size: 40px;
margin-bottom: 60px;
}

form {
padding: 60px;
}

label {
font-size: 24px;
margin-bottom: 15px;
}

button.btn-primary {
font-size: 28px;
}

button.btn-secondary {
font-size: 22px;
}

td {
font-size: 18px;
}
}



/* This section has been added to make content vertical on smaller screens */

@media (max-width: 576px) {
#foodbanks table,
#foodbanks thead,
#foodbanks tbody,
#foodbanks th,
#foodbanks td,
#foodbanks tr {
display: block;
text-align: center;
}
#foodbanks tbody tr {
height: auto;
}
#foodbanks tbody {
overflow-x: hidden;
}
#foodbanks td {
border-bottom: none;
}
#foodbanks thead {
display: none;
}
.footer {
 position: relative;
 margin-top: 30px;
 padding-bottom: 10px;
  }
}