html {
    font-size: 16px;
}

body {
    text-align: center;
    background-color: var(--primary-color);
    min-block-size: 100vh;
    color: var(--primary-white);
    font-family: var(--primary-font);
}

h1, h2, h3, h4 ,h5, h6 {
    color: var(--tertiary-color);
}

.wrapper {
    /* width: 90%;
    max-width: 1200px;
    min-width: 320px; */
    width: clamp(320px, 92vw, 1440px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4%, 2.5rem);
    text-align: left;
}

main section {
    padding-block-start: var(--spacing-40);
    padding-block-end: var(--spacing-40);
}

.button {   
    border: 1px solid var(--primary-white);
    color: var(--primary-white);
    background: var(--primary-color);
    border-radius: 12px;
    padding-block: 6px 10px;
    box-shadow: inset 0px -3px 0px var(--primary-white);
    padding-inline-start: var(--spacing-24);
    padding-inline-end: var(--spacing-24);
}

.separador {
    text-align: center;
}
.separador h2 {
    background: linear-gradient(258.75deg, rgb(67, 177, 200) 31.33%, rgb(153, 137, 235) 48.42%, rgb(217, 127, 209) 59.35%, rgb(245, 130, 178) 65.56%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: rgba(0, 0, 0, 0) 0px 0px;
    padding: var(--spacing-32) 0;    
    font-size: clamp(20px, 5vw, 36px);   
}

.isSecondary {  
    border:none;    
    background: var(--secondary-color);       
    box-shadow: rgb(137, 12, 73) 0px -4px 0px inset;
}

@media(min-width:1024px){
    .separador h2 {
        margin-block-end: var(--spacing-40);
    }
    .separador img {
        margin-block-end: var(--spacing-24);
    }
}