@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Unica+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Tulpen+One&family=Unica+One&display=swap');

body {
  background: #009298;
  background-size: cover;
  overflow-x: hidden;
  min-height: 100vh;
  margin:0;
  user-select: none;
}


.page-title {
  font-family: "Audiowide", sans-serif;
  font-size: 4rem;
  margin: 10px 10px 10px;
  text-align: center;
  color: #be3046;
}

p {
font-family: "Audiowide", sans-serif;
font-size: 2rem;
margin: 10px 0 10px;
text-align: center;
color: #246f72;
}


.card {
  position: absolute;
  border-radius: 8px;
  padding: 14px;
}

.card-1 {
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('cloud.jpg');
  background-size: cover;
  width: 700px;
  height: 100px;
}

.card-2 {
  top: 225px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('sunset.jpg');
  background-size: cover;
  width: 700px;
  height: 400px; 
}

.img-1 {
  position: absolute;
  top: 90px;
  left: 5%;
  width: 200px;
  height: auto;
  transform: rotate(-4deg);
  animation: flicker 1.5s infinite;
}

@keyframes flicker {
  0%   { opacity: 1; }
  19%  { opacity: 1; }
  20%  { opacity: 0; }
  21%  { opacity: 1; }
  60%  { opacity: 1; }
  61%  { opacity: 0.3; }
  62%  { opacity: 1; }
  100% { opacity: 1; }
}

.img-2{
  position: absolute;
  top: 400px;
  left: 80%;
  width: 200px;
  height: auto;
  transform: rotate(5deg);
}

.img-1 { animation: flicker 2s infinite; }
.img-2 { animation: flicker 2s infinite; animation-delay: 0.7s; }