@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --m-dark: #051923;
    --m-light: #FBFBFB;
    --m-white: white;

    --m-light-grey: #e4e4e4;
    --m-grey: #9AA6B2;

    --m-primary: #42B883;
    --m-secondary: #213547;


}

/* Elements & Utilities */

body {
    background-color: var(--m-light);
    
    background-image: linear-gradient(var(--m-light-grey) 1px, transparent 1px), linear-gradient(to right, var(--m-light-grey) 1px, var(--m-light) 1px);
    background-size: 24px 24px;
    background-attachment: fixed;
}

.font-sans {
    font-family: "Plus Jakarta Sans", serif;
    font-weight: 400;
    font-style: normal;
}

.ratio-4x1 {
    aspect-ratio: 4/1;
}

.img-border {
    border: 4px solid var(--m-primary);
    padding: 0;
}

.ls-1 {
    letter-spacing: 1px;
}

a {
    margin-bottom: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.fs-small {
    font-size: small;
}

.fs-smaller {
    font-size: smaller;
}

.fs-xsmall {
    font-size: x-small;
}

.text-m-light {
    color: var(--m-light);
}

.text-m-dark {
    color: var(--m-dark);
}

.text-m-grey {
    color: var(--m-grey);
}

.text-m-primary {
    color: var(--m-primary);
}

.text-m-secondary {
    color: var(--m-secondary);
}

.bg-m-white {
    background-color: var(--m-white);
}

.bg-m-light {
    background-color: var(--m-light);
}

.bg-m-dark {
    background-color: var(--m-dark);
}

.bg-m-grey {
    background-color: var(--m-grey);
}

.bg-m-primary {
    background-color: var(--m-primary);
}

.bg-m-secondary {
    background-color: var(--m-secondary);
}

.bg-m-white {
    background-color: var(--m-white);
}