Boa Noite, estou tentando estilizar o botão, ele não está recebendo essas estilizações
header.scss/componentes
@use '../abstract/variaveis';
header{
background: variaveis.$gradiente-primario;
padding: 2rem;
nav{
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
.linha{
border-top: 1px solid black;
width: 80%;
}
ul{
display: inline-flex;
gap: 2rem;
li{
list-style-type: none;
}
a{
text-decoration: none;
color: variaveis.$cor-primaria;
font-weight: 500;
font-family: variaveis.$ft-textos;
}
}
}
#home{
max-width: 1040px;
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
.textos-home{
max-width: 464px;
h1{
font-size: 42px;
color: variaveis.$cor-primaria;
margin-bottom: 2rem;
font-family: variaveis.$ft-titulos;
span{
color: variaveis.$cor-secundaria;
}
}
.btn-main{
width: 280px;
height: 66px;
background: variaveis.$cor-sextuplo;
color: #fff;
border-radius: 66px;
font-size: 1.5rem;
cursor: pointer;
font-family: variaveis.$ft-titulos;
border: none;
outline: none;
&:hover {
border: 1px solid #888fb4;
color: variaveis.$cor-quintupla;
background:variaveis.$cor-default;
width: 282px;
}
}
}
.img-home{
max-width: 474px;
img{
width: 100%;
}
}
}
}
_variaveis.scss/abstract
// Variáveis
// Cores
$cor-primaria: #0C0421;
$cor-secundaria: #4e75ff;
$cor-terciaria: #85A0ff;
$cor-quaternaria: #E8F5C8;
$cor-quintupla: #fff;
$cor-sextuplo: #85A0ff;
$cor-default: #bcc6eb;
$gradiente-primario: linear-gradient(180deg, #E8F5C8 0%, #FFFFFF 96.87%);
$gradiente-secundario: linear-gradient(180deg, rgba(130, 214, 175, 0.7) 10%, rgba(202, 212, 250, 0.3) 10%);
//Fontes
$ft-textos: 'Montserrat', sans-serif;
$ft-titulos: 'Krona One', sans-serif;
styles.scss/styles
@use './abstract/root';
@use './componentes/header.scss';