@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


body {
    font-family: "Roboto", sans-serif;
    min-height: 100dvh;
    background: var(--back);
    background-position: top;
    background-repeat: no-repeat !important;
    background-size: cover;
}

html {
    overflow-x: hidden;
}

* {
    --secondary: #cc0000;
    --white: #e4e4e4;
    --gray: #747474;
    --kartaBack: #131313;

    color: var(--white);
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: 4px;
    scrollbar-color: var(--secondary);
    scrollbar-track-color: transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--secondary);
    border-radius: 4px;
    border: none;
}

/* =========================== */

.karta {
    background: var(--kartaBack);
    color: var(--white);
    padding: 14px 20px;
    border-radius: 26px;
    position: relative;
}

.as-button {
    cursor: pointer;
}

.text-sm {
    font-size: 13px;
}

.text-md {
    font-size: 17px;
}

.text-lg {
    font-size: 19px;
}

.text-xl {
    font-size: 25px;
}

.text-xml {
    font-size: 32px;
}

.text-xxl {
    font-size: 45px;
}


.topic-title {
    font-size: 31px;
    text-align: center;
    color: var(--white);
}

.card-title {
    font-size: 24px;
    text-align: center;
    color: var(--white);
}

.card-desc {
    font-size: 17px;
    text-align: left;
    color: var(--gray);
}

.card-desc-larger {
    font-size: 21px;
    text-align: left;
    color: var(--gray);
}

.card-foot {
    font-size: 17px;
    color: var(--secondary);
    text-align: left;
    opacity: 0.8;
}

.underlined:after,
.underlined-80:after,
.underlined-40:after,
.underlined-120:after {
    content: "" !important;
    display: block !important;
    height: 4px !important;
    width: 60% !important;
    margin: 10px auto auto !important;
    border-radius: 50px !important;
    opacity: 1 !important;
    background: var(--secondary) !important;
    box-sizing: border-box !important;
    transform: translateY(-10px);
}

.underlined-40:after {
    width: 40px !important;
}

.underlined-80:after {
    width: 80px !important;
}

.underlined-120:after {
    width: 120px !important;
}

.underlined {
    padding-bottom: 0;
}


.nodecor {
    text-decoration: none !important;
}

.nobold {
    font-weight: normal !important;
}

.embed-karta {
    --width: 5px;

    border-bottom-style: solid;
    border-bottom-width: var(--width) !important;
    border-bottom-color: var(--color) !important;
}

.embed-karta-full {
    --width: 5px;

    border-style: solid;
    border-width: var(--width) !important;
    border-color: var(--color) !important;
}

.embed-karta-hover {
    transition: border 0.2s ease;

    border-style: solid;
    border-width: 0px;
    border-color: var(--color);
}

.embed-karta-hover:hover {
    --width-hover: var(--width);

    border-style: solid;
    border-width: var(--width-hover) !important;
    border-color: var(--color);
}

.embed-karta-top {
    --width: 5px;

    border-top-style: solid;
    border-top-width: var(--width);
    border-top-color: var(--color) !important;
}

.embed-karta-left {
    --width: 5px;

    border-left-style: solid;
    border-left-width: var(--width);
    border-left-color: var(--color) !important;
}

.embed-karta-right {
    --width: 5px;

    border-right-style: solid;
    border-right-width: var(--width);
    border-right-color: var(--color) !important;
}

.force-parent-lh {
    line-height: inherit !important;
}

.sticky-top-2 {
    position: sticky !important;
    top: 0;
    z-index: 99;
}

.sticky-top-offset {
    position: sticky !important;
    top: 100px !important;
}

.absolute-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.absolute-bottom-right-5 {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.absolute-bottom-right-10 {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.absolute-bottom-left-10 {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.absolute-top-right-10 {
    position: absolute;
    top: 10px;
    right: 10px;
}

.absolute-top-left-10 {
    position: absolute;
    top: 10px;
    left: 10px;
}

.absolute-top-right-5 {
    position: absolute;
    top: 5px;
    right: 5px;
}

.absolute-top-left-5 {
    position: absolute;
    top: 5px;
    left: 5px;
}

.absolute-top-right--5 {
    position: absolute;
    top: -5px;
    right: -5px;
}

.fixed-bottom-right {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fixed-bottom-right-10 {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.fixed-bottom-left-10 {
    position: fixed;
    bottom: 10px;
    left: 10px;
}

.fixed-top-right-10 {
    position: fixed;
    top: 10px;
    right: 10px;
}

.fixed-top-left-10 {
    position: fixed;
    top: 10px;
    left: 10px;
}

.absolute-top-left {
    position: absolute;
    --offset-x: var(--offset);
    --offset-y: var(--offset);
    top: var(--offset-y);
    left: var(--offset-x);
}


.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}


.hover-zoom {
    transition: transform var(--anim-time) ease-in-out;
}

.hover-zoom:hover {
    transform: scale(var(--hover-scale));
}

/*
ALERTS
*/

.swal2-popup {
    background: var(--kartaBack) !important;
    color: var(--fifth) !important;
}