@use "colors" as *;
@use "typography" as *;
@use "breakpoints" as *;
@use "typography" as *;

body{
    background-color: $white-color;
    @include font-primary;
}

h1, h2, h3, h4, h5, h6{
    @include font-primary;
    font-weight: 700;
}

h1{
    @include heading--xl;
}
h2{
    @include heading--md;
}
h3{
    @include heading--sm;
}

p{
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 150%;
    letter-spacing: 4%;
    margin-bottom: 26px;
    @include responsive(tablet){
        margin-bottom: 40px;
    }
}

a{
    transition: all;
    color: $dark-color;
    &:hover{
        color: $accent-color;
    }
}