/*###### Colors #####*/

:root {
    --jmBlue: #0097B2;
    --jmBlue-75: #0097B2BF;
    --jmBlue-50: #0097B280;
    --jmBlue-25: #0097B240;
    --jmGreen: #7ED958;
    --jmGreen-75: #7ED958BF;
    --jmGreen-50: #7ED95880;
    --jmGreen-25: #7ED95840;
    --black: #000000;
    --black-75: #000000BF;
    --black-50: #00000080;
    --black-25: #00000040;
    --white: #ffffff;
    --white-75: #ffffffBF;
    --white-50: #ffffff80;
    --white-25: #ffffff40;
}

.jmBlue {
    color: var(--jmBlue)
}

.jmGreen {
    color: var(--jmGreen)
}

.jmBlack{
    color: var(--black)
}

.jmWhite{
    color: var(--white)
}

/*###### Typography #####*/
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 300 400 500 700;
    src: url('../fonts/NotoSans-VariableFont_wdth,wght.ttf');
}

html, body {
    font-family: 'Noto Sans', sans-serif;
    text-rendering: optimizeLegibility;
}

/*###### Pages ######*/

.jmPage {
    width: calc(100% - 20px);
    margin: 10px;
    padding: 10px;
    border-radius: 0.25rem;
    border: 1px solid var(--black-25);
}

/*###### Buttons ######*/
.btn {
    border: 0px;
    opacity: 0.8;
    transition: 0.2s;
}

.btn:hover {
   opacity: 1;
   transition: 0.5s;
}

.btn-primary {
    background-color: var(--jmBlue) !important;
}

.btn-secondary {
    background-color: var(--jmGreen) !important;
}