:root {
    --text-color-light: white;
    --text-color-medium: lightgrey;
    --text-color-dark: black;

    --color-primary: white;
    --color-secondary: #51515a;
    --color-secondary-light: #787882;
    --color-secondary-dark: #2a2a2f;
    --color-accent: #ce3132;
    --color-blue: #0C6DB0;

    --padding-page-horizontal: 5rem;

    --font-size-primary: 1rem;
    --font-size-medium: 1.5rem;
    --font-size-large: 2rem;
}
html {
    font-family: Montserrat;
    font-size: var(--font-size-primary);
    color: var(--color-secondary);
}

body{
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    main {
        flex-grow: 1;
    }
}

h1{
   font-size: var(--font-size-large); 
}

h2{
   font-size: var(--font-size-medium); 
}

h3{
    margin-bottom: 2px;
}

ul {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
  }

.small-text{
    font-size: var(--font-size-primary);
}

.medium-text{
    font-size: var(--font-size-medium);
}

.large-text{
    font-size: var(--font-size-large);
}

.background-primary{
    background-color: var(--color-primary);
}

.background-accent{
    background-color: var(--color-accent);
}

header{
    background-color: var(--color-secondary-dark);
    text-align: center;
    padding: 0 var(--padding-page-horizontal);
}

nav{
    background-color: var(--color-secondary);
    text-align: center;
    padding: .5rem;
    color: var(--color-primary);
    a {
        padding: .5rem;
        text-decoration: none;
        color: inherit;
        &:hover {
            background-color: var(--color-secondary-light);
        }
        &.active-page{
            background-color: var(--color-blue);
        }
    }
}

main {
    font-size: var(--font-size-medium);
    text-align: center;
}

.hero{
    background-image: url("images/crawfishies.jpg");
    background-size: cover;
    color: var(--color-primary);
    .hero-content{
        padding: 2rem;
        backdrop-filter: brightness(50%);
    }
}

.about-us{
    padding: .1rem var(--padding-page-horizontal);
    color: var(--color-primary);
}

.beneficiaries{
    background-color: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
    container-type: inline-size;
    
    beneficiary-component{
        display: flex;
        gap: 1rem;
        padding: 2rem 0 2rem;
        justify-content: center;
        > * {
            max-width: 1000px;
        }
        &:nth-of-type(2n){
            background-color: var(--color-primary);
            filter: brightness(98%);
        }
        
        @container (width < 1200px) {
            flex-direction: column;
            padding: 2rem 3rem;
            &:nth-of-type(2n){
                flex-direction: column-reverse;
            }
            img{
                max-width: 275px;
            }
        }
    }
}

.winners{
    background-color: var(--color-secondary);
    color: var(--color-primary);
    container-type: inline-size;
    .winner-group {
        display: flex;
        justify-content: center;
        gap: 1rem;
        @container (width < 600px) {
            flex-direction: column;
        }
    }

    img{
        object-fit: contain; /* or scale, cover, fill */
        width: 700px;
        height: 500px;
        @container (width < 1400px) {
            width: 500px;
            height: 400px;
        }
        @container (width < 600px) {
            width: 350px;
            height: 250px;
        }
    }
}

.sponsors {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

table{
    font-size: var(--font-size-primary);
    margin-left: auto;
    margin-right: auto;
}

footer {
    background-color: var(--color-accent);
    color: var(--text-color-light);
    text-align: center;
    padding: 1rem;
    font-size: var(--font-size-medium);
}