:root {
    --font: "NHaasGroteskTXPro-55Rg", sans-serif;
    --font-bold: "NHaasGroteskTXPro-75Bd", sans-serif;
    --font-secondary: "Bree", sans-serif;
    --primary: #000000;
    --secondary: #C6E100;
    --tertiary: #2F0D0B;
    --border-radius: 16px;
}

@font-face {
  font-family: 'NHaasGroteskTXPro-55Rg';
  src: url('fonts/NHaasGroteskTXPro-55Rg.woff') format('woff');
}

@font-face {
  font-family: 'NHaasGroteskTXPro-75Bd';
  src: url('fonts/NHaasGroteskTXPro-75Bd.woff') format('woff');
}


body {
    word-spacing: 2px;
    line-height: 1.2;
    font-weight: 400;
}

.heading {
    font-size: 24rem;
}

.bold-heading {
    font-weight: 700;
}


.body-text {
    font-size: 16px;
    font-weight: 300;
}

.font-primary {
    color: var(--primary);
}

.font-secondary {
    color: var(--secondary);
}

.font-tertiary {
    color: var(--tertiary);
}

.button {
    text-align: center;
    border-radius: 30px;
    transition: 0.35s linear all;
    color: #fff;
    background-color: var(--primary);
    padding: 15px;
    font-size: 16px;
    border: none;
    font-family: var(--font);
}

.button:hover {
    background: var(--secondary);
    color: #fff;
    border-color: #fff;
    transition: 0.35s linear all;
    cursor: pointer;
}