/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Open+Sans&display=swap'); */

@font-face {font-family: 'Lato';src: url('../assets/fonts/Lato-Regular.ttf');}
@font-face {font-family: 'Open Sans';src: url('../assets/fonts/OpenSans-Regular.ttf');}

:root {
    --body-color:#fff;
    --body-text:#333;

    --primary-color:#002f6c;
    --primary-text:#fff;

    --secondary-color:#fff;
    --secondary-text:#333;


    --highlight-color:#B87800;
    --highlight-text:#fff;

    --card-color:#fff;
    --card-text:#333;

    --button-color:#002f6c;
    --button-text:#fff;

    --button-highlight-color:#B87800;
    --button-highlight-text:#fff;

    --button-inverted-color:#fff;
    --button-inverted-text:#002f6c;
    --button-inverted-border:#002f6c;
}

.card {
    background-color: var(--card-color);color:var(--card-text);border-radius:10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* Button */
.btn {
    display:inline-block;padding:5px 15px;cursor:pointer;background-color:var(--button-color);color:var(--button-text);border:none;border-radius:10px;margin:2px;border-width:1px;border-style:solid;border-color:var(--button-text);font-weight:bold;user-select: none;
}
.btn-highlight {
    background-color:var(--button-highlight-color);color:var(--button-highlight-text);border-color:var(--button-highlight-color);
}
.btn-inverted {background-color:var(--button-inverted-color);color:var(--button-inverted-text);border-color:var(--button-inverted-text);}
.btn-outline {background-color:transparent;border:1px #fff solid;}
.btn:hover {transform: scale(.98);}
.btn-small {height:25px;padding:0 14px;line-height:25px;}
.btn-large {padding:10px 30px;}
.btn-submit {font-size:16px;padding:10px 40px;}
/* Splitter */
.splitter {margin:10px auto;background-color:var(--highlight-color);border-radius:2px;height:2px;}
.splitter-small {width:50px}

/* Display */
.block {display:block;} .inline {display:inline-block;}
.flex {
    display:flex;
    justify-content: center;
    align-items:center;
    height:100%;
}
.grid {
    display:grid;
    grid-template-columns: repeat(2, 1fr) ;
    gap:20px;height:100%;
    justify-content: center;align-items: center;
}
.grid-3 {grid-template-columns: repeat(3,1fr);}

/* Text Alignment */
.text-center, .tcenter {text-align:center;}
.text-left, .tleft {text-align:left;}
.text-right, .tright {text-align:right;}
.text-justify, .tjustify {text-align:justify;}

/* Text Style / Decoration */
.bold {font-weight:bold;}
.italic {font-style:italic;}
.under {text-decoration:underline;}
.space {width:15px;text-align:center;display:inline-block;}
.center {width:100%;text-align:center;}
.pointer {cursor:pointer;}

/* Font Size */
.size-12 {font-size:0.75rem;}
.size-14 {font-size:0.875rem;}
.size-16 {font-size:1rem;}
.size-18 {font-size:1.125rem;}
.size-20 {font-size:1.25rem;}
.size-24 {font-size:1.5rem;}
.size-30 {font-size:1.875rem;}
.size-36 {font-size:1.875rem;}
.size-40 {font-size:2.5rem;}
.size-50 {font-size:3.125rem;}

/* Margin */
.my-1 {margin:1rem 0;}
.my-2 {margin:1.5rem 0;}
.my-3 {margin:2rem 0;}
.my-4 {margin:3rem 0;}
.my-5 {margin:4rem 0;}
.m-1 {margin:1rem;}
.m-2 {margin:1.5rem;}
.m-3 {margin:2rem;}
.m-4 {margin:3rem;}
.m-5 {margin:4rem;}

/* Padding */
.py-1 {margin:1rem 0;}
.py-2 {margin:1.5rem 0;}
.py-3 {margin:2rem 0;}
.py-4 {margin:3rem 0;}
.py-5 {margin:4rem 0;}
.p-1 {margin:1rem;}
.p-2 {margin:1.5rem;}
.p-3 {margin:2rem;}
.p-4 {margin:3rem;}
.p-5 {margin:4rem;}