@font-face {
  font-family: 'JacquardFont';
  src: url('Jacquard12-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'PixelSansFont';
  src: url('PixelifySans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  background-image: url('https://i.pinimg.com/736x/d4/80/3a/d4803aaffe3c4eb32cb94dabec1ae974.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  font-family: 'sans-serif';
}

h1,
h2 {
  font-family: 'JacquardFont';
  font-weight: 700;
}
p {
  font-family: 'PixelSansFont'
}
li {
  font-family: 'PixelSansFont'
}
h1, h2, p {
  background-color: rgba(255, 255, 255, 0.7); /* white with 70% opacity */
  padding: 10px;
  border-radius: 8px;
  display: inline-block;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

li {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  width: fit-content; 
  margin-left: auto;
}
.image-wrapper {
  background-color: rgba(70, 100, 20, 0.5); 
  display: inline-block;   
  padding: 7px;           
  border-radius: 7px;
}
.animated-image {
transition: transform 0.4s ease;
}
.animated-image:hover {
  transform: rotate(5deg) scale(1.05);
}
.image-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;    
}