body,
html {
  font-family: "Raleway", sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #bbebfc;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
}

/* @media only screen and (min-width: 992px) {
  .hero {
    height: 800px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.737);
  }
  .hero-img {
    height: 800px;
    width: 100%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

@media only screen and (max-width: 800px) {
  .hero {
    height: 500px;
    width: 100%;
    display: flex;
    background-color: rgba(255, 255, 255, 0.737);
  }
  .hero-img {
    height: 500px;
    width: 100%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
} */

.title {
  text-align: center;
  font-size: 50px;
}

.emoji {
  display: flex;
  justify-content: center;
  text-align: left;
}
.about,
.prof {
  background-color: #ffffff;
  padding-bottom: 30px;
  text-align: center;
}

.prof {
  padding-top: 10px;
}

.title-words,
.horses {
  font-family: "Shadows Into Light", cursive;
  text-align: center;
}

.links a {
  font-size: 15px;
}
.container {
  margin: 30px;
  margin-left: 50px;
}

.container-fluid {
  margin-top: 20px;
}

.img-container {
  margin-top: 31px;
}

.large-intro {
  font-size: 100px;
}

.navbar {
  padding: 20px;
  text-align: center;
  background: #ffffff;
  color: rgb(0, 0, 0);
  font-size: 30px;
  margin-bottom: 30px;
}

ul {
  list-style: none;
}

li {
  margin: 12px 30px;
}

a {
  text-decoration: none;
  color: black;
  font-size: x-large;
}

a:hover {
  color: white;
}

.profile {
  max-width: 100%;
  border-radius: 80px;
}

.navbar a {
  text-decoration: none;
  margin: 20px;
  box-shadow: inset 0 0 0 0 #bbebfc;
  color: #000000;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
  transition: color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.navbar a:hover {
  box-shadow: inset 100px 0 0 0 #ffbfa0;
  color: white;
}

.project-background a:hover {
  color: #ffbfa0;
}

.intro-contact {
  display: flex;
  justify-content: space-evenly;
  margin: 10px;
}

.intro-contact a {
  color: #ffbfa0;
  font-size: 50px;
  margin: 10px;
}

.swiper {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  text-align: center;
}

.swiper-button-next,
.swiper-button-prev {
  color: white;
}

.images {
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
}

.images img {
  height: 200px;
  width: 200px;
  border-radius: 100px;
}

.horses {
  text-align: center;
}

hr {
  border-top: 5px solid #ffa578;
}

.footer a,
.nav a {
  color: white;
  font-size: 30px;
  margin: 10px;
}

footer,
nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffbfa0;
  height: 100px;
  padding: 10px;
}

.nav .navbar-brand {
  color: black;
  font-size: 15px;
}

.project-background {
  background-color: #ffffffa3;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border: 3px solid white;
  text-align: left;
}

.project-background img {
  height: 150px;
  width: 220px;
  box-shadow: 10px 10px 5px rgba(201, 200, 200, 0.781);
  margin-bottom: 10px;
}

.bottom {
  margin-bottom: 70px;
}