@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --c-green: #B3FF99;
    --c-red: #FF9999;
    --c-yellow: #FFFC99;
    --c-blue: #99E0FF;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Open Sans';
}

body {
    width: 100svw;
    overflow-x: hidden;
}
code {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 0 2px;
}
a {
    color: black;
    text-decoration: none;
}
a.a-visible {
    /* color: white; */
    text-decoration: underline;
}
a.a-visible:hover {
    color: #333333;
}
li {
    list-style-position: inside;
}
ul li {
    list-style-type: none;
}
img {
    max-height: 100%;
    max-width: 100%;
}

.bg-color-none {
    background: none !important;
}
.bg-color-green {
    background-color: var(--c-green) !important;
}
.bg-color-red {
    background-color: var(--c-red) !important;
}
.bg-color-yellow {
    background-color: var(--c-yellow) !important;
}
.bg-color-blue {
    background-color: var(--c-blue) !important;
}
.bg-color-gradient {
    background-image: linear-gradient(to right, var(--c-green) 0%, var(--c-green) 25%, var(--c-red) 25%, var(--c-red) 50%, var(--c-yellow) 50%, var(--c-yellow) 75%, var(--c-blue) 75%) !important;
}
.bg-color-white {
    background-color: white;
}
.color-green {
    color: var(--c-green) !important;
}
.color-red {
    color: var(--c-red) !important;
}
.color-yellow {
    color: var(--c-yellow) !important;
}
.color-blue {
    color: var(--c-blue) !important;
}
.color-white {
    color: white !important;
}
.color-black {
    color: black !important;
}


.box-shadow {
    box-shadow: 0 0 15px 6px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.h-seperator-5 {
    margin: 5px 0px;
}
.h-seperator-10 {
    margin: 10px 0px;
}
.h-seperator-30 {
    margin: 30px 0px;
}
.h-seperator-50 {
    margin: 50px 0px;
}
.h-seperator-100 {
    margin: 100px 0px;
}
.h-seperator-120 {
    margin: 120px 0px;
}

.btn-3d {
    border-radius: 10px;
    box-shadow: 0px 10px 0px 0px #c5c5c5;
    border: 4px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: white;
    /* border: 4px solid black; */
}
.btn-3d:hover,
.btn-3d.active,
.btn-3d.disabled {
    transform: translate(0px, 5px);
    box-shadow: 0px 5px 0px 0px #c5c5c5;
    /* background-color: rgb(214, 214, 214); */
    cursor: pointer;
}
.btn-3d.active {
    border: 4px solid black;
}
.btn-3d.disabled {
    color: gray;
    background-color: lightgray;
    border-color: lightgray;
    pointer-events: none;
}

.menu-icon-btn-small {
    /* width: 50px; */
    padding: 0 10px;
    font-size: 1.5rem;
    height: 70px;
    margin: 0 10px;
}
.menu-icon-btn-big {
    width: 100px;
    height: 100px;
    margin: 0 10px;
}
.btn-color-green svg {
    fill: var(--c-green);
}
.btn-color-red svg {
    fill: var(--c-red);
}
.btn-color-yellow svg {
    fill: var(--c-yellow);
}
.btn-color-blue svg {
    fill: var(--c-blue);
}

/* #region progressbar */
.progress-bar-0 {width: 0% !important;}
.progress-bar-1 {width: 1% !important;}
.progress-bar-2 {width: 2% !important;}
.progress-bar-3 {width: 3% !important;}
.progress-bar-4 {width: 4% !important;}
.progress-bar-5 {width: 5% !important;}
.progress-bar-6 {width: 6% !important;}
.progress-bar-7 {width: 7% !important;}
.progress-bar-8 {width: 8% !important;}
.progress-bar-9 {width: 9% !important;}
.progress-bar-10 {width: 10% !important;}
.progress-bar-11 {width: 11% !important;}
.progress-bar-12 {width: 12% !important;}
.progress-bar-13 {width: 13% !important;}
.progress-bar-14 {width: 14% !important;}
.progress-bar-15 {width: 15% !important;}
.progress-bar-16 {width: 16% !important;}
.progress-bar-17 {width: 17% !important;}
.progress-bar-18 {width: 18% !important;}
.progress-bar-19 {width: 19% !important;}
.progress-bar-20 {width: 20% !important;}
.progress-bar-21 {width: 21% !important;}
.progress-bar-22 {width: 22% !important;}
.progress-bar-23 {width: 23% !important;}
.progress-bar-24 {width: 24% !important;}
.progress-bar-25 {width: 25% !important;}
.progress-bar-26 {width: 26% !important;}
.progress-bar-27 {width: 27% !important;}
.progress-bar-28 {width: 28% !important;}
.progress-bar-29 {width: 29% !important;}
.progress-bar-30 {width: 30% !important;}
.progress-bar-31 {width: 31% !important;}
.progress-bar-32 {width: 32% !important;}
.progress-bar-33 {width: 33% !important;}
.progress-bar-34 {width: 34% !important;}
.progress-bar-35 {width: 35% !important;}
.progress-bar-36 {width: 36% !important;}
.progress-bar-37 {width: 37% !important;}
.progress-bar-38 {width: 38% !important;}
.progress-bar-39 {width: 39% !important;}
.progress-bar-40 {width: 40% !important;}
.progress-bar-41 {width: 41% !important;}
.progress-bar-42 {width: 42% !important;}
.progress-bar-43 {width: 43% !important;}
.progress-bar-44 {width: 44% !important;}
.progress-bar-45 {width: 45% !important;}
.progress-bar-46 {width: 46% !important;}
.progress-bar-47 {width: 47% !important;}
.progress-bar-48 {width: 48% !important;}
.progress-bar-49 {width: 49% !important;}
.progress-bar-50 {width: 50% !important;}
.progress-bar-51 {width: 51% !important;}
.progress-bar-52 {width: 52% !important;}
.progress-bar-53 {width: 53% !important;}
.progress-bar-54 {width: 54% !important;}
.progress-bar-55 {width: 55% !important;}
.progress-bar-56 {width: 56% !important;}
.progress-bar-57 {width: 57% !important;}
.progress-bar-58 {width: 58% !important;}
.progress-bar-59 {width: 59% !important;}
.progress-bar-60 {width: 60% !important;}
.progress-bar-61 {width: 61% !important;}
.progress-bar-62 {width: 62% !important;}
.progress-bar-63 {width: 63% !important;}
.progress-bar-64 {width: 64% !important;}
.progress-bar-65 {width: 65% !important;}
.progress-bar-66 {width: 66% !important;}
.progress-bar-67 {width: 67% !important;}
.progress-bar-68 {width: 68% !important;}
.progress-bar-69 {width: 69% !important;}
.progress-bar-70 {width: 70% !important;}
.progress-bar-71 {width: 71% !important;}
.progress-bar-72 {width: 72% !important;}
.progress-bar-73 {width: 73% !important;}
.progress-bar-74 {width: 74% !important;}
.progress-bar-75 {width: 75% !important;}
.progress-bar-76 {width: 76% !important;}
.progress-bar-77 {width: 77% !important;}
.progress-bar-78 {width: 78% !important;}
.progress-bar-79 {width: 79% !important;}
.progress-bar-80 {width: 80% !important;}
.progress-bar-81 {width: 81% !important;}
.progress-bar-82 {width: 82% !important;}
.progress-bar-83 {width: 83% !important;}
.progress-bar-84 {width: 84% !important;}
.progress-bar-85 {width: 85% !important;}
.progress-bar-86 {width: 86% !important;}
.progress-bar-87 {width: 87% !important;}
.progress-bar-88 {width: 88% !important;}
.progress-bar-89 {width: 89% !important;}
.progress-bar-90 {width: 90% !important;}
.progress-bar-91 {width: 91% !important;}
.progress-bar-92 {width: 92% !important;}
.progress-bar-93 {width: 93% !important;}
.progress-bar-94 {width: 94% !important;}
.progress-bar-95 {width: 95% !important;}
.progress-bar-96 {width: 96% !important;}
.progress-bar-97 {width: 97% !important;}
.progress-bar-98 {width: 98% !important;}
.progress-bar-99 {width: 99% !important;}
.progress-bar-100 {width: 100% !important;}
/* #endregion */