@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; @import './colors.css'; main { @apply max-w-screen-xl mx-auto flex flex-col; } header, section { @apply px-5 md:px-10; } a { @apply hover:text-primary dark:hover:text-gray-200 transition-colors; } div:focus { @apply outline-none; } @layer utilities { .scrollbar::-webkit-scrollbar { @apply w-2 h-2; } .scrollbar::-webkit-scrollbar-track { /* border-radius: 5px; */ /* background: #fff; */ @apply bg-white dark:bg-black; } .scrollbar::-webkit-scrollbar-thumb { /* background: #000; */ /* border-radius: 100vh; */ /* border: 3px solid #fff; */ @apply bg-gray-200 dark:bg-gray-600 border border-white rounded-sm; } .scrollbar::-webkit-scrollbar-thumb:hover { /* background: #000; */ @apply bg-gray-500; } .h-fill-available { /* fixes the h-[100vh] issue on mobile */ /* like height: -webkit-fill-available; but for any device (android and iphone) */ @apply h-[100vh] supports-[height:100cqh]:h-[100cqh] supports-[height:100svh]:h-[100svh]; } } :root { /* Backgrounds */ --background-0: var(--white-0); --background-1: var(--white-1); --background-2: var(--grey-6); --background-3: var(--grey-4); --background-4: var(--grey-0); --background-5: var(--black-0); --background-primary-0: var(--primary-2); --background-primary-1: var(--primary-1); --background-blur: rgba(0, 0, 0, 0.9); --background-success: var(--success-lightest); --background-error: var(--dangerous-lightest); /* Borders */ --border-0: var(--grey-5); --border-1: var(--grey-4); --border-2: var(--grey-2); /* Icons */ --icon-0: var(--white-0); --icon-1: var(--grey-2); --icon-2: var(--grey-0); --icon-3: var(--black-0); /* Text */ --text-0: var(--white-0); --text-1: var(--grey-2); --text-2: var(--grey-0); --text-3: var(--black-0); --text-4: var(--grey-1); /* Box Shadow */ --box-shadow: rgba(0, 0, 0, 0.25); } body.dark_mode { /* Backgrounds */ --background-0: var(--black-1); --background-1: var(--black-0); --background-2: var(--black-2); --background-3: var(--black-3); --background-4: var(--black-4); --background-5: var(--black-5); --background-primary-0: var(--black-5); --background-primary-1: var(--black-5); --background-opposite: var(--white-0); --background-blur: rgba(0, 0, 0, 0.9); --background-success: var(--black-5); --background-error: var(--black-5); /* Borders */ --border-0: var(--black-5); --border-1: var(--black-6); --border-2: var(--black-7); /* Icons */ --icon-0: var(--black-0); --icon-1: var(--grey-0); --icon-2: var(--grey-2); --icon-3: var(--white-0); /* Text */ --text-0: var(--black-0); --text-1: var(--grey-0); --text-2: var(--grey-2); --text-3: var(--white-2); --text-4: var(--grey-1); /* Box Shadow */ --box-shadow: rgba(255, 255, 255, 0.25); } .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: var(--code-very-dark-grey); font-style: italic; } .token.punctuation { color: var(--code-dark-grey); } .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: var(--code-red); } .token.boolean, .token.number { color: var(--code-purple); } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--code-green); } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { color: var(--code-grey); } .token.atrule, .token.attr-value, .token.function, .token.class-name { color: var(--code-yellow); } .token.keyword { color: var(--code-blue); } .token.regex, .token.important { color: var(--code-orange); } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; }