@import url('fonts.css');
@import url('header.css');

/* BASE
------------------------------------- */
/* atf styles */

html,
body {
    color: #000;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.5;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.blog #main h1 a {
    color: #58585a;
    font-family: 'Alice', sans-serif;
    font-weight: 400;
    margin: 0;
}

h1,
.blog #main h1 a {
    color: #000;
    font-family: 'Alice', sans-serif;
    font-size: clamp(38px, 5vw, 64px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 76.8px */
    letter-spacing: 2px;
    text-transform: capitalize;
}

h2 {
    font-size: clamp(32px, 5vw, 45px);
    line-height: 124%;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.blog #main h2 a,
h3 {
    font-size: clamp(26px, 5vw, 40px);
    line-height: 130%;
}

h4 {
    font-size: clamp(20px, 5vw, 25px);
    line-height: 135%;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.cursive {
    font-family: 'Satisfy', sans-serif;
    text-transform: none;
    letter-spacing: 2px;
}

/* Dark button with transparent and border on hover */
.main-btn,
a.main-btn,
.bp-forms-btn,
a.bp-forms-btn,
a.main-btn:visited {
    border: 2px solid #93e9be;
    border-radius: 10px;
    color: #58585a;
    font-family: 'Alice', sans-serif;
    font-size: clamp(16px, 1vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
    letter-spacing: 1.15px;
    text-transform: uppercase;
    padding: 0.4em 1.5em;
    background-color: #93e9be;
}

.main-btn:hover,
a.main-btn:hover,
.bp-forms-btn:hover,
a.bp-forms-btn:hover,
a.main-btn:visited:hover {
    border-radius: 0;
    border-color: #58585a;
    background-color: transparent;
}

article a,
article a:visited {
    color: #07d8ec;
    font-weight: bold;
}
/* RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 600px) {
    h1,
    .blog #main h1 a,
    h2,
    h3,
    h4 {
        letter-spacing: normal;
    }

    .main-btn,
    a.main-btn,
    .bp-forms-btn,
    a.bp-forms-btn,
    a.main-btn:visited {
        letter-spacing: normal;
        max-width: fit-content;
        margin: 10px 0;
    }
}