:root {
    --basic-green: #0E870C;
    --red: #B50203;
    --blue: #0362DD;
    --hover-blue: #054496;
}

.flex-1 {
    flex: 1;
}

.no-focus-outline:focus {
    outline: none;
}

.ratio-16-9 {
    aspect-ratio: 16/9;
}

.filter-grayscale-opacity {
    filter: grayscale(1) opacity(0.5);
}

.color-gray {
    color: #575757;
}

.border-green-on-focus:focus {
    border-color: green !important;
}

.color-1A4278 {
    color: #1A4278;
}

.user-select-none {
    user-select: none
}

.writing-mode-vertical {
    writing-mode: vertical-lr;
}

.button-reset-styles {
    border: none;
    background-color: transparent;
}

.button-reset-styles:focus {
    outline: none;
}

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

.bg-green {
    background-color: var(--basic-green);
}

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

.border-radius-8 {
    border-radius: 8px;
}

.full-border-radius {
    border-radius: 999999px;
}

.border-2px-solid {
    border-width: 2px;
    border-style: solid;
}

.user-select-none {
    user-select: none;
}

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.justify-evenly {
    justify-content: space-evenly;
}

.font-size-18 {
    font-size: 18px;
}

.vertical-text {
    writing-mode: vertical-rl;
    rotate: 180deg;
}

.first-letter-capitalize::first-letter {
    text-transform: uppercase;
}

.pointer-unselect {
    user-select: none;
    cursor: pointer;
}

.flex-basis-100 {
    flex-basis: 100%;
}

.color-393939 {
    color: #393939;
}

.scroll-margin-top-80 {
    scroll-margin-top: 80px;
}

.text-decoration-underline {
    text-decoration: underline;
}

.opacity-0-6 {
    opacity: 0.6;
}

.padding-for-footer {
    padding-bottom: 270px;
}

.bgc-green-hover:hover {
    background-color: #016711 !important;
}

.color-green-hover:hover {
    color: #016711 !important;
}

.bgc-blue-hover:hover {
    background-color: #1A4278 !important;
}

.color-blue-hover:hover {
    color: #1A4278 !important;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-1_25em {
    font-size: 1.25em;
}

.font-size-1_5em {
    font-size: 1.5em;
}

.font-size-1_75em {
    font-size: 1.75em;
}

.font-size-2em {
    font-size: 2em;
}

.font-size-1_5em {
    font-size: 1.5em;
}

.tutorial-video {
    width: min(100%,700px);
    aspect-ratio: 16/9;
}