@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --color1: #ebdbb6;
  --color2: #d4be98;
  --color3: #f7d9b2;
  --color4: #d4c298;
  --orange: #ff581a;
}

h1,
h2,
h3,
h4,
p {
  font-family: Montserrat;
}

h1 {
  font-size: 60px;
}

p {
  font-size: 18px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

button {
  border: 1px solid grey;
  border-radius: 15px;
  background: none;
  font-size: 20px;
  font-family: "Montserrat";
}

button:hover,
button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.nav {
  background-color: var(--color4);
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.nav a {
  float: left;
  color: white;
  padding: 24px 30px;
  text-decoration: none;
  font-family: Montserrat;
  font-size: 18px;
  margin-right: 10px;
}

.logo {
  color: white;
  margin-left: 20px;
}

.nav a:hover {
  background-color: black;
}

.nav-active {
  background-color: grey;
}

.bank1,
.bank2,
.bank3,
.bank4 {
  width: 20%;
  float: left;
  padding: 20px;
  text-align: center;
}

.first-page {
  color: black;
  top: 0;
  text-align: center;
}

.title {
  margin-top: 25vh;
}

.second-page {
  margin-left: 50px;
  margin-top: 35vh;
}

.third-page {
  margin-left: 50px;
  text-align: center;
  margin-top: 100px;
}

.three-facts {
  width: 31%;
  float: left;
  text-align: center;
  padding: 10px;
  vertical-align: baseline;
}

.about-h1 {
  font-size: 50px;
}

.did-you-know,
.source-fact {
  color: var(--orange);
}

.contact {
  margin-left: 50px;
}

.contact-form-field {
  line-height: 20px;
  font-family: "Montserrat";
  width: 40%;
  height: 40px;
  font-size: 16px;
  outline: 0;
  border-width: 0 0 2px;
}

#contact-message {
  width: 70%;
  height: 150px;
}

#contact-button {
  margin-top: 40px;
  font-size: 20px;
  padding: 10px;
  margin-bottom: 50px;
}

#contact-button:hover {
  cursor: pointer;
}