:root {
    --font: "Public Sans", Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
        Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --pure-white: #ffffff;
    --primary-color: #b9c6d2;
    --secondary-color: #d0dde9;
    --tertiary-color: #edf0f8;
    --accent-color: #ff3e00;
    --heading-color: rgba(0, 0, 0, 0.7);
    --text-color: #444444;
    --background-without-opacity: rgba(255, 255, 255, 0.7);
    --column-width: 42rem;
    --column-margin-top: 4rem;
    /* // fh ui */
    --dm-black: #111111;
    --dm-darkest: #1b1b1b;
    --dm-darker: #242424;
    --dm-dark: #383838;
    --dm-mid: #3c3c3c;
    --dm-light: #575757;
    --dm-lighter: #7c7c7c;
    --dm-secondary-text: #5c5c5c;
    --dm-default-button: #505050;
    --dm-faint-lines: lightgray;
    --dm-white: #fafafa;
    --deep-green: #007965;
    --green: #4bc5b6;
    --red: #ec5b56;
    --orange: #f08c34;
    --yellow: #f8dd6c;
    --light-green: #a9d0d5;
    --purple: #7855e7;
    --deep-blue: #475de6;
    --blue: #3983dc;
    --off-white: #e6e6e6;
    --dm-faint-gray: #d3cece;
    --dm-text-light: #e6e6e6;
    /* light-mode */
    --lm-backdrop: #EBEBEB;
    --lm-lighter: #F9F9F9;
    --lm-light: #F0F0F0;
    --lm-white: #fdfdfdf6;
    --white-opaque-1: rgba(255, 255, 255, 0.3);
    /* // avatars */
    --avatar-size: 35px;
    /* rt */
    --dm-rt-background: rgba(245, 245, 245, 0.1);
    /* padding */
    --container-padding: 40px;
    /* box=shadows */
    --lm-input-shadow: rgba(140, 140, 140, 0.25) 0px 3px 5px -5px inset, rgba(140, 140, 140, 0.3) 0px 5px 3.5px -6px inset;
    --dm-input-shadow: rgba(0, 0, 0, 0.75) 1px 3px 5px -5px inset, rgba(40, 40, 40, 0.5) 0px 5px 3.5px -6px inset;
    --lm-container-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    --dm-container-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    --button-shadow-a: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    /* menu */
    --menu-button-size: 50px;
    /* / borer-radius */
    --button-border-radius: 6px;
    /* modal */
    --modal-bg: #1b1b1bdc;
    /* font */
    font-family: var(--font);
}

.fixed-full {
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
}

#svelte {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1,
h2,
p {
    font-weight: 300;
    /* color: var(--heading-color); */
}

p {
    line-height: 1.5;
    margin: 0;
}

.text-1{ font-size: 0.925em;}
.text-2{ font-size: 1.15em;}
.text-3{ font-size: 1.333em;}

a {
    /* color: var(--accent-color); */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 2rem;
    text-align: center;
}

h2 {
    font-size: 1rem;
}


input,
button {
    font-size: inherit;
    font-family: inherit;
}

.input {
    padding: 8px 12px;
    height: 48px;
    border: none;
}

.input, .text-area {
    border-radius: 5px;
}

.text-area {
    /* background: var(--lm-backdrop); */
    padding: 10px 12px 12px;
    min-height: calc(48px * 3);
}

input, textarea {
    background: transparent;
    outline: none;
    /* font-size: 0.8em; */
    font-size: 0.925em;
}

input::placeholder,
textarea::placeholder {
    font-family: var(--font);
    font-weight: 100!important;
    font-size: 0.85em!important;
    color: inherit!important
}

input:focus, textarea:focus {
    outline: none;
}

.input input {
    border: none;
    height: 100%;
    width: 100%;
}

button:focus:not(:focus-visible) {
    outline: none;
}

button {
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 0.85em;
    font-weight: 200;
    border: none;
    background: lightgray;
}

@media (min-width: 720px) {
    h1 {
        font-size: 2.4rem;
    }
}

body {
    margin: 0;
    padding: 0;
    font-weight: 100;
    font-size: 18px;
}

body main {
    min-height: 100vh;
    min-width: 100%;
}

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

a {
    color: var(--blue);
}

.fill {
    height: 100%;
    width: 100%;
}

.stretch-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bg-dark-modal {
    background: rgba(238, 238, 238, 0.875);
}

.bg-light-gray {
    background: lightgray;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.jc-start {
    justify-content: flex-start;
}
.ai-start {
    align-items: flex-start;
}
.jc-end {
    justify-content: flex-end;
}
.jc-centre {
    justify-content: centre;
}
.ai-centre {
    align-items: centre;
}
.jc-between {
    justify-content: space-between;
}
.jc-around {
    justify-content: space-around;
}
.ai-stretch {
    align-items: stretch;
}

.fd-col {
    flex-direction: column;
}

.fw-wrap {
    flex-wrap: wrap;
}

/* grid */

.auto-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px;
    /* padding: 40px; */
}

.auto-columns-gird {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: 10px;
}

.auto-grid-vertical {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20px;
}

/* inputs */

.label {
    width: 100%;
    margin-bottom: 0px;
    height: 20px;
    font-size: 1em;
    color: rgb(120, 120, 120);
    text-transform: capitalize;
}

svg {
    min-height: 20px;
    min-width: 20px;
}

/* pages */

.page-wrapper {
    padding: 40px;
}

/* containers */

.row-section .symbol[data-suit="hearts"],
.row-section .symbol[data-suit="diamonds"] {
    color: var(--red)!important;
}

/* helpers */

.capitalise {
    text-transform: capitalize;
}