:root {
  --swiper-theme-color: slategray;
  --light-accent-colour: smokewhite;
  --bright-accent-colour: white;
  --dark-accent-colour: #111;
}

html, body {
  position: relative;
  height: 100%;
  overflow-x: hidden;
}
body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 18px;
  background: linear-gradient(35deg, #ccffff, #ffcccc);
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

h1, h2, h3 {
  color: var(--dark-accent-color);
  font-weight: 400
}

strong {
  font-weight: 550
}

header {
  text-align: center;
}

section, footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-section {
  margin-bottom: 5%;
}

footer {
  background-color: lightgray;
  font-size: 0.75rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

footer > p:nth-child(odd) {
  border-right: solid 2px var(--dark-accent-colour);
  padding-right: 1%;
  margin-right: 1%;
}

.accent {
  color: var(--swiper-theme-color);
}

/**
 * Mimic Stripe.com slider styles.
 *
 * Mobile first breakpoints.
 */

/* DEBUG */
div {
  /* border: 1px solid pink; */
}

.swiper-slide {
  padding-top: 3%;
}

.flex-card {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

.flex-card__text, .flex-card__image {
  width: 95%;
}

.flex-card__text {
  text-align: left;
  padding: 1%;
}

.flex-card__image {
  background-image: url(https://marklchaves.files.wordpress.com/2020/01/payogan-rumah-anjing-millie_2_-_sq_gafnar_ar_1_1c_fillg_auto__c_scalew_359.jpg
);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 300px;
}

@media screen and (min-width: 768px) {
  .swiper-slide {
    padding: 0;
  }
  
  .flex-card {
    flex-wrap: nowrap;
  }
  .flex-card__text {
    width: 66%;
  } 
  .flex-card__image {
    width: 33%;
  }
}

/**
 * Swiper Slider Plugin Custom Styles
 */

#my-swiper-slide-1 {
 background-image: url(https://marklchaves.files.wordpress.com/2020/01/2-bali-campuhan-ridge-rocco-720w_iebenr_c_scalew_361.jpg);
}
#my-swiper-slide-2 {
 background-image: url(https://marklchaves.files.wordpress.com/2021/07/bali-payogan-rumah-chewbacca-360x360-1.jpg);
}
#my-swiper-slide-3 {
 background-image: url(https://marklchaves.files.wordpress.com/2021/07/payogan-rumah-hope-360x360-1.jpg);
}
#my-swiper-slide-4 {
 background-image: url(https://marklchaves.files.wordpress.com/2020/01/payogan-rumah-anjing-millie_2_-_sq_gafnar_ar_1_1c_fillg_auto__c_scalew_359.jpg);
}