/* Reset and Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography Styles */
.location-title {
  font-family: righteous;
  font-size: 45px;
  color: rgb(74, 74, 74);
  text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  top: 15px;
  letter-spacing: 2px;
  text-align: center;
}

/* Header Styles */
header {
  background-color: black;
  color: salmon;
  text-align: center;
  padding-top: 35px;
}

header h1 {
  font-size: 65px;
  font-family: 'Righteous', sans-serif;
}

nav {
  background-color: salmon;
  text-align: left;
  padding: 7px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: kay pho du;
}

nav ul li {
  display: inline;
  margin: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #06030d;
  font-weight: normal;
  padding: 10px 15px;
  background-color: transparent;
  transition: background-color 0.35s, color 0.35s;
  border: none;
}

nav ul li a:hover,
nav ul li a:active {
  background-color: #3280b4;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Rotating Slideshow Styles */
.hero-container {
  position: relative;
  overflow: visible;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.414), #5fbaffd7, #37fef4, rgba(0, 0, 0, 0.517));
  padding: 20px 0;
}

.slideshow {
  display: flex;
  overflow: visible; 
  animation: rotateImages 50s linear infinite;
  width: 300%;
  height: 250px;
  margin: 40px 0;
}


.slideshow img {
  width: 375px;
  margin-right: 120px;
  max-height: 100%;
}

@keyframes rotateImages {
  0%, 25% {
    transform: translateX(0);
  }
  50%, 75% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Table Styles */
table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

thead th {
  background-color: gray;
  color: white;
  border: none;
  padding: 10px;
}

tbody td {
  background-color: rgba(250, 128, 114, 0.788);
  border: 1px solid black;
  padding: 10px;
}

tfoot td {
  background-color: gray;
  border: none;
  color: white;
}

tbody td:first-child {
  text-align: left;
}

tbody td:last-child {
  background-color: gray;
  color: white;
  border: none;
}

tfoot th {
  background-color: gray;
  border: none;
  color: white;
  padding: 10px;
}

/* Location Information Styles */
#store-info {
  list-style-type: none;
  background: linear-gradient(to bottom, #0e63a4, #070f48, #060d42, rgb(0, 0, 0));
  color: rgb(229, 229, 229);
  border: 20px inset #0e75c3;
  margin: 25px auto;
  width: 60%;
}

.righteous-font {
  font-family: 'Righteous', sans-serif;
  font-size: 25px;
  margin: 25px 0 10px 20px;
  color: rgb(222, 217, 217);
}

.sub-content {
  font-family: kay pho du;
  margin-left: 35px;
  padding-bottom: 10px;
  color: rgb(210, 208, 208);
}

/* Footer Styles */


html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1; /* The container expands to push the footer to the bottom */
}

footer {
  background: linear-gradient(to top, #fff, #ccc);
  color: rgb(28, 28, 30);
  text-align: left;
  padding: 15px;
  width: 100%;
  font-family: kay pho du;
  clear: both;
}



/* Form Styles */
.input-group {
  display: inline-block;
  margin-right: 10px;
  color: rgb(10, 12, 14);
  font-family: kay pho du;
}

.input-row {
  margin-bottom: 10px;
}

label {
  padding: 5px;
  font-size: 12px;
  text-align: left;
}

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  margin: 30px 0;
}

#location-form {
  border: 5px solid #8fa6b6;
  box-shadow: 3px 2px 2px black;
  padding: 25px 20px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

legend {
  font-family: 'Righteous', sans-serif;
  font-size: 20px;
  color: rgb(221, 113, 101);
  position: absolute;
  top: -25px;
  left: 4px;
  text-shadow: 0px 1px 1px rgb(95, 89, 89);
}

#add-location-button {
  background-color: rgb(100, 98, 108);
  color: white;
  height: 30px;
  width: 100px;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
  font-family: sans-serif;
  position: absolute;
  top: 41%;
  right: 47%;
  
}

#add-location-button:hover,
#add-location-button:active {
  background-color: #3280b4;
  color: white;
}

.table-container {
  margin: 0 60px 30px 60px;
}

/* Homepage Section Styles */
.social-proof {
  text-align: center;
  border: 9px inset #5fbaffd7;
  background-color: #1370b7d7;
  width: 60%;
  margin: 80px auto;
  color: rgb(255, 255, 255);
  padding: 20px 0;
}

.social-proof :nth-child(1) {
  font-size: 35px;
  margin: 20px 0;
  font-weight: 700;
  font-family: righteous;
  letter-spacing: 2px;
  text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3);
}

.social-proof p {
  font-size: 18px;
  margin: 10px 0;
  font-family: kay pho du;
}