/* ==================================================
   RESET
================================================== */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100%;
}


/* ==================================================
   DAY 2 COLOUR PALETTE

   Terracotta / Burnt Rust  #A9341C
   Deep Warm Brown          #62351F
   Antique Gold             #A87528
   Warm Taupe               #8A6852
   Cream                    #FFF9EF
================================================== */


/* ==================================================
   PAGE
================================================== */

body {

  margin: 0;

  font-family:
    "Cormorant Garamond",
    serif;

  color:
    #62351F;

  text-align:
    center;

  background-color:
    #FFF9EF;

  background-image:
    url("assets/background Image.png");

  background-position:
    top center;

  background-size:
    100% auto;

  background-repeat:
    no-repeat;

  min-height:
    100vh;
}


/* ==================================================
   MAIN CONTENT
================================================== */

.program-page {

  width:
    100%;

  min-height:
    100vh;

  margin:
    0
    auto;

  padding:
    225px
    18px
    150px;
}

/* ==================================================
   MOVE PROGRAM + FIRST HEART DIVIDER TOGETHER
================================================== */

.program-header {
  position: relative;

  top: -70px;
  left: 70px;
}


/* ==================================================
   PROGRAM HEADING
================================================== */

.program-header h1 {

  margin:
    0
    0
    15px;

  color:
    #A9341C;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    2.7rem;

  font-weight:
    600;

  letter-spacing:
    12px;

  line-height:
    1;

  text-transform:
    uppercase;
}


/* ==================================================
   HEART DIVIDER
================================================== */

.heart-divider {

  width:
    min(
      430px,
      70vw
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

  margin:
    0
    auto
    18px;

  color:
    #A87528;
}


.heart-divider span {

  flex:
    1;

  height:
    1px;

  background-color:
    #A87528;
}


.heart-divider b {

  color:
    #A87528;

  font-family:
    Georgia,
    serif;

  font-size:
    1.7rem;

  font-weight:
    400;

  line-height:
    1;
}


/* ==================================================
   PROGRAM LIST
================================================== */

.program-list {

  width:
    min(
      520px,
      82%
    );

  margin:
    0
    auto;
}


.program-list p {

  margin:
    4px
    0;

  color:
    #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.3rem;

  font-weight:
    500;

  line-height:
    1.15;
}


/* ==================================================
   IT'S A PARTY
================================================== */

.program-list .party {

  color:
    #A9341C;

  font-weight:
    600;

  font-style:
    italic;

  margin-top:
    7px;
}


/* ==================================================
   SECOND DIVIDER
================================================== */

.second-divider {

  margin-top:
    22px;

  margin-bottom:
    12px;
}


/* ==================================================
   THANK YOU SECTION
================================================== */

.thank-you {
  width: 390px;
  max-width: 58%;

  margin:
    0
    auto;

  position: relative;

  /* MOVE THANK YOU SECTION LEFT + UP */
  left: -65px;
  top: -45px;
}


/* ==================================================
   THANK YOU HEADING
================================================== */

.thank-you > p:not(.with-love):not(.couple-names) {
  margin:
    0
    auto
    9px;

  color: #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1rem;

  font-weight: 500;

  font-style: italic;

  line-height: 1.12;
}

/* ==================================================
   THANK YOU MESSAGE
================================================== */

.thank-you > p:not(.with-love):not(.couple-names) {

  margin:
    0
    auto
    13px;

  color:
    #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.15rem;

  font-weight:
    500;

  font-style:
    italic;

  line-height:
    1.25;
}


/* ==================================================
   WITH LOVE
================================================== */
.with-love {
  margin:
    9px
    0
    0;

  color: #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1rem;

  font-weight: 500;
}


.couple-names {
  margin: 0;

  color: #A9341C;

  font-family:
    "Luxurious Script",
    cursive;

  font-size: 2.6rem;

  font-weight: 400;

  line-height: 0.95;
}


.bottom-heart {
  margin-top: 3px;

  color: #A87528;

  font-family: Georgia, serif;

  font-size: 1.3rem;
}


/* ==================================================
   PHENYO & TSHEPO
================================================== */

.couple-names {

  margin:
    0;

  color:
    #A9341C;

  font-family:
    "Luxurious Script",
    cursive;

  font-size:
    3rem;

  font-weight:
    400;

  line-height:
    1.1;
}


/* ==================================================
   BOTTOM HEART
================================================== */

.bottom-heart {

  margin-top:
    8px;

  color:
    #A87528;

  font-family:
    Georgia,
    serif;

  font-size:
    1.6rem;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {


  html,
  body {

    width:
      100%;

    min-height:
      100svh;

    margin:
      0;
  }


  /* ===============================================
     MOBILE BACKGROUND
  ================================================ */

  body {

    background-color:
      #FFF9EF;

    background-image:
      url("assets/background Image.png");

    background-size:
      125% auto;

    background-position:
      top center;

    background-repeat:
      no-repeat;
  }


  /* ===============================================
     CONTENT POSITION
  ================================================ */

  .program-page {

    width:
      100%;

    min-height:
      100svh;

    padding:
      145px
      15px
      105px;
  }


  /* ===============================================
     PROGRAM HEADING
  ================================================ */

  .program-header h1 {

    margin:
      0
      0
      10px;

    font-size:
      1.8rem;

    font-weight:
      600;

    letter-spacing:
      7px;

    line-height:
      1;
  }


  /* ===============================================
     HEART DIVIDER
  ================================================ */

  .heart-divider {

    width:
      60%;

    max-width:
      260px;

    gap:
      10px;

    margin:
      0
      auto
      12px;
  }


  .heart-divider b {

    font-size:
      1.3rem;
  }


  /* ===============================================
     PROGRAM LIST
  ================================================ */

.program-list {
  width: 78%;

  position: relative;

  /* UP + SLIGHTLY RIGHT */
  top: -45px;
  left: 40px;
}

  .program-list p {

    margin:
      3px
      0;

    font-size:
      1rem;

    line-height:
      1.12;
  }


  .program-list .party {

    margin-top:
      5px;

    font-size:
      1.05rem;
  }


  /* ===============================================
     SECOND DIVIDER
  ================================================ */

 .second-divider {
  position: relative;

  /* UP + RIGHT TO MATCH PROGRAM LIST */
  top: -45px;
  left: 22px;

  margin-top: 16px;
  margin-bottom: 8px;
}

  /* ===============================================
     THANK YOU
  ================================================ */
.thank-you {
  width: 68%;
  max-width: 360px;

  margin:
    0
    auto;

  position: relative;

  /* LEFT + POSITION UNDER DIVIDER */
  left: -70px;
  top: -80px;
}

  /* THANK YOU HEADING */

.thank-you h2 {
  margin:
    0
    0
    8px;

  color: #A9341C;

  font-family:
    "Luxurious Script",
    cursive;

  font-size: 3rem;

  font-weight: 100;

  line-height: 0.9;
}

  /* THANK YOU MESSAGE */

  .thank-you > p:not(.with-love):not(.couple-names) {

    margin-bottom:
      9px;

    font-size:
      0.92rem;

    line-height:
      1.15;
  }


  /* WITH LOVE */

  .with-love {

    margin-top:
      11px;

    font-size:
      0.95rem;
  }


  /* NAMES */

  .couple-names {

    font-size:
      2.35rem;

    line-height:
      1;
  }


  /* BOTTOM HEART */

  .bottom-heart {

    margin-top:
      6px;

    font-size:
      1.25rem;
  }

}

.program-list,
.second-divider {
  position: relative;
  top: -80px;
}