* {margin: 0; padding: 0; line-height: 1.5;} a {color: inherit;text-decoration: none;} ul, ol {list-style-type: none;} *, :after, :before { box-sizing: border-box; border: 0 solid #e2e8f0; } .bg-primary {background-color: #FFE01B;} .hover\:bg-primary:hover {background-color: #FFE01B;} .hover\:border-primary:hover {border-color: #FFE01B;} .hover\:text-primary:hover {color: #FFE01B;} .bg-background-dark {background-color: #1f2020;} .hover\:bg-background-dark:hover {background-color: #1f2020;} .hover\:border-background-dark:hover {border-color: #1f2020;} .hover\:text-background-dark:hover {color: #1f2020;} .bg-text {background-color: #FFFFFF;} .hover\:bg-text:hover {background-color: #FFFFFF;} .hover\:border-text:hover {border-color: #FFFFFF;} .hover\:text-text:hover {color: #FFFFFF;} .bg-background {background-color: #3c3c3c;} .hover\:bg-background:hover {background-color: #3c3c3c;} .hover\:border-background:hover {border-color: #3c3c3c;} .hover\:text-background:hover {color: #3c3c3c;} .force-opacity { opacity:100 !important; margin:0 !important; } .logo { height:50vh; max-width:90vw; } .logo-color { fill:#f7cb20; filter: /* drop-shadow(0 0 5px #f7cb20)*/ drop-shadow(10px 10px 0 rgba(0,0,0,0.9)); } body { box-shadow: inset 0 0 20vw #000; } p { text-shadow: 3px 3px 0 black; } * {font-family: Kanit;} main {font-size: 1rem;} .space-y-5 > :not(template) ~ :not(template) {--space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--space-y-reverse))); margin-bottom: calc(1.25rem * var(--space-y-reverse));} .bg-white {--bg-opacity: 1; background-color: #fff; background-color: rgba(255, 255, 255, var(--bg-opacity));} .inline-block {display: inline-block;} .flex {display: flex;} .grid {display: grid;} .hidden {display: none;} .flex-row-reverse {flex-direction: row-reverse;} .flex-col-reverse {flex-direction: column-reverse;} .items-center {align-items: center;} .justify-center {justify-content: center;} .h-full {height: 100%;} .h-screen {height: 100vh;} .leading-none {line-height: 1;} .mx-auto {margin-left: auto; margin-right: auto;} .mb-3 {margin-bottom: 0.75rem;} .mb-5 {margin-bottom: 1.25rem;} .-mr-10 {margin-right: -2.5rem;} .-ml-10 {margin-left: -2.5rem;} .-mt-40 {margin-top: -10rem;} .opacity-0 {opacity: 0;} .p-5 {padding: 1.25rem;} .py-3 {padding-top: 0.75rem; padding-bottom: 0.75rem;} .py-5 {padding-top: 1.25rem; padding-bottom: 1.25rem;} .px-5 {padding-left: 1.25rem; padding-right: 1.25rem;} .pt-5 {padding-top: 1.25rem;} .fixed {position: fixed;} .absolute {position: absolute;} .relative {position: relative;} .top-0 {top: 0;} .right-0 {right: 0;} .bottom-0 {bottom: 0;} .left-0 {left: 0;} .shadow-lg {box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);} .text-center {text-align: center;} .text-black {--text-opacity: 1; color: #000; color: rgba(0, 0, 0, var(--text-opacity));} .text-white {--text-opacity: 1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity));} .w-full {width: 100%;} .z-10 {z-index: 10;} .gap-5 {grid-gap: 1.25rem; gap: 1.25rem;} .gap-10 {grid-gap: 2.5rem; gap: 2.5rem;} .grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));} .transition-all {transition-property: all;} .transition {transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;} .ease-in-out {transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);} .duration-300 {transition-duration: 300ms;} .duration-500 {transition-duration: 500ms;} .text-primary {color: #FFE01B;} .bg-background {background-color: #3c3c3c;} .container {width:100%;} @media (min-width: 640px) { .sm\:flex {display: flex;} .sm\:space-x-5 > :not(template) ~ :not(template) {--space-x-reverse: 0; margin-right: calc(1.25rem * var(--space-x-reverse)); margin-left: calc(1.25rem * calc(1 - var(--space-x-reverse)));} .sm\:bg-primary {background-color: #FFE01B;} .sm\:space-y-0 > :not(template) ~ :not(template) {--space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); margin-bottom: calc(0px * var(--space-y-reverse));} } @media (min-width: 768px) { .container {max-width: 640px;} .md\:flex {display: flex;} .md\:space-x-5 > :not(template) ~ :not(template) {--space-x-reverse: 0; margin-right: calc(1.25rem * var(--space-x-reverse)); margin-left: calc(1.25rem * calc(1 - var(--space-x-reverse)));} .md\:bg-primary {background-color: #FFE01B;} .md\:space-y-0 > :not(template) ~ :not(template) {--space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); margin-bottom: calc(0px * var(--space-y-reverse));} } @media (min-width: 1024px) { .container {max-width: 768px;} .lg\:flex {display: flex;} .lg\:space-x-5 > :not(template) ~ :not(template) {--space-x-reverse: 0; margin-right: calc(1.25rem * var(--space-x-reverse)); margin-left: calc(1.25rem * calc(1 - var(--space-x-reverse)));} .lg\:bg-primary {background-color: #FFE01B;} .lg\:space-y-0 > :not(template) ~ :not(template) {--space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); margin-bottom: calc(0px * var(--space-y-reverse));} } @media (min-width: 1280px) { .container {max-width: 1024px;} .xl\:flex {display: flex;} .xl\:space-x-5 > :not(template) ~ :not(template) {--space-x-reverse: 0; margin-right: calc(1.25rem * var(--space-x-reverse)); margin-left: calc(1.25rem * calc(1 - var(--space-x-reverse)));} .xl\:bg-primary {background-color: #FFE01B;} .xl\:space-y-0 > :not(template) ~ :not(template) {--space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); margin-bottom: calc(0px * var(--space-y-reverse));} } @media (min-width: 1536px) { .container {max-width: 1280px;} .2xl\:flex {display: flex;} .2xl\:space-x-5 > :not(template) ~ :not(template) {--space-x-reverse: 0; margin-right: calc(1.25rem * var(--space-x-reverse)); margin-left: calc(1.25rem * calc(1 - var(--space-x-reverse)));} .2xl\:bg-primary {background-color: #FFE01B;} .2xl\:space-y-0 > :not(template) ~ :not(template) {--space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); margin-bottom: calc(0px * var(--space-y-reverse));} }