@font-face {
  font-family: "3dsRegular";
  src: url(../font/3ds-Regular.woff);
  src: url(../font/3ds-Regular.woff2);
}
@font-face {
  font-family: "3dsBold";
  src: url(../font/3ds-Bold.woff);
  src: url(../font/3ds-Bold.woff2);
}

@font-face {
  font-family: "3dsSemiBold";
  src: url(../font/3ds-SemiBold.woff);
  src: url(../font/3ds-SemiBold.woff2);
}

:root {
  --db: #0870D3;
}


.mx-10 {margin-right: 15px;}
.t-white {color: white}
.t-black {color: black}
.fs-14 {font-size: 14pt;}

body {
  font-family: "3dsRegular";
}
h1 {
  font-size: 19pt;
  font-family: "3dsBold";
}
h2 {
  font-size: 14pt;
  color: black ;
}
h3 {
  font-size: 12pt;
  font-weight: bold;
}

h4 {
  font-family: "3dsRegular";
  font-size: 12pt;
  color: white;
}

h5 {
  font-family: "3dsRegular";
  font-size: 13pt;
  color: white;
}

.bold {
  font-family: "3dsBold";
}

ul {
  list-style-type: disc;
  list-style-position: outside;
  font-size: 12pt;
  margin-left: 20px;
}

main {
  height: 667px;
  max-height: 667px;
  overflow: hidden;
  background-image: url("../image/xs/main.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  padding-top: 15px;
  background-color: #eaeaea;
}

.main-last-flex {
  align-items: flex-start;
}

.q1 {background-image: url("../image/xs/q1.jpg");}
.q2 {background-image: url("../image/xs/q2.jpg");}
.q3 {background-image: url("../image/xs/q3.jpg");}
.q4 {background-image: url("../image/xs/q4.jpg");}
.q5 {background-image: url("../image/xs/q5.jpg");}

.r1 {background-image: url("../image/xs/r1.jpg");}
.r2 {background-image: url("../image/xs/r2.jpg");}

.intro-container {
  width: 72%;
  position: absolute;
  bottom: 8%;
}

#view-start {
  height: 260px;
  min-height: 260px;
  justify-content: space-around;
}

.quiz-container {
  width: 85%;
  border-radius: 15px;
  overflow: hidden;
  padding: 15px;
  position: absolute;
  bottom: 9%;
  z-index: -2;
}

.view {
  height: 220px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  display: none;
  gap: 12px;
}

.result-container {
  width: 320px;
  border-radius: 25px;
  overflow: hidden;
  padding:20px;
  position: absolute;
  bottom: 6%;
  z-index: -2;
}

#view-end {
  height: 290px;
  min-height: 290px;
}

.start {
  height: 220px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  display: none;
}

.inner-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  display: none;
}

.btn-ds {
  background-color: white;
  color: var(--db);
  transition: all 0.8s ease;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 25px;
}

.btn-ds:hover {
  background-color: var(--db);
  color: white;
}

.btn-q{
  position: absolute;
  bottom: 25px;
  background-color: var(--db);
  color: white;
  padding: 5px 40px;
}

.btn-q:hover{
  background-color: white;
  color: var(--db);
}

.btn-yes{left: 15px;}

.btn-no{left: 140px;}

.btn-result {
  background-color: var(--db);
  color: white;
  padding: 5px 30px;
  border: none;
}

.btn-result:hover {
  background-color: white;
  color: var(--db);
}

.btn-res {
  display:flex;
  align-self: center;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 10px;
  background-color: var(--lb);
  transition: width 0.5s ease;
}

.rsvp-as {color: var(--db);}
.rsvp-color {color: black;}

#btn-refresh {
  color: white;
  font-size: 28px;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 25px;
  display: none;
}

.rt {margin-bottom: 10px;}
.rta {margin-bottom: 18px;}
.rtb {margin-bottom: 10px;}

@media(min-width: 440px){
  main {
    background-image: url("../image/xs/main.jpg");
    background-position-y: -30px;
  }
  .intro-container {bottom: 5%;}
  .view {gap: 20px;}
  .btn-q {bottom: 30px}
}

@media (min-width: 700px) {
  main {
    background-image: url("../image/sm/main.jpg");
    background-position-y: 0;
  }
  .q1 {background-image: url("../image/sm/q1.jpg");}
  .q2 {background-image: url("../image/sm/q2.jpg");}
  .q3 {background-image: url("../image/sm/q3.jpg");}
  .q4 {background-image: url("../image/sm/q4.jpg");}
  .q5 {background-image: url("../image/sm/q5.jpg");}

  .r1 {background-image: url("../image/sm/r1.jpg");}
  .r2 {background-image: url("../image/sm/r2.jpg");}
  
  .intro-container {width: 55%; bottom: 12%;}
  #view-start {height: 220px; min-height: 220px;}
  .quiz-container {width: 52%; bottom: 9%; padding: 10px 20px 14px 25px;}
  .view {height: 210px; min-height: 210px;}
  .result-container {
    width: 425px;
    border-radius: 30px;
    padding:25px 30px;
    bottom: 7%
  }
  #view-end {height: 300px;min-height: 300px;}

  ul {font-size: 14pt;}
  h1 {font-size: 20pt;}
  h3 {font-size: 14.5pt;}
  h4 {font-size: 13pt;}
  h5 {font-size: 14pt;}

  .btn-result { padding: 6px 30px;font-size: 13pt;}
  #btn-refresh { font-size: 32px;}
  .btn-no{left: 150px;}
  .btn-yes{left: 25px;}

  .rt {margin-bottom: 10px;}
  .rta {margin-bottom: 10px;}
  .rtb {margin-bottom: 21px;}
}

@media(min-width: 850px){
  main {
    background-image: url("../image/sm/main.jpg");
    background-position-y: -30px;
  }
  .intro-container {bottom: 6%;}
  .view {gap: 25px;}
  .btn-q {bottom: 35px}
}

@media (min-width: 1024px) {
  main {
    height: 550px;
    background-image: url("../image/md/main.jpg");
    align-items: center;
    padding-top: 0;
    background-position-y: 0px;
  }
  .main-last-flex {align-items: center;}

  .q1 {background-image: url("../image/md/q1.jpg");}
  .q2 {background-image: url("../image/md/q2.jpg");}
  .q3 {background-image: url("../image/md/q3.jpg");}
  .q4 {background-image: url("../image/md/q4.jpg");}
  .q5 {background-image: url("../image/md/q5.jpg");}

  .r1 {background-image: url("../image/md/r1.jpg");}
  .r2 {background-image: url("../image/md/r2.jpg");}

  .intro-container {
    right: 3%;
    width: 50%;
    bottom: 30%;
  }
  #view-start {height: 250px; min-height: 250px;}

  .quiz-container {
    left: 8%;
    width: 40%;
    padding: 15px 30px 20px;
    border-radius: 30px;
    bottom: 25%;
  }
  .view {text-align: left;height: 210px;min-height: 210px; gap: 15px}

  .result-container {
    right: 10%;
    bottom: 20%;
    width: 460px;
    padding: 30px 35px;
    border-radius: 30px;
  }
  #view-end {
    height: 315px;
    min-height: 315px;
  }

  h1 {font-size: 24pt;}
  h2 {font-size: 15pt;}
  h3 {font-size: 16pt;}
  h4 {font-size: 14pt;}
  h5 {font-size: 15pt;}
  ul {font-size: 14.5pt;}
  .rsvp-color {color: black;}
  .rsvp-as {align-self: flex-start;}
  .view.start {align-items: flex-start;}
  #view-end {
    height: 315px;
    min-height: 315px;
  }

  #btn-refresh { font-size: 36px;}
  .btn-yes {left: 30px;}
  .btn-no{left: 155px;}
  .btn-q {bottom: 30px}

  .rt {margin-bottom: 10px;}  
  .rta {margin-bottom: 12px;}
  .rtb {margin-bottom: 25px;}
}

@media (min-width: 1440px) {
  main {background-image: url("../image/lg/main.jpg");}
  .q1 {background-image: url("../image/lg/q1.jpg");}
  .q2 {background-image: url("../image/lg/q2.jpg");}
  .q3 {background-image: url("../image/lg/q3.jpg");}
  .q4 {background-image: url("../image/lg/q4.jpg");}
  .q5 {background-image: url("../image/lg/q5.jpg");}
  
  .r1 {background-image: url("../image/lg/r1.jpg");}
  .r2 {background-image: url("../image/lg/r2.jpg");}

  .intro-container {right: 5%;width: 52%;}
  .view {height: 220px;min-height: 220px; gap: 30px;}
  #view-start {height: 270px; min-height: 270px;}
  #view-end {height: 280px; min-height: 280px;}
  
  .result-container {padding: 35px 20px 20px 40px; border-radius: 35px; }
  .result-container {right:10% ; width: 800px;}

  .btn-result { padding: 8px 30px;font-size: 14pt;}
  .btn-q {bottom: 30px}
  

  h1 {font-size: 30pt;}
  h2 {font-size: 16pt;}
  h3 {font-size: 18pt; margin-bottom: 10px;}
  h4 {font-size: 15pt;}
  h5 {font-size: 17pt;}
  ul {font-size: 17pt;}

  .rt {margin-bottom: 20px;}
  .rta {margin-bottom: 25px;}
  .rtb {margin-bottom: 12px;}
  
}

@media (min-width: 1660px) {
  main {background-image: url("../image/xl/main.jpg");}
  .q1 {background-image: url("../image/xl/q1.jpg");}
  .q2 {background-image: url("../image/xl/q2.jpg");}
  .q3 {background-image: url("../image/xl/q3.jpg");}
  .q4 {background-image: url("../image/xl/q4.jpg");}
  .q5 {background-image: url("../image/xl/q5.jpg");}

  .r1 {background-image: url("../image/xl/r1.jpg");}
  .r2 {background-image: url("../image/xl/r2.jpg");}

  .intro-container {right:3%; width: 45%;}
  .result-container {right: 10%;}
}