@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap');

/* * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 */
body {
    font-family: 'Comic Relief', cursive;
    font-size: 1.5rem;
    line-height: 1.6;
    padding: 20px;
    background-image: url('images/background.jpg'); /* Photo by Matthew Montrone: https://www.pexels.com/photo/photo-of-trees-and-mountain-1324803/ */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}

header {
    font-size: clamp(2rem, 6vw, 5rem);
    padding: 20px;
    text-align: center;
    word-break: break-word;
    outline: 4px solid rgba(255, 255, 255, 0.4);
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

p {
    margin: 1rem 0;
}

section + section {
    margin-top: 1.5rem;
}

table {
    border-collapse: collapse;
    font-size: 2rem;
    margin: 20px auto;
    width: 75%;
}

table, th, td {
    border: 4px solid beige;
    border-collapse: collapse;
    padding: 12px 20px;
    text-align: center;
    color: lightcyan;
}

th {
color: rgb(119, 238, 119);
}

tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.4);
} 

tr:hover {
    background-color: rgba(198, 247, 255, 0.4);
}

@media (max-width: 600px) {
    html, body {
        max-width: 100%; overflow-x: hidden;
    }
    body {
        line-height: 1.6; padding: 12px;
    }
    header {
      font-size: 1.8rem;
      padding: 12px;
      line-height: 1.2;
    }
    p {
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        line-height: 1.6;
        margin: 0.9rem 0;
    }
    table {
        width: 100%;
        table-layout: fixed;
        font-size: 0.9rem;
        margin: 12px 0;
    }
    td, th {
        padding: 6px 8px;
        word-break: break-word;
    }
}