@charset "UTF-8";

.container {
    background-image: url(assets/images/Rectangle-purple-mobile.svg), url(assets/images/Rectangle-ghostwhite-mobile.svg);
    background-position: 0 0, 0 392px;
    background-repeat: no-repeat;
    background-color: white;
    margin: auto;
    max-width: 375px;
    overflow-x: hidden;
}


/* Estilização do header */
.cabecalho {
    display: flex;
    justify-content: space-between;
    margin: 2rem 1rem 0;
}

.cabecalho a {
    font-family: 'Manrope', sans-serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 2em;
    text-decoration: none;
    color: var(--white);
    border-bottom: 3px solid var(--eucaplyptus);
}
  
.cabecalho a:hover {
    color: var(--eucaplyptus);
    transition: .5s;
}

/* Estilização do main */

/* Estilização do bloco título */

.principal__titulo {
    position: relative;
    text-align: center;
}

.principal__titulo__imagem1 {
    display: none;
}
    
.principal__titulo h1 {
    font-family: 'Fraunces144', serif;
    color: var(--white);
    font-size: 3.125em;
    margin-top: 4.125rem;
    margin-bottom: 2.5rem;
}

.principal__titulo span {
    border-bottom: 3px solid var(--eucaplyptus);
}
    
.principal__titulo a {
    font-family: 'Manrope', sans-serif;
    background-color: var(--eucaplyptus);
    padding: 0.75rem 1.5rem;
    font-size: 1em;
    font-weight: 700;
    line-height: 2em;
    text-decoration: none;
    margin-bottom: 3.875rem;
    color: var(--darkPurple);
    display: inline-block;
    border: 1px solid var(--eucaplyptus);
}

.principal__titulo a:hover {
    background-color: var(--darkPurple);
    color: var(--eucaplyptus);
    transition: .5s;    
}

.principal__titulo__imagem2 {
    display: none;
}

.principal__titulo__imagem {
    display: block;
    width: 80%;
    margin: auto;
}

/* Estilização do bloco conteúdo */

.principal__conteudo {
    display: flex;
    flex-direction: column;
    width: 90vw;
    margin: 2.75rem auto 10.75rem;
}

.principal__conteudo__texto-itens {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
}

.principal__conteudo > article > span {
    margin: auto;
    padding: 0.5rem 1.125rem;
    font-family: 'Fraunces144', serif;
    font-size: 1.25em;
    line-height: 1.5em;
    color: var(--darkPurple);
    border: 1px solid var(--darkPurple);
    border-radius: 50px;
}

.principal__conteudo__texto-texto {
    text-align: center;
}

.principal__conteudo__texto-texto h3 {
    /* margin-top: 1.5rem;
    margin-bottom: 1rem; */
    margin: 1.5rem 0 1rem; 
    font-family: 'Fraunces144', serif;
    font-size: 1.75em;
    color: var(--darkPurple);
}

.principal__conteudo__texto-texto p {
    font-family: 'Manrope', sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--darkPurple);
}
    
/*Estilização do bloco perfil */
  
.principal__perfil {
    position: relative;
    text-align: center;
}
  
.principal__perfil__imagem-perfil {
    width: 17.5rem;
    height: 17.5rem;
}
    
.principal__perfil__texto {
    background-color: var(--darkPurple);
    width: 91vw;
    margin: 0 auto;
    position: relative;
    top: -56px;
}
    
.principal__perfil__texto h2 {
    padding: 2rem 2rem 1rem;
    font-family: 'Fraunces144', serif;
    font-size: 2em;
    color: var(--white);
}
    
.principal__perfil__texto p {
    padding: 0 1.875rem;    
    font-family: 'Manrope', sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.75em;
    color: var(--white);
}
    
.principal__perfil__texto a {    
    display: inline-block;
    background-color: var(--eucaplyptus);
    padding: 0.75rem 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 1em;
    font-weight: 700;
    text-decoration: none;
    color: var(--darkPurple);    
    border: 1px solid var(--eucaplyptus);
    margin: 1.5rem auto 2rem;
}

.principal__perfil__texto a:hover {
    background-color: var(--darkPurple);
    color: var(--eucaplyptus);
    transition: .5s;
}
    
.principal__perfil__imagem3 {
    display: none;
}

/* Estilização do footer */
  
.rodape__principal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 7.25rem;
    height: 6.4rem;
    margin: 1rem auto 6rem ;
}

.rodape__midia-social {
    display: flex;
    justify-content: space-between;
}

.attribution { 
    font-size: 12px;
    font-family: 'Outfit', sans-serif;
    text-align: center;
    color: var(--darkPurple);
    padding-bottom: 16px;
}

.attribution a { 
    color: var(--davysGrey); 
}