:root {
    /* Base colors */
    --color-bg-main: #151412;
    --color-bg-section: #181716;
    --color-bg-card: #1f1c19;

    /* Text */
    --color-text-primary: #f1f1f1;   
    --color-text-secondary: #f1eadf; 
    --color-text-muted: #ede4d7;     

    /* Brand accent */
    --color-accent: #b08d57;   
    --color-accent-hover: #8a6938;   /* Darker bronze for hover */
    --color-accent-soft: #3a3124;

    /* Borders */
    --color-border: #2f2c28;   
    --color-border-soft: #26231f;
}

.important-info {
    padding: 1rem;
    max-width: 1100px;
    margin: auto;
    text-align: center;
}

.important-info h1, h2, h3{
    color: var(--color-text-primary);
}

.important-info h1 {
    margin: 1rem auto 2rem;
    letter-spacing: 0.05rem;
    font-size: 2.5rem;
}

.important-info h2 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.important-info h3 {
    margin-top: 2rem;
    margin-bottom: 0.25rem;
}

.important-info p {
    color: var(--color-text-muted);
}

.made-by {
    padding: 4rem;
}

.made-by span {
    font-style: italic;
    font-weight: 600;
}

@media screen and (max-width: 300px){
    .important-info h1 {
        font-size: 1.5rem;
    }
    .important-info h2{
        font-size: 1.2rem;
    }

    .important-info h3 {
        font-size: 1rem;
    }

    .important-info p {
        font-size: 0.94rem;
    }

    .made-by {
        padding: 1rem;
    }
}