:root {
    --background-colour: #FEFEFE;
    --background-offset-colour: #F9F9F8;
    --primary-colour: #91A881;
    --primary-accent-colour: #F3F4EF;

    --layout-width: 1400px;
    --layout-header-footer-width: 1600px;
    --layout-gutter: 60px;
    --layout-spacing: 22px;
    --layout-section-gap: 44px;

    @media (max-width: 600px) {
        --layout-gutter: 22px;
    }
}

@font-face {
    font-family: 'Manrope';
    src: url('https://cdn.taurusnetwork.uk/static/fonts/Manrope/Manrope-Regular.ttf') format('truetype');
}

body {
    background-color: var(--background-color);
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;

    main {
        flex-grow: 1;
    }
}

header, footer {
    div.container {
        max-width: var(--layout-header-footer-width);
        margin: 0 auto;
        padding: 0 var(--layout-gutter);
    }
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--layout-section-gap);
    padding-top: var(--layout-gutter);
    padding-bottom: var(--layout-gutter);

    > section {
        width: 100%;
    }

    .container {
        max-width: var(--layout-width);
        margin: 0 auto;
        padding-left: var(--layout-gutter);
        padding-right: var(--layout-gutter);
    }
}

button, .button {
    --bg-colour: lime;
    --bg-hover-colour: green;
    --bg-active-colour: yellow;

    --text-colour: black;
    --text-hover-colour: var(--text-colour);
    --text-active-colour: var(--text-colour);

    display: block;
    width: fit-content;
    border-radius: 7px;
    padding: 14px 20px;
    border: solid 1px var(--primary-colour);
    
    background-color: var(--bg-colour);
    color: var(--text-colour);

    font-weight: bold;
    text-decoration: none;
    text-align: center;
    
    cursor: pointer;
    white-space: nowrap;


    &:hover {
        background-color: var(--bg-hover-colour);
        color: var(--text-hover-colour);
    }

    &:active {
        background-color: var(--bg-active-colour);
        color: var(--text-active-colour);
    }

    &.secondary {
        --bg-colour: var(--background-colour);
        --bg-hover-colour: color-mix(in srgb, var(--primary-colour) 50%, var(--background-colour));
        --bg-active-colour: color-mix(in srgb, var(--primary-colour) 75%, var(--background-colour));
    }

    &.primary {
        --bg-colour: var(--primary-colour);
        --bg-hover-colour: color-mix(in srgb, var(--primary-colour) 50%, var(--primary-accent-colour));
        --bg-active-colour: color-mix(in srgb, var(--primary-colour) 75%, var(--primary-accent-colour));

        --text-colour: white;
    }

    svg {
        width: 24px;
        height: 24px;
    }

    &.mini {
        padding: 8px 12px;
    }
}

.card {
    background-color: var(--background-colour);
    padding: var(--layout-spacing);
    border-radius: 14px;
    border: solid 1px var(--primary-colour);
    width: 100%;
}