:root {
  --home-bg-img: url("/beach.jpg");

  --color1: #361a05;
  --color2: #9c663d;
}

/* page styling */

body {
  margin: 0;

  font-family: Verdana, sans-serif;
  color: black;

  background-image: var(--home-bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* header */

.top-section {
  text-align: center;
  margin-top: 40px;
}

h1 {
  color: var(--color1);
}

/* main content card */

.main-section {
  width: min(700px, 90%);
  background: var(--color2);

  padding: 25px;
  margin: 30px;

  border-radius: 12px;
  border-width: 10px;
  border-style: solid;
  border-color: var(--color1);
  text-align: center;
}

/* images */

img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

/* list */

ul {
  text-align: left;
  display: inline-block;
}

/* floating cloud animation */

.floating-cloud {
  margin: 20px auto;
  width: 120px;
  animation: floatCloud 6s ease-in-out infinite alternate;
}

@keyframes floatCloud {

  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(40px);
  }

}