@font-face {
  font-family: BowlbyOne;
  src: url(../fonts/BowlbyOne-Regular.ttf);
}

@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Light.ttf);
}


:root {
  --gris: #151c1e;
  --naranja: #ff4800;
  --blanco: #e8e8e8;
}

body {
  font-family: "Montserrat", Verdana, Geneva, Tahoma, sans-serif;
}

img, .img-fluid {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-family: "BowlbyOne", Impact, 'Arial Narrow Bold', sans-serif;
  font-size: 5rem;
  color: var(--blanco);
  background-color: var(--naranja);
  text-align: center;
  padding: 1rem 0;
  margin: 0;
}

h2 {
  font-family: "BowlbyOne", Impact, 'Arial Narrow Bold', sans-serif;
  color: var(--naranja);
  border-bottom: solid 1px var(--naranja);
}

h3 {
  font-family: "BowlbyOne", Impact, 'Arial Narrow Bold', sans-serif;
}

header {
  background-color: var(--gris);
}

nav li {
  text-align: center;
}

nav a {
  text-decoration: none;
  font-family: "BowlbyOne", Impact, 'Arial Narrow Bold', sans-serif;
  color: var(--blanco);
  padding: .25rem;
  text-align: center;
}

nav a:hover {
  color: var(--gris);
  background-color: var(--blanco);
}

#hero {
  background-image: url(../img/banner.jpg);
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
  height: 70vh;
}

.btn-primary {
  background-color: var(--gris);
  color: var(--blanco);
  border: none;
}

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

/* Si no btn-outline-light
.btn-form {
  color: var(--blanco);
  border: solid 1px var(--blanco);
  width: 100%
}

.btn-form:hover {
  color: var(--gris);
  background-color: var(--blanco);
}

*/

#equipo {
  background-color: var(--gris);
  color: var(--blanco);
}

#rides {
  background-color: var(--naranja);
  color: var(--blanco);
}

#rides h2 {
  border-color: var(--blanco);
  color: var(--blanco);
}

footer {
  background-color: var(--gris);
  color: var(--blanco);
}