html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  font-size: 18px;
}

@font-face {
  font-family: "Comic Sans MS";
  src: url("fonts/ComicSansMSRegular.ttf");
}
@font-face {
  font-family: "Comic Sans MS";
  src: url("fonts/ComicSansMSBold.ttf");
  font-weight: 600;
}

body {
  background-image: url("images/white-paper.jpg");
  padding: 20px;
  font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
}

.wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1052px;
  border-image-slice: 37 37 37 37;
  border-image-width: 37px 37px 37px 37px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: round round;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: round round;
  border-image-source: url("images/border-heart.png");
  border-style: solid;
  /* background-image: url("images/header.jpg");
  background-repeat: no-repeat;
  background-clip: padding-box;
  background-size: 100%; */
  margin: 0 auto;
}

.main {
  padding: 15px;
}

.back {
  position: relative;
  z-index: -1;
}

.front {
  position: relative;
  z-index: 1;
}

.header {
  width: 100%;
}

.amazing-marquee {
  position: relative;
  background: linear-gradient(#e62490, #c8e3fa);
  height: 35px;
  line-height: 35px;
  color: #fbfbfb;
  text-shadow: 1px 1px 1px black;
  top: -10px;
  box-shadow: 1px 5px 20px #7ae2d7;
}

.amazing-marquee img {
  position: absolute;
  z-index: 40;
  transform-origin: 20% 20%;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transform: translateY(-25%);
}

.goat {
  right: -4px;
  max-width: 176px;
  min-width: 20px;
  width: 18vw;
}

.kitten {
  max-width: 156px;
  min-width: 20px;
  width: 18vw;
  left: -13px;
}

marquee {
  width: calc(100% - 8vw);
}

.mega-timer > img {
  max-width: initial !important;
}

.mega-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marriedin {
  text-align: center;
}

.birds-party {
  position: relative;
}

.long-long-days {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.long-long-days p {
  font-size: 10vw;
  line-height: 6vw;
  font-weight: 600;
  color: #ffef00;
  text-shadow: 2px 2px 15px #ff00ee;
  margin: 0;
}

.today {
  width: 30vw !important;
  max-width: 360px !important;
}

.long-long-days img {
  width: 13vw;
  max-width: 138px;
}

.birds-party img {
  position: relative;
  vertical-align: top;
}

.ricky {
  max-width: 272px;
  width: 20vw;
  transform: scaleX(-1);
  left: 3vw;
  z-index: 40;
  animation-name: fly-ricky;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.rings {
  max-width: 447px;
  width: 31vw;
}

.marty {
  max-width: 272px;
  width: 20vw;
  right: 3vw;
  animation-name: fly-marty;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 3s;
}

@keyframes fly-marty {
  0% {
    transform: translateY(2vh) scale(1);
  }

  50% {
    transform: translateY(0) scale(0.97);
  }

  100% {
    transform: translateY(2vh) scale(1);
  }
}

@keyframes fly-ricky {
  0% {
    transform: translateY(2vh) scale(-1, 1);
  }

  50% {
    transform: translateY(0) scale(-1, 0.97);
  }

  100% {
    transform: translateY(2vh) scale(-1, 1);
  }
}

article {
  padding: 0 18px 18px 18px;
  margin: 20px;
}

article + article {
  border-top: 1px solid gray;
}

article:first-child {
  color: #008f4f;
  overflow: hidden;
}
article:nth-child(2) {
  color: #55534d;
}
article:last-child {
  color: red;
}

article h1 {
  font-size: 36px;
}

.mapa {
  width: 350px;
  float: right;
}

.jerry {
  float: right;
  width: 100px;
}

.love-comics {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.plus,
.equals {
  width: 110px;
}

.love {
  width: 350px;
}

.dress-code {
  max-height: 500px;
}

footer {
  width: 100%;
  text-align: center;
  padding: 25px 0;
}

footer div {
  font-size: 14px;
}

@media screen and (max-width: 400px) {
  body {
    font-size: 20px;
    padding: 10px;
  }

  .main {
    padding: 5px;
  }

  .wrapper {
    border-image-width: 14px;
  }
}

@media screen and (min-width: 1425px) {
  .long-long-days p {
    font-size: 144px;
    line-height: 100px;
  }
}

@media screen and (max-width: 630px) {
  .time-word {
    width: 80%;
  }
  .mapa {
    width: 100%;
  }
  .dress-code {
    width: 100%;
  }
  .jerry {
    width: 40%;
  }
  .love {
    width: 60%;
  }

  .plus,
  .equals {
    width: 50px;
  }

  .love-bird {
    width: 95%;
  }
}