@font-face {
  font-family: BebasNeue;
  src: url('fonts/BebasNeue_Bold.otf');
}

body {
  background-image: url(images/bg-fg-01.svg);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: BebasNeue;
  text-transform: uppercase;
  color: #fff;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr min-content;
  text-align:center;
  height: 100%
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 1;
  margin-top: 2.7rem;
}

.box2 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 3;
  text-align: right;
  margin-bottom:8rem;
}

.box3 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 3;
  text-align: left;
  align-self: center;
  margin-bottom:6rem;
}

.box4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 4;
  margin-bottom: 9rem;
}

.box5 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 5;
  color: #53386a;
  text-align: left;
}

h1 {
  font-size: 10rem;
  margin-bottom: 2.5rem;
}

h2 {
  font-size: 5rem;
}

p {
  font-size: 4.3rem;
  margin-top: 0.5rem;
}

span {
  color: #f9de71;
}

.count-down{
  margin-top: 0rem;
}

.headline {
  color: #442258;
}

.subtitle {
  margin-top: 0.01rem;
  margin-bottom: 0.01rem;
  font-size: 6rem;
}

.ice-creams {
  display:none;
  margin-right: 3rem;
}

.ice-cream-img {
  height: 35rem;
}

.qr-icon {
  border: 1rem solid #442258;
  border-radius: 1rem;
  margin-left: 3rem;
  height: 10rem;
}

 .footer-text {
  font-size: 5.5rem;
  margin-left:1.5rem;
  margin-bottom:2rem;
}

.logo-footer {
    margin-left: 2rem;
    height: 13vh;
}


/* Fading animation */
.fade {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}