@charset "UTF-8";

/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');

/* Background gradient */
body {
  margin: 0;
  font-family: "Alice", serif; /* Updated font */
  background: linear-gradient(180deg, #FFFCFC 0%, #F6F8F3 32.86%, #B7DCB0 63.36%, #7EC171 100%);
}

/* Header: Listen Again */
header {
  color: #000;
  text-align: center;
  font-family: "Aboreto", cursive; /* Header uses Aboreto */
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 20px;
}

/* Section styling */
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Alice Leso & Jakob Haslbeck */
.project-info h2 {
  color: #000;
  text-align: center;
  font-family: "Alice", serif; /* Updated font */
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 20px 0;
}

/* Paragraph text */
.project-info p {
  color: #000;
  text-align: center;
  font-family: "Alice", serif; /* Updated font */
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Italicized text: Il barone rampante */
.project-info p em {
  color: #000;
  font-family: "Alice", serif; /* Updated font */
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

/* Image styling */
.project-image img {
  display: block;
  margin: 0px auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Image styling */
.background img {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
  background-blend-mode: hard-light;
}

/* Audio player */
.audio-player {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

audio {
  width: 80%;
}