:root {
  --pink: #f14e95;
  --bg: #0a0a0a;
  --shadow: 0 2px 2px rgb(0 0 0/ 0.5);
}

body {
  font-size: 1.2rem;
  font-family: "Work Sans", sans-serif;
  min-height: 4000px;
}

.hero::before {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  background-image: url(cifor.jpg);
  z-index: -1;
  filter: grayscale();
}

.hero {
  min-height: 100vh;

  position: relative;
}

.hero h1 {
  font-family: "Sacramento", cursive;
  font-size: 6rem;
}

.hero h4 {
  font-size: 1.6rem;
}

.hero h4 span{
  color: var(--pink);
  font-weight: bold;
}

.hero p {
  font-size: 1.4rem;
}

.hero h1,
.hero h4,
.hero p {
  text-shadow: var(--shadow);
}

.hero a {
  color: var(--pink);
  background-color: white;
  box-shadow: var(--shadow);
}

.hero a:hover {
  color: white;
  background-color: var(--pink);
}



.my-nav .navbar-brand,
.my-nav .offcanvas-title{
  font-family:"Sacramento", cursive;
  font-size: 3.2rem;
  font-weight: bold;
}

.my-nav{
  background-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(2px);
}

.my-nav .offcanvas{
  height: 100vh;
}

.my-nav .navbar-nav{
  text-transform: uppercase;
}

.home::before{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  background-image: url(bg.jpg.crdownload);
  z-index: -1;
  filter: grayscale();
  
}

.home{
  min-height: 100vh;
  position: relative;
  margin-top: -6rem;
  padding-top: 15rem;
  padding-bottom: 5rem;
}

.home h2{
  font-family:'Sacramento';
  font-size: 5rem;
  font-weight: bold;
  color: var(--pink);
  text-shadow: var(--shadow);
}

.home h3{
  color: #444;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  
}

.home p{
  color: #666;
  font-size:1.1rem;
  
}

.home .couple{
  margin-top: 100px;
}

.home .couple h3{
  color: var(--pink);
  font-family: 'Sacramento';
  font-size: 2.4rem;
  font-weight: 300;
  text-shadow: var(--shadow);
}

.home .couple img{
  width: 100%;
}

.info{
  background-color: var(--bg);
  color: white;
  padding-top: 10rem;
  padding-bottom: 8rem;
}

.info h2,
.story h2,
.galery h2,
.rsvp h2,
.gift h2,
.footer h2{
  color: var(--pink);
  font-family: 'Sacramento';
  font-weight: bold;
  font-size: 5rem;
}

.info .alamat{
  font-size: 1.1rem;
}

.info .deskripsi{
  font-size: 1rem;
  font-weight: 300;
}

.info .card{
  background-color: rgba(255,255,255,0.1) !important;
  color:#999 !important;
  border: 1px solid;
}

.info .card-header{
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.info .card-body{
  font-size: 1rem;
  border-bottom: 1px solid;
  border-top: 1px solid;
}

.info .card-footer{
  font-size:1rem
}

.story,
.galery,
.rsvp,
.gift,
.footer{
  padding-top: 10rem;
  padding-bottom: 8rem;
}

.story span,
.galery span,
.gift span{
  display: block;
  text-transform: uppercase;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1px;
  letter-spacing: 1px;
}

.story p,
.galery p,
.rsvp p,
.gift p{
  font-size: 1rem;
  font-weight: 300;
}

.timeline{
  list-style: none;
  padding: 1rem 0;
  margin-top: 1.4rem;
  position:relative;
}

.galery img{
  box-shadow: var(--shadow);
}

.timeline::before{
  content: '';
  top: 0;
  bottom: 0;
  position: absolute;
  width: 1px;
  background-color: #ccc;
  left: 50%;
}

.timeline li{
  margin-bottom:1.5rem;
  position:relative;
}

.timeline li::before,
.timeline li::after{
  content: '';
  display: table;
}

.timeline li{
  clear: both;
}

.timeline li .timeline-image{
  width: 150px;
  height: 150px;
  background-color: #ccc;
  position: absolute;
  left:50%;
  border-radius: 50%;
  transform: translateX(-50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
}

.timeline .timeline-panel{
  width: 40%;
  position: relative;
  float: left;
  border: 1px solid #ccc;
  padding:2rem;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 10px;
  
}

.timeline .timeline-panel::before{
  content: '';
 
  display:inline-block;
  position:absolute;
  border-top:15px solid transparent;
  border-left:15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  top:70px;
  right: -15px;
}

.timeline .timeline-panel::after{
  content:'';
  position:absolute;
  display:inline-block;
  position:absolute;
  border-top:14px solid transparent;
  border-left:14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  top: 71px;
  right: -13px;
}

.timeline .timeline-inverter .timeline-panel{
  float: right;
}

.timeline .timeline-inverter .timeline-panel::before{
  border-left-width:0;
  border-right-width:15px;
  left:-15px;
  right: auto;
}

.timeline .timeline-inverter .timeline-panel::after{
  border-left-width:0;
  border-right-width:14px;
  left:-13px;
  right:auto;


}

.timeline .timeline-panel{
  box-shadow:var(--shadow);
}


.galery{
  background-color: #f5f5f5f5;
}

.rsvp{
  background-color: var(--bg);

}

.rsvp h2{
  font-size: 4.5rem;
}

.rsvp p,
.rsvp label{
  color: #fff;
}

.rsvp button{
  background-color: var(--pink);
  color: #fff;
}

.rsvp button:hover{
  background-color: #fff;
  color: var(--pink);
}

.footer{
  background-color: black;
  color: #fff;
}

.footer a{
  text-decoration: none;
  color: #fff;
}

.audio-icon{
  width: 4rem;
  height: 4rem;
  font-size: 4rem;
  position: fixed;
  bottom: 2.5rem;
  right: 2rem;
  color: var(--pink);
  cursor: pointer;
}





/* media query */
@media (max-width: 992px) {
  html {
    font-size: 75%;
  }
  .simply-countdown > .simply-section {
    padding: 70px;
  }

 
}

@media (max-width: 850px) {
  html {
    font-size: 65%;
  }
  .simply-countdown > .simply-section {
    padding: 60px;
    margin: 5px;
  }

  .my-nav .navbar-nav{
    font-size: 2rem;
    text-align: center;
  }

  .sticky-top{
    overflow: hidden;
  }

  .timeline::before{
    left:60px;
  }

  .timeline li .timeline-image{
    left: 15px;
    margin-left: 45px;
    top:16px;

  }

  .timeline li .timeline-panel{
    width: calc((100% - 200px));
    float: right;
    margin-bottom: 50px;
  }

  .timeline li .timeline-panel::before{
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }

  .timeline li .timeline-panel::after{
    border-left-width: 0;
    border-right-width: 14px;
    left: -13px;
    right: auto;
  }
 


}

@media (max-width: 420px) {
  html {
    font-size: 60%;
  }
  .simply-countdown > .simply-section {
    padding: 35px;
    margin: 2px;
  }

  .home .couple img{
    height: 100px;
    width: 100px;
  }

  .timeline li .timeline-image{
    width: 80px;
    height: 80px;
  }

  .timeline li .timeline-panel{
    width: 55%;
    
  }

  .timeline li .timeline-panel::before{
    top:30px;
  }

  .timeline li .timeline-panel::after{
    top:31px;
  }
}