html {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

body {
  background-color: #F5EEE1;
  padding: 0;
  margin: 0;
}

#top {
  margin: 0;
  padding: 0;
}

.home-body {
  margin: 0;
  padding: 0;
}

.container-fluid {
  padding: 0;
  margin: 0;
}

section a:hover {
  background-color: #93B2CE;
  color: #3F2E24;
}

.row {
  padding: 0;
}

.scrollcontainer {
  width: 100%;
  height: 2.5rem;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  color: #fff;
}

.scrollcontainer .scroll {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
  animation: loop 30s linear infinite;
}

.fade {
  width: 100%;
  position: absolute;
  background: linear-gradient(90deg, #000, transparent 30%, transparent 90%, #000);
  inset: 0;
}

@keyframes loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-20%);
  }
}
.item {
  display: flex;
  align-items: center;
  color: #e2e8f0;
  font-size: 0.9rem;
  background-color: #853B56;
  padding: 0.7rem 1rem;
}

nav {
  background-color: #D49E60;
  padding: 0 !important;
  margin: 0 !important;
}
nav .navbar {
  padding: 0;
  margin: 0;
}
nav li {
  padding: 0;
  margin: 0;
  font-family: "nobel", sans-serif;
  font-weight: 700;
}
@media (min-width: 992px) {
  nav li {
    font-size: 16px;
  }
}
nav .active {
  border-bottom: 4px solid #93B2CE;
  border-radius: 2%;
  color: #853B56 !important;
  display: none;
}
@media (min-width: 992px) {
  nav .active {
    display: block;
  }
}
nav .nav-link:hover {
  color: #853B56;
}

footer {
  background-color: hsl(32, 57%, 60%);
}
footer button {
  background-color: #D49E60;
  border: 0 #D49E60;
}
footer .sal {
  margin-top: 6em;
  margin-left: 1em;
}
footer ul {
  list-style: none;
  display: grid;
  grid-template-columns: 2fr 3fr 3fr;
}
@media (min-width: 992px) {
  footer ul {
    margin-left: 1em;
  }
}
footer p {
  font-family: "nobel", sans-serif;
  font-weight: 700;
  color: #F5EEE1;
  margin-top: 2.5em;
  margin-left: 5em;
}
@media (min-width: 992px) {
  footer p {
    font-size: 18px;
  }
}
footer a {
  text-decoration: none;
  font-family: "nobel", sans-serif;
  font-weight: 700;
  color: #F5EEE1;
  margin-left: 5em;
  margin-top: 5em;
}
@media (min-width: 992px) {
  footer a {
    font-size: 18px;
  }
}
footer a:hover {
  color: #853B56;
}
footer p:hover {
  color: #853B56;
}
footer img {
  width: 100%;
  margin-top: 2em;
}
footer .arrow {
  margin-top: -6em;
}
footer .arrow path {
  fill: #3F2E24;
}
footer .arrow path:hover {
  fill: #853B56;
}
@media (min-width: 768px) {
  footer .arrow .arrow {
    margin-left: 6em;
  }
}
@media (min-width: 992px) {
  footer .arrow .arrow {
    margin-left: 7em;
  }
}
@media (min-width: 1200px) {
  footer .arrow .arrow {
    margin-left: 2em;
  }
}

hr {
  border-top: 8px solid #93B2CE;
  border-radius: 20px;
  opacity: 100%;
  margin-left: 3em;
  margin-right: 3em;
}
@media (min-width: 768px) {
  hr {
    margin-left: 6em;
    margin-right: 6em;
  }
}
@media (min-width: 992px) {
  hr {
    margin-left: 12em;
    margin-right: 12em;
  }
}

h1 {
  font-family: "nobel", sans-serif;
  font-weight: 700;
}

h2 {
  font-family: "nobel", sans-serif;
  font-weight: 700;
  color: #3F2E24;
}

h3 {
  font-family: "nobel", sans-serif;
  font-weight: 700;
  color: #D49E60;
  font-size: 18px;
}

p {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
}

/* Start Home */
@media (min-width: 768px) {
  .home-intro {
    margin-bottom: 10em;
  }
}
@media (min-width: 992px) {
  .home-intro {
    margin-bottom: 6em;
  }
}
.home-intro .introimage {
  height: 40%;
}
.home-intro h1 {
  font-size: 16px;
  text-align: center;
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  margin-top: 2em;
  margin-bottom: 2em;
}
@media (min-width: 768px) {
  .home-intro h1 {
    margin-bottom: 0;
    font-size: 18px;
  }
}
.home-intro span {
  text-align: center;
  font-size: 18px;
  background-color: #BE6348;
  border: #3F2E24 solid 2px;
  border-radius: 5em;
  padding: 0.2em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  font-family: "nobel", sans-serif;
  font-weight: 700;
  color: #F5EEE1;
  position: absolute;
  margin-top: 5em;
}
@media (min-width: 768px) {
  .home-intro span {
    margin-top: 8em;
    padding-left: 4em;
    padding-right: 4em;
  }
}
@media (min-width: 1200px) {
  .home-intro span {
    margin-top: 7.5em;
    padding-left: 2em;
    padding-right: 2em;
  }
}
.home-intro .intro-planet img {
  border: #3F2E24 solid 2px;
  border-radius: 20em;
  position: absolute;
}
.home-intro .intro-planet {
  position: absolute;
  margin-top: 9.5em;
}
@media (min-width: 768px) {
  .home-intro .intro-planet {
    margin-top: 13em;
  }
}
@media (min-width: 992px) {
  .home-intro .intro-planet {
    margin-top: 15em;
  }
}
@media (min-width: 1200px) {
  .home-intro .intro-planet {
    margin-top: 20em;
  }
}

.home-content {
  text-align: center;
}
.home-content h2 {
  margin-top: 1em;
  margin-bottom: 1em;
}

.popspots {
  padding: 0;
}
.popspots ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
.popspots .poptext {
  background-color: #864332;
  border-left: 2px solid #3F2E24;
  border-bottom: 2px solid #3F2E24;
  border-top: 2px solid #3F2E24;
}
.popspots h3 {
  margin-top: 0.8em;
}
@media (min-width: 992px) {
  .popspots h3 {
    margin-top: 3.5em;
  }
}
.popspots img {
  border-bottom-right-radius: 20em;
  border-top-right-radius: 20em;
  width: 100%;
  border: 2px solid #3F2E24;
}
.popspots p {
  color: #F5EEE1;
  padding: 0.3em;
}
.popspots a {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  color: #3F2E24;
  background-color: #F5EEE1;
  border: #3F2E24 solid 2px;
  border-radius: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.circ {
  display: none;
  margin-top: 2em;
  margin-left: 3em;
}
.circ img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 50%;
}
@media (min-width: 1200px) {
  .circ {
    display: block;
  }
}

.circ2 {
  display: none;
  margin-top: 4.5em;
}
.circ2 img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 50%;
}
@media (min-width: 1200px) {
  .circ2 {
    display: block;
  }
}

.popspots2 {
  margin-top: 3em;
  margin-bottom: 3em;
  margin-left: 2em;
  padding: 0;
}
.popspots2 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
.popspots2 .poptext2 {
  background-color: #864332;
  border-right: 2px solid #3F2E24;
  border-bottom: 2px solid #3F2E24;
  border-top: 2px solid #3F2E24;
}
.popspots2 h3 {
  margin-top: 0.8em;
}
@media (min-width: 992px) {
  .popspots2 h3 {
    margin-top: 3.5em;
  }
}
.popspots2 img {
  border-bottom-left-radius: 20em;
  border-top-left-radius: 20em;
  width: 100%;
  border: 2px solid #3F2E24;
}
.popspots2 p {
  color: #F5EEE1;
  padding: 0.3em;
}
.popspots2 a {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  color: #3F2E24;
  background-color: #F5EEE1;
  border: #3F2E24 solid 2px;
  border-radius: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.popspots3 {
  margin-top: 3em;
  margin-bottom: 3em;
  margin-left: 2em;
  padding: 0;
}
@media (min-width: 1200px) {
  .popspots3 {
    margin-top: -14em;
  }
}
.popspots3 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
.popspots3 .poptext2 {
  background-color: #864332;
  border-right: 2px solid #3F2E24;
  border-bottom: 2px solid #3F2E24;
  border-top: 2px solid #3F2E24;
}
.popspots3 h3 {
  margin-top: 0.8em;
}
@media (min-width: 992px) {
  .popspots3 h3 {
    margin-top: 3.5em;
  }
}
.popspots3 img {
  border-bottom-left-radius: 20em;
  border-top-left-radius: 20em;
  width: 100%;
  border: 2px solid #3F2E24;
}
.popspots3 p {
  color: #F5EEE1;
  padding: 0.3em;
}
.popspots3 a {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  color: #3F2E24;
  background-color: #F5EEE1;
  border: #3F2E24 solid 2px;
  border-radius: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

@media (min-width: 768px) {
  .planahead {
    margin-bottom: 2em;
  }
}
.planahead img {
  width: 100%;
  border: #3F2E24 solid 2px;
  border-radius: 20em;
}
.planahead a {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  color: #3F2E24;
  background-color: #F5EEE1;
  border: #3F2E24 solid 2px;
  border-radius: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  position: absolute;
  margin-top: 13em;
}
@media (min-width: 768px) {
  .planahead a {
    margin-left: 2em;
    margin-top: 15em;
    padding-left: 1em;
    padding-right: 1em;
  }
}
@media (min-width: 1200px) {
  .planahead a {
    margin-left: 1em;
    margin-top: 20em;
  }
}
.planahead a:hover {
  background-color: #93B2CE;
  color: #3F2E24;
}

.map-info {
  background-color: #853B56;
  padding-bottom: 3em;
}
@media (min-width: 992px) {
  .map-info {
    padding-bottom: 4em;
  }
}
.map-info h4 {
  color: #F5EEE1;
  font-size: 24px;
  font-family: "nobel", sans-serif;
  font-weight: 700;
  margin-left: 2em;
  margin-top: 1em;
}
.map-info h5 {
  color: #F5EEE1;
  font-size: 16px;
  margin-left: 3em;
  margin-bottom: 1em;
}
@media (min-width: 992px) {
  .map-info h5 {
    margin-bottom: 2em;
  }
}
.map-info a {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  color: #3F2E24;
  background-color: #F5EEE1;
  border: #3F2E24 solid 2px;
  border-radius: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-left: 3em;
}
@media (min-width: 768px) {
  .map-info a {
    margin-left: 3em;
    margin-top: 15em;
    padding-left: 1em;
    padding-right: 1em;
  }
}
@media (min-width: 992px) {
  .map-info a {
    margin-left: 3em;
  }
}
.map-info a:hover {
  color: #3F2E24;
  background-color: #93B2CE;
}

.map {
  position: relative;
  padding: 0;
}
.map .button {
  border: none;
  background: transparent;
  position: absolute;
  font-size: 2.5rem;
  color: #853B56;
}
.map .button h3 {
  color: #3F2E24;
  background-color: #F5EEE1;
  padding-left: 0.6em;
  padding-right: 0.6em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  border: 2px solid #3F2E24;
  border-radius: 20em;
}
.map .button.monespa {
  top: 4.5%;
  left: 30%;
}
.map .button.monentha {
  top: 6%;
  left: 41%;
}
.map .button.montaike {
  top: 11%;
  left: 50.5%;
}
.map .button.beggarscanyon {
  top: 4.5%;
  left: 50%;
}
.map .button.pikeoasis {
  top: 31%;
  left: 45%;
}
.map .button.jabbaspalace {
  top: 20%;
  right: 27%;
}
.map .button.bestine {
  top: 39%;
  right: 36%;
}
.map .button.carnthout {
  bottom: 45%;
  right: 23%;
}
.map .button.pitofcarcoon {
  top: 23%;
  right: 4.5%;
}
.map .button.moneisley {
  bottom: 35%;
  right: 4.5%;
}
.map .button.motestaoasis {
  bottom: 23%;
  right: 14%;
}
.map .button.anchorhead {
  bottom: 16%;
  right: 4%;
}
.map .button.toschestation {
  bottom: -1%;
  right: 13.5%;
}
.map .button .info {
  position: absolute;
  top: 0;
  left: 45px;
  width: 120px;
  background-color: #93B2CE;
  color: #3F2E24;
  padding: 1rem;
  font-size: 1rem;
  text-align: left;
  opacity: 0;
  transition: opacity 0.5s;
  border: 2px solid #3F2E24;
  border-radius: 2em;
}
.map .button .info a {
  font-size: 0.8rem;
  display: block;
  color: #3F2E24;
  text-decoration: none;
  border-top: 1px solid #853B56;
}
.map .button .info a:hover {
  color: #BE6348;
}
.map .button:hover .info {
  opacity: 1;
}

.historyone {
  position: relative;
}
@media (min-width: 768px) {
  .historyone {
    margin-top: 2em;
  }
}
.historyone img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 50%;
}
.historyone p {
  font-family: "nobel", sans-serif;
  font-weight: 700;
  position: absolute;
  margin-top: -12em;
  padding: 1.5em;
  padding-right: 1.5em;
}
@media (min-width: 768px) {
  .historyone p {
    font-size: 20px;
  }
}

.historytwo {
  position: relative;
}
@media (min-width: 768px) {
  .historytwo {
    margin-top: 4em;
  }
}
.historytwo img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 50%;
}
.historytwo a {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  color: #3F2E24;
  background-color: #F5EEE1;
  border: #3F2E24 solid 2px;
  border-radius: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  position: absolute;
  margin-top: 2.5em;
  margin-left: 0.5em;
}
@media (min-width: 768px) {
  .historytwo a {
    margin-left: 3em;
    margin-top: 4.5em;
  }
}
@media (min-width: 992px) {
  .historytwo a {
    margin-left: 2em;
    margin-top: 4em;
  }
}
@media (min-width: 1200px) {
  .historytwo a {
    margin-left: 3em;
    margin-top: 5em;
  }
}

.historythree img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 50%;
  margin-bottom: 3em;
}
@media (min-width: 768px) {
  .historythree img {
    margin-top: -3em;
    margin-left: -3em;
  }
}

.involved {
  position: relative;
  width: 100%;
  margin-bottom: 3em;
}
.involved p {
  background-color: #864332;
  margin-top: 1em;
  margin-bottom: 5em;
  padding: 4em;
  padding-right: 3em;
  padding-bottom: 6em;
  border: 2px solid #3F2E24;
  border-radius: 20em;
  color: #F5EEE1;
}
.involved a:hover {
  background-color: #93B2CE;
  color: #3F2E24;
}
.involved a {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  color: #3F2E24;
  background-color: #F5EEE1;
  border: #3F2E24 solid 2px;
  border-radius: 2em;
  padding-left: 0.2em;
  padding-right: 0.2em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  position: absolute;
  margin-left: -3em;
  margin-top: -11em;
}
@media (min-width: 768px) {
  .involved a {
    padding-left: 0.2em;
    padding-right: 0.2em;
    margin-left: -4em;
  }
}
@media (min-width: 992px) {
  .involved a {
    margin-left: -2.5em;
    padding-left: 0.2em;
    padding-right: 0.2em;
  }
}

/* End Home */
/* Start Things To Do */
.carousel-caption {
  color: #F5EEE1;
  display: block !important;
}

@media (min-width: 992px) {
  .carousel-item img {
    height: 60vh;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.events {
  margin-bottom: 3em;
}
.events hr {
  margin-top: 3em;
}
.events h2 {
  text-align: center;
  margin-top: 2em;
}
.events p {
  text-align: center;
  margin-bottom: 4em;
}
.events a {
  margin-left: 2.5em;
}
.events .monespa h3 {
  font-size: 20px;
  color: #F5EEE1;
  text-align: right;
  margin-top: 3em;
  margin-left: 2em;
  margin-right: 1em;
}
.events .descriptor p {
  text-align: left;
  margin-top: 2em;
  margin-right: 2em;
  margin-bottom: 0;
}
.events .cantinacrawl h3 {
  font-size: 20px;
  color: #F5EEE1;
  text-align: left;
  margin-top: 4em;
  margin-left: 2em;
  margin-right: 1em;
}
.events .cantinacrawl button {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #F5EEE1;
  color: #3F2E24;
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  border: 2px solid #3F2E24;
  border-radius: 2em;
  margin-left: 3em;
  margin-top: 1em;
}
.events .cantinacrawl button:hover {
  color: #3F2E24;
  background-color: #93B2CE;
}
.events .descriptor2 p {
  margin-bottom: 2em;
  text-align: left;
}

.upcomingevent {
  margin-bottom: 2em;
}

/* End Things To Do */
/* Start Popular Spots */
.popularspots h2 {
  text-align: center;
  margin-top: 3em;
}
.popularspots h3 {
  color: #F5EEE1;
  font-size: 20px;
  text-align: right;
  margin-left: 2em;
  margin-right: 1em;
  margin-top: 3em;
}

.explain {
  text-align: center;
}
@media (min-width: 992px) {
  .explain {
    margin-bottom: 2em;
  }
}

.descriptors {
  margin-top: 3em;
}

.numba2 h3 {
  text-align: left;
  margin-left: 1em;
  margin-right: 4em;
  margin-top: 2.5em;
  margin-bottom: 0;
}

.descriptors2 p {
  margin-top: 0;
}

.barter {
  margin-top: 3em;
  margin-bottom: 3em;
  height: 50vh;
  -o-object-fit: cover;
     object-fit: cover;
}

.barterimg img {
  width: 100%;
  margin-top: 3em;
}

.nightlife h2 {
  margin-top: 2em;
}
.nightlife P {
  margin-bottom: 3em;
}

.ship {
  margin-top: 3em;
  margin-bottom: 3em;
  height: 50vh;
  -o-object-fit: cover;
     object-fit: cover;
}

.scenery h2 {
  margin-bottom: 0.5em;
  margin-top: 2em;
}
.scenery .explain {
  margin-bottom: 3em;
}

/* End Popular Spots */
/* About Tatooine */
.abouthead {
  margin-bottom: 0;
  position: relative;
}
@media (min-width: 992px) {
  .abouthead {
    height: 25em;
  }
}
.abouthead img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 20em;
  margin-top: 2em;
  margin-bottom: 3em;
}
@media (min-width: 992px) {
  .abouthead img {
    height: 70%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media (min-width: 1200px) {
  .abouthead img {
    height: 60%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.abouthead hr {
  margin-top: 0;
}
.abouthead h1 {
  margin-top: 5em;
  color: #F5EEE1;
  text-align: center;
  position: absolute;
}
@media (min-width: 768px) {
  .abouthead h1 {
    margin-top: 7em;
  }
}
@media (min-width: 992px) {
  .abouthead h1 {
    margin-top: 5em;
  }
}
@media (min-width: 1200px) {
  .abouthead h1 {
    margin-top: 3.5em;
  }
}

.abouttat h2 {
  text-align: center;
}

.threepeeo img {
  border: 2px #3F2E24 solid;
  border-radius: 50%;
  width: 100%;
  margin-left: 2em;
  margin-top: 7em;
}
@media (min-width: 768px) {
  .threepeeo img {
    margin-top: 4em;
  }
}

.grad img {
  display: none;
  border: 2px #3F2E24 solid;
  border-radius: 50%;
  width: 100%;
}
@media (min-width: 992px) {
  .grad img {
    display: block;
    margin-top: 0;
  }
}

.origins {
  margin-bottom: 3em;
  margin-top: 2em;
}
.origins p {
  margin-left: 2em;
  margin-top: 2em;
  margin-bottom: 3em;
}
@media (min-width: 768px) {
  .origins p {
    margin-left: 4em;
  }
}

.industryimg img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 20em;
  margin-bottom: 2em;
}
@media (min-width: 768px) {
  .industryimg img {
    margin-left: 2em;
  }
}
@media (min-width: 992px) {
  .industryimg {
    margin-top: 4em;
  }
}

.industryimg2 img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 20em;
  margin-bottom: 2em;
  margin-top: 4em;
}
@media (min-width: 768px) {
  .industryimg2 img {
    margin-left: 2em;
  }
}
@media (min-width: 768px) {
  .industryimg2 img {
    margin-top: 12em;
  }
}
@media (min-width: 1200px) {
  .industryimg2 img {
    margin-top: 8em;
  }
}

.industry {
  margin-top: 3em;
  margin-bottom: 3em;
}
.industry p {
  margin-left: 2em;
  margin-bottom: 2em;
}
@media (min-width: 768px) {
  .industry p {
    margin-top: 3em;
  }
}

.people {
  margin-top: 3em;
}
.people h2 {
  margin-bottom: 0;
}

.tatpeep h3 {
  color: #3F2E24;
  margin-top: 4em;
  text-align: center;
  margin-right: 1em;
  margin-top: 1em;
}

.jawaabout {
  margin-left: 4em;
  margin-top: 2em;
  position: relative;
}
@media (min-width: 768px) {
  .jawaabout {
    margin-left: 7em;
  }
}
.jawaabout h4 {
  position: absolute;
  display: none;
}
.jawaabout img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 50%;
}
@media (min-width: 992px) {
  .jawaabout {
    margin-left: 15em;
  }
}
@media (min-width: 1200px) {
  .jawaabout {
    margin-left: 20em;
  }
}

.smugglerabout {
  margin-left: 2em;
  margin-top: 5em;
}
.smugglerabout h4 {
  position: absolute;
  display: none;
}
.smugglerabout img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 50%;
}

.tuskenraiderabout {
  margin-top: 1em;
  margin-left: 11em;
  margin-bottom: 3em;
}
@media (min-width: 768px) {
  .tuskenraiderabout {
    margin-left: 20em;
  }
}
@media (min-width: 992px) {
  .tuskenraiderabout {
    margin-left: 30em;
  }
}
.tuskenraiderabout h4 {
  position: absolute;
  display: none;
}
.tuskenraiderabout img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 50%;
}
@media (min-width: 1200px) {
  .tuskenraiderabout img {
    margin-left: 5em;
  }
}

/* End About Tatooine */
/* Start Plan Ahead */
.abouthead1 {
  margin-bottom: 0;
  position: relative;
}
@media (min-width: 992px) {
  .abouthead1 {
    height: 28em;
  }
}
.abouthead1 img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 20em;
  margin-top: 2em;
  margin-bottom: 3em;
}
@media (min-width: 992px) {
  .abouthead1 img {
    height: 70%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media (min-width: 1200px) {
  .abouthead1 img {
    height: 60%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.abouthead1 hr {
  margin-top: 0;
}
.abouthead1 h1 {
  margin-top: 6em;
  color: #F5EEE1;
  text-align: center;
  position: absolute;
}
@media (min-width: 768px) {
  .abouthead1 h1 {
    margin-top: 7em;
  }
}
@media (min-width: 992px) {
  .abouthead1 h1 {
    margin-top: 5em;
    margin-left: 0.5em;
  }
}
@media (min-width: 1200px) {
  .abouthead1 h1 {
    margin-top: 4.5em;
    margin-left: 0.5em;
  }
}

.do {
  margin-bottom: 3em;
}
@media (min-width: 768px) {
  .do {
    margin-left: 2em;
  }
}

.doanddont {
  margin-left: 2em;
  margin-top: 3em;
}
.doanddont h2 {
  text-align: left;
}
.doanddont .doimg {
  margin-bottom: 1em;
  margin-top: 2em;
}
@media (min-width: 1200px) {
  .doanddont .doimg {
    margin-top: 0;
  }
}
.doanddont .doimg img {
  border: 2px solid #3F2E24;
  border-radius: 20em;
  width: 100%;
}
.doanddont ul {
  line-height: 2em;
}
.doanddont .dolist ul li {
  list-style-type: disc;
}
.doanddont .dont {
  margin-top: 3em;
}
@media (min-width: 768px) {
  .doanddont .dont {
    margin-left: 2em;
  }
}
.doanddont .dont h2 {
  margin-bottom: 1em;
}
.doanddont .dont img {
  margin-bottom: 1em;
}
.doanddont .dont ul {
  line-height: 2em;
  margin-bottom: 3em;
}

/* End Plan Ahead */
/* Start 404 */
.error {
  margin-top: 2em;
}
.error .banthaimg img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 5em;
}
@media (min-width: 992px) {
  .error .banthaimg img {
    margin-top: 2em;
  }
}
.error h1 {
  color: #BE6348;
  margin-top: 1em;
  margin-left: 1.5em;
  margin-bottom: 0.5em;
}
@media (min-width: 768px) {
  .error h1 {
    margin-left: 2em;
  }
}
.error p {
  margin-left: 3em;
  margin-right: 12em;
}
@media (min-width: 768px) {
  .error p {
    margin-left: 4.5em;
  }
}
.error a {
  font-family: "liberation-sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  color: #3F2E24;
  background-color: #93B2CE;
  border: #3F2E24 solid 2px;
  border-radius: 2em;
  padding-left: 1.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-top: 1em;
  margin-bottom: 3em;
}
@media (min-width: 992px) {
  .error a {
    padding-left: 4.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
}
@media (min-width: 1200px) {
  .error a {
    padding-left: 2.2em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0;
  }
}
.error a:hover {
  color: #F5EEE1;
  background-color: #853B56;
}

/* End 404 */
/* Start Sources */
.sourcehead {
  margin-top: 2em;
  position: relative;
  margin-bottom: 3em;
}
.sourcehead .sourceimg img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 5em;
}
.sourcehead h1 {
  position: absolute;
  text-align: center;
  color: #F5EEE1;
  margin-top: 3.5em;
}
@media (min-width: 768px) {
  .sourcehead h1 {
    margin-top: 5em;
  }
}
@media (min-width: 992px) {
  .sourcehead h1 {
    margin-top: 4.5em;
  }
}

.sourcelist {
  margin-bottom: 3em;
}
@media (min-width: 768px) {
  .sourcelist {
    margin-top: 2em;
  }
}
.sourcelist li {
  list-style-type: disc;
  margin-left: 4em;
  line-height: 2em;
}
@media (min-width: 768px) {
  .sourcelist li {
    margin-left: 6em;
  }
}
.sourcelist a {
  text-decoration: none;
  color: #3F2E24;
}
.sourcelist a:hover {
  color: #D49E60;
}

/* End Sources */
/* Start Mon Eisley */
.monlist {
  margin-bottom: 3em;
}
.monlist ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  margin-top: 5em;
  list-style: none;
  margin-top: 2em;
  margin-left: 2em;
}
.monlist ul img {
  width: 100%;
}
.monlist p {
  margin-top: 2em;
}

.monhead {
  position: relative;
}
@media (min-width: 992px) {
  .monhead {
    margin-bottom: 5em;
  }
}
@media (min-width: 992px) {
  .monhead {
    height: 25em;
  }
}
.monhead img {
  width: 100%;
  border: 2px solid #3F2E24;
  border-radius: 20em;
  margin-top: 2em;
  margin-bottom: 3em;
}
@media (min-width: 992px) {
  .monhead img {
    height: 70%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media (min-width: 1200px) {
  .monhead img {
    height: 60%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.monhead hr {
  margin-top: 0;
}
.monhead h1 {
  margin-top: 5em;
  color: #F5EEE1;
  text-align: center;
  position: absolute;
}
@media (min-width: 768px) {
  .monhead h1 {
    margin-top: 7em;
  }
}
@media (min-width: 992px) {
  .monhead h1 {
    margin-top: 5em;
  }
}
@media (min-width: 1200px) {
  .monhead h1 {
    margin-top: 5em;
  }
}

/* End Mon Eisley *//*# sourceMappingURL=style.css.map */