:root {
    --shadow-grey: #1a1423ff;
    --midnight-violet: #372549ff;
    --mauve-shadow: #774c60ff;
    --dusty-mauve: #b75d69ff;
    --almond-silk: #eacdc2ff;
}
body {
    background-color: var(--shadow-grey);
    color: var(--almond-silk);
    font-family: Arial, sans-serif;
}
.placeholder-image {
    width: 75%;
    margin: 48px auto 0;
    display: block;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}
.placeholder-image:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.placeholder-image img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}
.section-text {
    text-align: left;
    margin: 0 auto;
    max-width: 800px;
}
.info-box {
    background-color: var(--midnight-violet);
    color: var(--almond-silk);
    padding: 20px 40px;
    border-radius: 8px;
    text-align: center;
    margin-top: 30px;
}
.info-box h4 {
    margin: 0;
}
h1, h2 {
    color: var(--dusty-mauve);
}
h3 {
    color: var(--dusty-mauve);
    margin-top: 16px;
}
ul {
    color: var(--almond-silk);
    padding-left: 20px;
}
.description-box {
    background-color: var(--mauve-shadow);
    color: var(--almond-silk);
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.description-box a {
    color: var(--almond-silk);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.description-box a:hover {
    color: var(--dusty-mauve);
}
.contact-box {
    background-color: var(--midnight-violet);
    color: var(--almond-silk);
    padding: 20px 40px;
    border-radius: 8px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
.contact-box a {
    color: var(--almond-silk);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.contact-box a:hover {
    color: var(--dusty-mauve);
}