/* ##### STANDARD STYLES ##### */
* {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  text-shadow:1px 1px #000000;
  text-wrap:balance;
}
/* Here are those styles I mentioned earlier that should help this work on devices where 100vh isn't exactly what we're looking for. As a note, for every element other than html, when you're looking to make something the full screen size, you'll need to use % rather than vh. */
html {
  height: 100vh;
}
body {
  height: 100%;
  position: fixed;
}
/* ##### SCROLL SNAP ##### */
.container {
  /* When doing scroll-snap, you have to make sure that you're scrolling the parent element, rather than the body. To do this, we make the parent the size of the viewport, and make sure we can scroll it. */
  height: 100%;
  width: 100%;
  overflow: scroll;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
}
p.reference{
    margin-top:0!important;
    font-style:italic!important;
}
.card {
  height: 100%;
  width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  top: 0;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-blend-mode:multiply;
}
/* ##### INDIVIDUAL SECTION BACKGROUNDS ##### */
.cta{
  background: url('https://cdn.glitch.global/e58c5182-e887-4fa3-a575-07b6a289589f/ForgivenessWeb.jpg?v=1681851069738') #21212177;
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}
.one {
  background: url('https://cdn.glitch.global/e58c5182-e887-4fa3-a575-07b6a289589f/LoveWeb.jpg?v=1681851070219') #212121aa;
  z-index:1
}
.two {
  background: url('https://cdn.glitch.global/e58c5182-e887-4fa3-a575-07b6a289589f/FledWeb.jpg?v=1681851069262') #21212155;
  background-position:bottom!important;
  z-index:2
}
.three {
  background: url('https://cdn.glitch.global/e58c5182-e887-4fa3-a575-07b6a289589f/DiedWeb.jpg?v=1681851068808') #21212155;
  background-position:70%!important;
  z-index:3
}
.four {
  background: url('https://cdn.glitch.global/e58c5182-e887-4fa3-a575-07b6a289589f/WayWeb.jpg?v=1681851070723') #21212155;
  z-index:4
}
.five{
  background: url('https://cdn.glitch.global/e58c5182-e887-4fa3-a575-07b6a289589f/unnamed-8sigskUcY-transformed.jpeg?v=1682018336078'), #212121cc;
  z-index:5;
  background-position:bottom!important;
}
.six {
  background: url('https://cdn.glitch.global/e58c5182-e887-4fa3-a575-07b6a289589f/ChoiceWeb2.jpg?v=1681851071830') #21212155;
  background-position:70%!important;
  z-index:5
}

/* ##### OVERLAY STYLES ##### */
.hero {
  /* Do not edit between this comment and the next. These styles are essential for it to work. */
  opacity: 0;
  top: 0!important;
  height: 100%;
  width: 100vw;
  position: sticky;
  margin-top: -2000%;
  margin-bottom: -2000%;
  /* You can edit these styles. Currently, the overlay will be display:grid, meaning that place-items:center is the easiest way to keep content centered. If you prefer to not use grid, you'll  just need to edit the JS file on line 25 to the display style you most prefer. I don't think that should mess with it. */
  justify-items: center;
  align-items: start;
  text-align: center;
  padding:1rem;
  overflow-y:auto;
}
/* ##### HERO CONTENT STYLE ##### */

h1,
p,
quote,
.author{
  color:white;
  font-size:1.5rem;
  font-family: 'Bebas Neue', cursive;
}
p{
  font-family:'Poppins', sans-serif!important;
  font-size:1.2rem;
  font-weight:400;
  margin-top:2rem;
}
h1,p{
  font-family: 'Caveat', cursive;
}
h1{
    font-size:clamp(2rem, 5vw, 3rem);
  line-height:48px;
}

.hero > h1,
.hero > p {
  color: white;
}
.content{
  width:67vw;
  min-width:280px;
  max-width:500px;
  display:grid;
  flex-direction:column;
  align-content:space-between;
  height:100%;
  flex-wrap:wrap;
}
quote{
  display:block;
  font-size:1.5rem;
}
.author{
  display:block;
  text-align:right;
  padding-left:1rem;
  font-size:2rem;
  border-left: 5px solid transparent;
  color: #f04e36
}
.cta-btn {
  background: #57ceea;
  padding: 1rem;
  color: black;
  border-radius: 600px;
  margin: auto;
  display: inline-block;
  text-decoration:none;
/*   font-family:'Open Sans',sans-serif; */
  font-size:1rem;
  box-shadow:2px 2px 5px #00000088;
  position:fixed;
  right:2rem;
  bottom:2rem;
  z-index:999;
  height:75px;
  width:75px;
  display:grid;
  place-items:center;
  border:black solid 2px;
}
.cta-btn:hover{
  background:#3d90a4;
  transition: all .3s;
  color:white!important;
  border-color:white;
}
.spacer{
  height:100px;
  display:grid;
  place-items:center;
}
.Jesus{
  font-family: 'Bebas Neue', sans-serif;
}
.align-left{
  text-align:left;
}
a i{
    text-shadow:none;
}
.fa-arrow-right,.fa-arrow-down{
    color:white;
}