:root { --background: #fadcc7; --text-color: #7c3a0b; --placeholder-text-color: rgba(124, 58, 11, 0.3); --black: #0a0a0a; --black-bis: #121212; --black-ter: #242424; --white: #fffefe; --primary-color: #fadcc7; --primary-color-light: white; --primary-color-dark: #f19c5f; --primary-gradiend-light: #fce8d9; --primary-gradiend-dark: #f8d0b4; --primary-gradiend-lighter: #fdf3ec; --primary-gradiend-darker: #f7c5a1; --secondary-color: #c7e5fa; --secondary-color-light: white; --secondary-color-dark: #b4dcf8; --light-shadow: rgba(255, 255, 255, 0.5); --dark-shadow: rgba(241, 156, 95, 0.5); /*--fa-primary-color: hsl(25,84%,26.4%); --fa-secondary-color: hsl(25,84%,66%);*/ --fa-primary-color: #0b4d7c; --fa-secondary-color: #5fb4f1; /*--fa-primary-color: hsl(115,84%,26.4%); --fa-secondary-color: hsl(115,84%,66%);*/ --fa-primary-opacity: 0.80; --fa-secondary-opacity: 0.80; --danger-color: #fbd5d5; --warning-color: #fbf3d5; --info-color: #d5f1fb; --plus-green: #71ba40; --plus-gold: #cab021; } :root { --shadow-offset: 8px; --blur-radius: 16px; --is-inset: inherit; } .neomorph { box-shadow: calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--blur-radius) var(--light-shadow), var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-shadow); } .neomorphInset { box-shadow: inset var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-shadow), inset calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--blur-radius) var(--light-shadow); } .neomorphInset.is-nxxsmall { --shadow-offset: 2px; --blur-radius: 4px; } @media (min-width: 640px) { .neomorphInset.is-nxxsmall-sm { --shadow-offset: 2px; --blur-radius: 4px; } } @media (min-width: 768px) { .neomorphInset.is-nxxsmall-md { --shadow-offset: 2px; --blur-radius: 4px; } } @media (min-width: 1024px) { .neomorphInset.is-nxxsmall-lg { --shadow-offset: 2px; --blur-radius: 4px; } } @media (min-width: 1280px) { .neomorphInset.is-nxxsmall-xl { --shadow-offset: 2px; --blur-radius: 4px; } } .neomorphInset.is-nxsmall { --shadow-offset: 3px; --blur-radius: 6px; } @media (min-width: 640px) { .neomorphInset.is-nxsmall-sm { --shadow-offset: 3px; --blur-radius: 6px; } } @media (min-width: 768px) { .neomorphInset.is-nxsmall-md { --shadow-offset: 3px; --blur-radius: 6px; } } @media (min-width: 1024px) { .neomorphInset.is-nxsmall-lg { --shadow-offset: 3px; --blur-radius: 6px; } } @media (min-width: 1280px) { .neomorphInset.is-nxsmall-xl { --shadow-offset: 3px; --blur-radius: 6px; } } .neomorphInset.is-nsmall { --shadow-offset: 6px; --blur-radius: 12px; } @media (min-width: 640px) { .neomorphInset.is-nsmall-sm { --shadow-offset: 6px; --blur-radius: 12px; } } @media (min-width: 768px) { .neomorphInset.is-nsmall-md { --shadow-offset: 6px; --blur-radius: 12px; } } @media (min-width: 1024px) { .neomorphInset.is-nsmall-lg { --shadow-offset: 6px; --blur-radius: 12px; } } @media (min-width: 1280px) { .neomorphInset.is-nsmall-xl { --shadow-offset: 6px; --blur-radius: 12px; } } .neomorph.is-nxxsmall { --shadow-offset: 2px; --blur-radius: 4px; } @media (min-width: 640px) { .neomorph.is-nxxsmall-sm { --shadow-offset: 2px; --blur-radius: 4px; } } @media (min-width: 768px) { .neomorph.is-nxxsmall-md { --shadow-offset: 2px; --blur-radius: 4px; } } @media (min-width: 1024px) { .neomorph.is-nxxsmall-lg { --shadow-offset: 2px; --blur-radius: 4px; } } @media (min-width: 1280px) { .neomorph.is-nxxsmall-xl { --shadow-offset: 2px; --blur-radius: 4px; } } .neomorph.is-nxsmall { --shadow-offset: 3px; --blur-radius: 6px; } @media (min-width: 640px) { .neomorph.is-nxsmall-sm { --shadow-offset: 3px; --blur-radius: 6px; } } @media (min-width: 768px) { .neomorph.is-nxsmall-md { --shadow-offset: 3px; --blur-radius: 6px; } } @media (min-width: 1024px) { .neomorph.is-nxsmall-lg { --shadow-offset: 3px; --blur-radius: 6px; } } @media (min-width: 1280px) { .neomorph.is-nxsmall-xl { --shadow-offset: 3px; --blur-radius: 6px; } } .neomorph.is-nsmall { --shadow-offset: 6px; --blur-radius: 12px; } @media (min-width: 640px) { .neomorph.is-nsmall-sm { --shadow-offset: 6px; --blur-radius: 12px; } } @media (min-width: 768px) { .neomorph.is-nsmall-md { --shadow-offset: 6px; --blur-radius: 12px; } } @media (min-width: 1024px) { .neomorph.is-nsmall-lg { --shadow-offset: 6px; --blur-radius: 12px; } } @media (min-width: 1280px) { .neomorph.is-nsmall-xl { --shadow-offset: 6px; --blur-radius: 12px; } } .neomorph.is-nnormal { --shadow-offset: 8px; --blur-radius: 16px; } @media (min-width: 640px) { .neomorph.is-nnormal-sm { --shadow-offset: 8px; --blur-radius: 16px; } } @media (min-width: 768px) { .neomorph.is-nnormal-md { --shadow-offset: 8px; --blur-radius: 16px; } } @media (min-width: 1024px) { .neomorph.is-nnormal-lg { --shadow-offset: 8px; --blur-radius: 16px; } } @media (min-width: 1280px) { .neomorph.is-nnormal-xl { --shadow-offset: 8px; --blur-radius: 16px; } } button.neoBtn, .neoBtn { background-image: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)); box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow); border: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } button.neoBtn:focus, .neoBtn:focus { background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)); box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow); border: none; } button.neoBtnSmall, .neoBtnSmall { background-image: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)); box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow); border: none; } button.neoBtnSmall:focus, .neoBtnSmall:focus { background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)); box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow); border: none; } button.neoBtnSmall:focus:not(:active), .neoBtnSmall:focus:not(:active) { background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)); box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow); } button.neoBtnSmall:focus input[type=file], .neoBtnSmall:focus input[type=file] { background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)); } button.neoBtnSmallPlain, .neoBtnSmallPlain { box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow); border: none; } button.neoBtnSmallPlain:focus, .neoBtnSmallPlain:focus { box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow); border: none; } button.neoBtnSmallInsetPlain, .neoBtnSmallInsetPlain { background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)); box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); border: none; } button.neoBtnSmallInsetPlain:focus, .neoBtnSmallInsetPlain:focus { background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)); box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); border: none; } button.neoBtnSmallXInsetPlain, .neoBtnSmallXInsetPlain { background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)); box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); border: none; } button.neoBtnSmallXInsetPlain:focus, .neoBtnSmallXInsetPlain:focus { background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)); box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); border: none; } button.neoBtnInsetPlain, .neoBtnInsetPlain { background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)); box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); border: none; } button.neoBtnInsetPlain:focus, .neoBtnInsetPlain:focus { background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)); box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); border: none; } button.neoBtnInsetPlain:focus:not(:active), .neoBtnInsetPlain:focus:not(:active) { background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)); box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); } button.neoFile, .neoFile { box-shadow: 0px 0px 0px var(--light-shadow), 0px 0px 0px var(--dark-shadow); transition: all .2s linear; -webkit-backface-visibility: hidden; backface-visibility: hidden; } button.neoFile:hover, .neoFile:hover { box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow); } button.neoFile:focus-visible, .neoFile:focus-visible { background: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)); box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); outline: none; } button.neoFile.isSelected, .neoFile.isSelected { background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)); box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); } button.neoFile.isSelected:focus-visible, .neoFile.isSelected:focus-visible { background: linear-gradient(-45deg, var(--primary-gradiend-lighter), var(--primary-gradiend-darker)); outline: none; } button.neoFile.is-active, button.neoFile.active, .neoFile.is-active, .neoFile.active { box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); color: var(--black); } button.neoInput, .neoInput { box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)); border: none; } button.neoInput:focus, .neoInput:focus { background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)); border: none; } button.neoSelect > select, .neoSelect > select { box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)); border: none; } button.neoSelect > select:focus, .neoSelect > select:focus { background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)); border: none; } .neoCheckbox { opacity: 0; width: 0; } .neoCheckbox:focus + label:before { background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)) !important; } .neoCheckboxContainer { position: relative; } .neoCheckbox + label { padding: .15rem .15rem .15rem 2rem; cursor: pointer; font-size: 1rem; line-height: 1.5; } .neoCheckbox + label:before { animation-name: none; width: 1.5rem; height: 1.5rem; border-radius: 100px; position: absolute; left: 0; top: 0rem; content: ''; border: none; box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)) !important; } .neoCheckbox:checked.is-checked-bold + label { font-weight: bold; } .neoCheckbox:checked + label:after { display: inline-block; width: .375rem; height: .6rem; top: .35rem; left: .55rem; transform: translateY(0rem) rotate(45deg); border-width: .1rem; border-top-width: 0.1rem; border-left-width: 0.1rem; border-style: solid; border-top-style: solid; border-left-style: solid; border-color: var(--text-color); border-top: 0; border-left: 0; position: absolute; content: ''; } hr.neoSeparatorFlat { height: 10px; border: none; border-radius: 20px; box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow); background: var(--background); } hr.neoSeparatorPressed { height: 10px; border: none; border-radius: 20px; box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)); } input.neoRange[type=range] { height: 30px; -webkit-appearance: none; width: 100%; background: transparent; } input.neoRange[type=range]:focus { outline: none; } input.neoRange[type=range]::-webkit-slider-runnable-track { width: 100%; height: 20px; cursor: pointer; animate: 0.2s; border-radius: 20px; box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); background: linear-gradient(90deg, #fa9e9e, #faad9e, #fabd9e, #facc9e, #fadb9e, #faeb9e, #fafa9e, #ebfa9e, #dbfa9e, #ccfa9e, #bdfa9e, #adfa9e, #9efa9e, #9efaad, #9efabd, #9efacc, #9efadb, #9efaeb, #9efafa, #9eebfa, #9edbfa, #9eccfa, #9ebdfa, #9eadfa, #9e9efa, #ad9efa, #bd9efa, #cc9efa, #db9efa, #eb9efa, #fa9efa, #fa9eeb, #fa9edb, #fa9ecc, #fa9ebd, #fa9ead, #fa9ea0) !important; } input.neoRange[type=range]::-webkit-slider-thumb { border: none; height: 26px; width: 26px; border-radius: 20px; box-shadow: 2px 2px 4px var(--dark-shadow), -2px -2px 4px var(--light-shadow); background: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)) !important; cursor: pointer; -webkit-appearance: none; margin-top: -3px; } input.neoRange[type=range]:focus::-webkit-slider-runnable-track { background: linear-gradient(90deg, #fa9e9e, #faad9e, #fabd9e, #facc9e, #fadb9e, #faeb9e, #fafa9e, #ebfa9e, #dbfa9e, #ccfa9e, #bdfa9e, #adfa9e, #9efa9e, #9efaad, #9efabd, #9efacc, #9efadb, #9efaeb, #9efafa, #9eebfa, #9edbfa, #9eccfa, #9ebdfa, #9eadfa, #9e9efa, #ad9efa, #bd9efa, #cc9efa, #db9efa, #eb9efa, #fa9efa, #fa9eeb, #fa9edb, #fa9ecc, #fa9ebd, #fa9ead, #fa9ea0) !important; } input.neoRange[type=range]::-moz-range-track { width: 100%; height: 20px; cursor: pointer; border-radius: 20px; box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); background: linear-gradient(90deg, #fa9e9e, #faad9e, #fabd9e, #facc9e, #fadb9e, #faeb9e, #fafa9e, #ebfa9e, #dbfa9e, #ccfa9e, #bdfa9e, #adfa9e, #9efa9e, #9efaad, #9efabd, #9efacc, #9efadb, #9efaeb, #9efafa, #9eebfa, #9edbfa, #9eccfa, #9ebdfa, #9eadfa, #9e9efa, #ad9efa, #bd9efa, #cc9efa, #db9efa, #eb9efa, #fa9efa, #fa9eeb, #fa9edb, #fa9ecc, #fa9ebd, #fa9ead, #fa9ea0) !important; border: none; } input.neoRange[type=range]::-moz-range-thumb { border: none; height: 26px; width: 26px; border-radius: 20px; box-shadow: 2px 2px 4px var(--dark-shadow), -2px -2px 4px var(--light-shadow); background: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)) !important; cursor: pointer; } body { color: var(--text-color); background-color: var(--background); } .background { background-color: var(--background); } details > summary::-webkit-details-marker { color: var(--text-color); } :focus-visible { outline: none; } *, ::after, ::before { scrollbar-color: inherit; scrollbar-width: inherit; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-button { width: 8px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; border: thin solid transparent; box-shadow: none; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: var(--primary-color-dark); border: thin solid transparent; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-color-dark); } ::-moz-selection { /* Code for Firefox */ color: var(--primary-color); background: var(--primary-color-dark); } ::selection { color: var(--primary-color); background: var(--primary-color-dark); } .flex.flex-col-reverse > div:first-child { margin-top: 1rem; } .loadAnimation span { animation-name: blink; animation-duration: 1.4s; animation-iteration-count: infinite; animation-fill-mode: both; } .loadAnimation span:nth-child(1) { animation-delay: .4s; } .loadAnimation span:nth-child(2) { animation-delay: .3s; } .loadAnimation span:nth-child(3) { animation-delay: .2s; } .loadAnimation span:nth-child(4) { animation-delay: .2s; } .loadAnimation span:nth-child(5) { animation-delay: .3s; } .loadAnimation span:nth-child(6) { animation-delay: .4s; }