html{
  margin:0px;
  padding: 0px;
}

body {
    background-color: white;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
}

main {
    margin: 0;
    padding: 0;
}

.pageWrapper{
  height: 100vh;
  margin: 0px;
  padding: 0px;
}

.verticalCenter{
    padding-top: calc(50vh - 18vw);
    overflow: hidden;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: white;
    transition: background-color 0.2s;
}

.time {
    margin:auto 0 ;
    text-align: center;
    font-family: 'Oswald', monospace;
    font-size: 16vw;

    color: #e53535;
    transition: 0.6s;
    text-shadow: calc(2px + 0.2vw) calc(2px + 0.2vw) #efb6b6;
}

.desc{
    margin:auto 0;
    padding: 0px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 2vw;
    color: #e53535;
    transition: 1.0s;
}

.monospace{
    display: inline-block;
    width: 10vw;
    text-align: center;
}

.button{
    background-color: white;
    height: 40px;
    width: 220px;
    border-radius: 20px;
    box-shadow: 6px 6px #efb6b6;
    display: inline-block;
    margin-right: 40px;
    margin-left: 0px;
}

.button:hover{
    background-color: #ffe9e9;
}

.button:active{
    transform: translate( 2px, 2px);
    box-shadow: 4px 4px #efb6b6;
}

.buttonText{
    margin:auto 0;
    padding: 9px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #e53535;
}

.buttonWrapper{
    padding-top: 40px;
    margin: auto;
    height: 6vw;
    width: 748px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1vw);
    transition-duration: 0.4s;
}

.infoContainer{
  width: 748px;
  margin: 0 auto;
  color: #e53535;
}

h2{
  text-align: center;
  margin:auto 0;
  font-family: 'Roboto', sans-serif;
  font-size: 32px;
  font-weight: 300;
  padding-top: 10vh;
}

.infoText{
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 300;
  padding-bottom: 10vh;
  padding-top: 3vh;
  text-align: justify;
  text-align-last: center;
}

a{
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 300;
  padding-bottom: 10vh;
  padding-top: 3vh;
  text-align: justify;
  text-align-last: center;
}

@media only screen and (max-width: 768px) {

  .buttonWrapper{
    position: absolute;
    bottom: 16px;
    height: calc(36vw + 3*16px);
    padding-left: 4vw;
    width: 88vw;
    padding-bottom: 0px;
    opacity: 0;
    visibility: hidden;
    transition: 0.8s;
    transform: translateY(6vh);
  }

  .button{
      background-color: white;
      height: 12vw;
      width: calc(88vw - 6px);
      margin-bottom: 16px;
      border-radius: 4vw;
      box-shadow: 6px 6px #efb6b6;
      display: inline-block;
  }

  .buttonText{
      margin:auto 0;
      padding: 3.6vw;
      text-align: center;
      font-family: 'Roboto', sans-serif;
      font-size: 4vw;
      font-weight: 500;
      color: #e53535;
  }

  .time {
      margin:auto 0 ;
      text-align: center;
      font-family: 'Oswald', monospace;
      font-size: 28vw;

      color: #e53535;
      transition: 0.6s;
      text-shadow: calc(2px + 0.2vw) calc(2px + 0.2vw) #efb6b6;
  }

  .monospace{
      display: inline-block;
      width: 16vw;
      text-align: center;
  }

  .desc{
      margin:auto 0;
      padding: 0px;
      text-align: center;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      font-size: 4vw;
      height: 6vw;
      color: #b53030;
      transition: 1.0s;
  }

  .verticalCenter{
      padding-top: calc(50vh - 18vw - 36vw);
      overflow: hidden;
      min-height: 100vh;
      width: 100%;
      margin: 0;
      padding-left: 0;
      padding-right: 0;
      background-color: white;
      transition: background-color 0.2s;
  }

  .infoContainer{
    width: 90vw;
    margin: 0 auto;
    color: #e53535;
    text-align: justify;
  }

}

#footer {
   position:absolute;
   margin: 0px;
   padding-bottom: 40px;
   width: 100%;
   bottom:0;
   left: 0;
   height:40px;
}

.center{
  display: table;
  margin: 0 auto;
}

/* Visually hidden H1 for SEO */
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* SEO Content Section Styles */
.content-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px 60px 20px;
  font-family: 'Roboto', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: white;
}

.info-block {
  margin-bottom: 50px;
}

.info-block h2 {
  font-size: 32px;
  font-weight: 500;
  color: #e53535;
  margin-bottom: 20px;
  padding-top: 0;
  text-align: left;
}

.info-block h3 {
  font-size: 24px;
  font-weight: 500;
  color: #e53535;
  margin-top: 30px;
  margin-bottom: 15px;
}

.info-block p {
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 15px;
  color: #444;
}

.info-block ul,
.info-block ol {
  margin: 15px 0;
  padding-left: 30px;
}

.info-block li {
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 10px;
  color: #444;
}

.info-block li strong {
  font-weight: 500;
  color: #e53535;
}

.instructions-list {
  list-style: decimal;
  counter-reset: item;
}

.faq-item {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item h3 {
  font-size: 20px;
  font-weight: 500;
  color: #e53535;
  margin-top: 0;
  margin-bottom: 10px;
}

.faq-item p {
  margin-bottom: 0;
}

/* Mobile responsive styles for content section */
@media only screen and (max-width: 768px) {
  .content-section {
    margin: 0 auto;
    padding: 60px 16px 40px 16px;
  }

  .info-block h2 {
    font-size: 26px;
  }

  .info-block h3 {
    font-size: 20px;
  }

  .info-block p,
  .info-block li {
    font-size: 16px;
  }

  .faq-item h3 {
    font-size: 18px;
  }
}