@font-face {
  font-family: "Parisienne";
  src: url("/fonts/Parisienne-Regular.ttf") format("truetype");
}

html {
  background: url('/images/Dresden_Lingnerschloss_reduced.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  text-shadow: 2px 2px #000;
}

@media only screen and (max-width:768px) {
  html, body {
    overflow-y: auto;
  }
  body {
    padding-bottom: 150px;
  }
}



.scroll {
  overflow:auto;
}

a{
  color:#fff;
}

a:hover {
  font-weight: bold;
}

.wrapper {
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
  height: 80vh;
  /*width: 100%;*/
}

h1.names {
  font-family: 'Parisienne', serif;
  letter-spacing: calc(min(10vh, 14vw) * -0.02);
  font-size: calc(min(10vh, 14vw));
  text-align: center;
  color: white;
  margin: 2vh 0;
}

/* For Mobile */
@media only screen and (max-width: 768px) {
  h1.names {
    font-family: 'Parisienne', serif;
    letter-spacing: calc(min(10vh, 14vw) * -0.02);
    font-size: calc(min(10vh, 14vw));
    text-align: center;
    color: white;
    margin: 1vh 0 0 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 780px) {
  h1.names {
    margin: .5vh 0 0 0;
  }
}

.rings {
  margin-top: 50px;
  height: 20vh;
  background-color: white;
  -webkit-mask: url("/images/wedding_rings.svg") no-repeat center;
  mask: url("/images/wedding_rings.svg") no-repeat center;
}

/* For Mobile */
@media only screen and (max-width: 768px) {
  .rings {
    margin-top: 5px;
    height: 15vh;
  }
}

.animation {
  margin-top: 25px;
  height: 25vh;
}

/* For Mobile */
@media only screen and (max-width: 768px) {
  .animation {
    margin-top: 10px;
    /*height: 80vw;*/
  }
}

.lettering {
  font-family: 'Parisienne', serif;
  font-size: 8vh;
  text-align: center;
  color: white;
}

@media only screen and (max-width: 768px) {
  .lettering {
    font-size: 5vh;
  }
}

.lettering.bilder {
  font-size: 5vh;
}

.timer {
  display: flex;
  /*margin: 2vh 3vw;*/
  max-width: 1600px;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  width: 100%;
}

/* For Mobile */
@media only screen and (max-width: 768px) {
  .timer {
    flex-direction: column;
    justify-content: start;
    flex-wrap: nowrap;
  }
}

/* For Tablets */
/*@media only screen and (min-width: 768px) and (max-width: 780px) {*/
/*  .timer {*/
/*    flex-direction: column;*/
/*    justify-content: space-evenly;*/
/*  }*/
/*}*/

.timer-component {
  display: flex;
  flex-direction: column;
}


.digits {
  /*font-family: 'Roboto', serif;*/
  font-family: 'Parisienne', serif;
  font-size: 5vw;
  text-align: center;
  color: white;
}

/* For Mobile */
@media only screen and (max-width: 768px) {
  .digits {
    font-size: 6vh;
  }
}

.time-unit {
  /*font-family: 'Roboto Light', serif;*/
  font-family: 'Parisienne', serif;
  font-size: 2vw;
  text-align: center;
  color: white;
}

/* For Mobile */
@media only screen and (max-width: 768px) {
  .time-unit {
    font-size: 3vh;
  }
}