:root {
    --ui-fg-color: var(--ui-dark-gray-300);
    --ui-bg-color: var(--ui-grapefruit-300);
    --ui-panel-color: var(--ui-dark-gray-200);
    --ui-text-shadow: var(--ui-dark-gray-100);
    --ui-control-item: #F9E7DA;
    --ui-highlight-color: var(--ui-sunflower-300);
    --ui-decline-color: var(--ui-grapefruit-300);
    --ui-accept-color: var(--ui-grass-300);

    --ui-sunflower-300: #F5BA45;
    --ui-sunflower-200: #FECD57;
    --ui-sunflower-100: #FCD277;
    --ui-grass-300: #8AC054;
    --ui-grass-200: #9ED36A;
    --ui-grass-100: #B4E080;
    --ui-grapefruit-300: #D94452;
    --ui-grapefruit-200: #EC5564;
    --ui-grapefruit-100: #F76D82;
    --ui-bittersweet-300: #E8563F;
    --ui-bittersweet-200: #FB6D51;
    --ui-bittersweet-100: #FC8370;
    --ui-mint-300: #35BB9B;
    --ui-mint-200: #46CEAD;
    --ui-mint-100: #62DDBD;
    --ui-acqua-300: #60B9D9;
    --ui-acqua-200: #4FC0E8;
    --ui-acqua-100: #8AD9F0;
    --ui-blue-jeans-300: #4B89DA;
    --ui-blue-jeans-200: #5E9CEA;
    --ui-blue-jeans-100: #73B1F4;
    --ui-lavender-300: #D670AC;
    --ui-lavender-200: #EB87BF;
    --ui-lavender-100: #F299CE;
    --ui-skin-tone-300: #E4B693;
    --ui-skin-tone-200: #F0C8A5;
    --ui-skin-tone-100: #F4D0B5;
    --ui-light-gray-300: #CBD0D8;
    --ui-light-gray-200: #E5E8EC;
    --ui-light-gray-100: #F4F6F9;
    --ui-dark-gray-300: #424953;
    --ui-dark-gray-200: #646C77;
    --ui-dark-gray-100: #A9B1BC;
}
::-webkit-scrollbar {
    display: none;
}
* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body {
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
    background: var(--ui-bg-color);
}
main {
    height: 100dvh;
    width: 100vw;
}
.hidden {
    visibility: hidden !important;
}
.d-none {
    display: none !important;
}
.mt-0 {
    margin-top: 0 !important;
}
.mt-1 {
    margin-top: 1rem !important;
}
.mb-1 {
    margin-bottom: 1rem !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.w-50 {
    width: 50%;
    max-width: 500px;
}
.w-65 {
    width: 65%;
    max-width: 650px;
}
.no-caps {
    font-variant: none !important;
}
.no-shadow {
    text-shadow: none !important;
}
a.inline {
    color: black;
    border-bottom: 1px dashed var(--ui-panel-color);
    text-decoration: none;
    align-self: center;
}
a.inline:hover {
    transition: 0.5s all;
    color: var(--ui-bg-color);
    border-bottom-color: var(--ui-bg-color);
}
.container-fade::after {
    content: "\00a0";
    position: sticky;
    bottom: 0;
    width: 100%;
    background: linear-gradient(0deg, var(--ui-control-item) 10%, transparent);
    display: block;
}
.copyright {
    font-size: 0.9rem;
    color: var(--ui-panel-color);
    text-align: center;
}
.text-shadow, .text-shadow-after::after {
    color: var(--ui-fg-color);
    text-shadow: -1px 1px 0px var(--ui-text-shadow);
}
.grapefruit, .grapefruit-after::after {
    background: var(--ui-grapefruit-300);
    color: var(--ui-grapefruit-300);
}
.bittersweet, .bittersweet-after::after {
    background: var(--ui-bittersweet-300);
    color: var(--ui-bittersweet-100);
}
.sunflower, .sunflower-after::after {
    background: var(--ui-sunflower-300);
    color: var(--ui-sunflower-100);
}
.grass, .grass-after::after {
    background: var(--ui-grass-300);
    color: var(--ui-grass-100);
}
.mint, .mint-after::after {
    background: var(--ui-mint-300);
    color: var(--ui-mint-100);
}
.acqua, .acqua-after::after {
    background: var(--ui-acqua-300);
    color: var(--ui-acqua-100);
}
.blue-jeans, .blue-jeans-after::after {
    background: var(--ui-blue-jeans-300);
    color: var(--ui-blue-jeans-100);
}
.lavender, .lavender-after::after {
    background: var(--ui-lavender-300);
    color: var(--ui-lavender-100);
}
.light-gray, .light-gray-after::after {
    background: var(--ui-light-gray-300);
    color: var(--ui-light-gray-100);
}
.dark-gray, .dark-gray-after::after {
    background: var(--ui-dark-gray-300);
    color: var(--ui-dark-gray-100);
}