@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

/* CSS Variables */
:root {
  --primary-font: "Lato", sans-serif;
  --secondary-font: "Playfair Display", serif;
  --primary-color: #9a031a;
  --secondary-color: #0f4c5c;
  --third-color: #cca43b;
  --light-color: #ffffff;
  --dark-color: #000000;
  --background-color: rgba(8, 8, 8, 0.5);
  --bs-gutter-x: 0;
}

/* Global Styles */
body {
  background-color: #ffffff;
  opacity: 0.8;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(
    45deg,
    #f6f6f6 0,
    #f6f6f6 1px,
    #ffffff 0,
    #ffffff 50%
  );
}

h1 {
  font-family: var(--secondary-font);
  color: var(--primary-color);
}

h2 {
  font-family: var(--secondary-font);
  color: var(--secondary-color);
}

h3 {
  font-family: var(--primary-font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--light-color);
}

h4 {
  font-family: var(--secondary-font);
  color: var(--grey-color);
}

p {
  font-family: var(--primary-font);
  font-size: 1rem;
}

a {
  color: var(--light-color);
  text-decoration: none;
}

a:hover {
  color: var(--third-color);
}

/* Map */
#map {
  width: 100%;
  height: 100%;
}

/* Home page image buttons */
.buttons {
  filter: grayscale();
}

/* Social media icons */
.social-icons {
  display: flex;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
}

.social-icons li {
  list-style: none;
}

.social-icons a {
  color: inherit;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: var(--third-color);
}

/* Contact form */
.field {
  margin-bottom: 10px;
}

.field label {
  display: block;
  font-size: 1rem;
  color: var(--dark-color);
}

.field input {
  display: block;
  min-width: 20rem;
  line-height: 1.5;
  font-size: 1rem;
}

input[type="submit"] {
  display: block;
  padding: 6px 30px;
  font-size: 1rem;
  background-color: var(--secondary-color);
  color: var(--light-color);
  border: none;
}

.heading1 {
  font-family: var(--secondary-font);
  color: var(--light-color);
  text-shadow: 2px 2px var(--dark-color);
}

/* Feedback form */
.field {
  margin-bottom: 10px;
}

.field label {
  display: block;
  font-size: 1rem;
  color: var(--dark-color);
}

.field input {
  display: block;
  min-width: 20rem;
  line-height: 1.5px;
  font-size: 1rem;
}

input[type="submit"] {
  display: block;
  padding: 6px 30px;
  font-size: 1rem;
  background-color: var(--secondary-color);
  color: var(--light-color);
  border: none;
}

/* Input box for Google Maps */
#address {
  max-width: 100%;
  padding: 1rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}

#locations,
#gallery {
  background-color: var(--light-color);
}
/* Main image */
#background {
  background: url(../images/main-image.webp) no-repeat center center / cover;
  height: 50rem;
  width: auto;
}

/* Footer */
#footer {
  background-color: var(--secondary-color);
  color: var(--light-color);
}
/* Nav bar and dropdown menu */
.navbar-dark,
.dropdown-item {
  background-color: var(--secondary-color);
  color: var(--light-color);
  font-family: var(--secondary-font);
  font-weight: 700;
  font-size: 1.2rem;
}

.nav-link:hover {
  color: var(--third-color);
}

/* Buttons */
.btn-primary {
  background-color: var(--secondary-color);
  border: none;
  color: var(--light-color);
}

.btn-primary:hover {
  background-color: var(--primary-color);
  color: var(--light-color);
  border: var(--primary-color);
}

.container-fluid {
  padding: 0;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/* iframe for map */
.iframe {
  width: 100%;
  min-height: 18rem;
}

.section {
  background-color: var(--light-color);
}

/* Greeting */
.greeting {
  color: var(--light-color);
  font-size: 1.5rem;
  background: var(--grey-color);
  text-align: left;
  text-shadow: 1px 1px var(--dark-color);
}

/* Cities */
.cities {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  height: 2.5rem;
  position: relative;
  font-family: var(--secondary-font);
  text-shadow: 1px 1px var(--dark-color);
}

.cities li {
  font-size: 1.5rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  margin: 0;
}

/* Gallery */
.card img {
  transition: filter 0.4s ease;
  filter: grayscale(100%);
  cursor: pointer;
}

.card img.color {
  filter: grayscale(0%);
  filter: drop-shadow(6px 6px 8px rgb(68, 15, 70));
}

/* Container over main image */
.header-container {
  position: relative;
  width: auto;
}

.centred-header-text {
  background-color: var(--background-color);
  position: absolute;
  top: 40%;
  left: 20%;
  transform: translate(-25%, -25%);
  color: var(--light-color);
  font-size: 2em;
  text-align: center;
}