:root{
    --transparent: transparent;

    --black: #000000;
    --white: #ffffff;
    --primary-color: #f23640;
    --secondary-color: #333333;

    --bs-gray: #6c757d;
    --pale-gray: #e1e1e1;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-gray-dark: #343a40;

    --bs-success: #01a601;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #f23640;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    --charcoal: #333333;
    --wind-chime: #e0e0e0;
    --light-chime: #dadada;

    --shadow: rgba(0, 0, 0, 0.08);

    --flex: flex;
    --grid: grid;

    --w-100: 100%;
    --h-100: 100%;
    --w-50: 50%;

    --box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    --light-box-shadow: rgba(0, 6, 36, 0.04) 0px 4px 5px 0px, rgba(0, 6, 36, 0.08) 0px 0px 8px 0px;;
}

body{
    scroll-behavior: smooth;
    background: var(--pale-gray);
}

*, *::before, *::after {
  box-sizing: border-box;
}

button{
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0px;
    line-height: 1.2;
    font-weight: 600;
}

p{
    margin: 0px;
    padding: 10px 0px;
    line-height: 1.5;
}

a{
    cursor: pointer;
    text-decoration: none;
    color: var(--primary-color);
}

button{
    border-radius: 4px;

    &.success{
        background: var(--bs-success);
        color: var(--white);

        &:hover{
            opacity: 0.8;
        }
    }

    &.info{
        background: var(--bs-info);
        color: var(--white);

        &:hover{
            opacity: 0.8;
        }
    }

    &.warning{
        background: var(--bs-warning);
        color: var(--white);

        &:hover{
            opacity: 0.8;
        }
    }

    &.danger{
        background: var(--bs-danger);
        color: var(--white);

        &:hover{
            opacity: 0.8;
        }
    }

    &.btn-primary {
        background-color: var(--primary-color);
        color: var(--white);

        &:hover{
            opacity: 0.8;
        }
    }

    &.btn-secondary {
        background-color: var(--secondary-color);
        color: var(--white);

        &:hover{
            opacity: 0.8;
        }
    }
}

.flex{
    display: flex;
}

.grid{
    display: grid;
}