@import url('https://fonts.googleapis[class~="com"]/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis[class~="com"]/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&display=swap'); *{ box-sizing: border-box; margin: 0; padding: 0; } :root{ --background-color: #000000; --primary-color:#4b4f58; --text-color:#ffffff; --black-color: #3a3a3a; } a{ text-decoration: none; color: white; } body{ font-family: 'kanit', sans-serif; background: #131722; background: #131722; scroll-behavior: smooth; padding: 0; margin: 0; color: var(--text-color); display: flex; flex-direction: column; height: 100%; background-image: url(/images/background[class~="png"]); background-repeat: no-repeat; background-position: center; background-size: cover; } [class~="note"]{ width: fit-content; position: fixed; right: 0; top: 50%; padding:0.9375rem 1.875rem; background: white; display: flex; z-index: 1000000; border-top-left-radius: 0.625rem; border-bottom-left-radius: 0.625rem; opacity: 0%; z-index: -10000; transition: .3s ease-in; } [class~="note"] p{ font-size: 0.875rem; font-weight: 600; color: black ; } [class~="navigation"]{ height: 5rem; width: 100%; padding: 1rem; background: transparent; z-index: 1000; display: flex; background: #131722; position: sticky; top: 0; } [class~="navigation"] [class~="navigation-container"]{ width: 100%; display: flex; justify-content: space-between; } [class~="navigation"] [class~="navigation-container"] [class~="leftside"]{ display: flex; align-items: center; } [class~="navigation"] [class~="navigation-container"] [class~="leftside"] [class~="logo"]{ display: flex; align-items: center; margin-left: 1.5rem; } [class~="navigation"] [class~="navigation-container"] [class~="leftside"] [class~="logo"] img{ width: 2.5rem; height: 2.5rem; margin-right: 0.5rem; } [class~="navigation"] [class~="navigation-container"] [class~="leftside"] [class~="logo"] h2{ color: #ffa409; font-size: 2rem; } [class~="navigation"] [class~="navigation-container"] [class~="leftside"] [class~="tvl"]{ display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; border-radius: 1.25rem; border-width: 0.1875rem; padding: 0.4rem 0.8rem; border: 0.1875rem solid #919193; line-height: 1rem!important; } [class~="navigation"] [class~="navigation-container"] [class~="leftside"] [class~="tvl"] p{ display: flex; align-items: center; font: 1rem; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"]{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: fit-content; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] [class~="one"]{ padding: 0.4rem 0.6rem; border-radius: 5rem; background-image: linear-gradient(#10121b,#10121b),radial-gradient(circle at left top,#ffa409,#2d324b); background-origin: border-box; background-clip: padding-box,border-box; border: 0.1875rem double transparent; display: flex; width: 100%; align-items: center; justify-content: space-between; line-height: 1rem!important; gap: 0.75rem; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] [class~="one"] p{ font-size: 1rem; height: fit-content; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] button{ display: flex; border-radius: 1.5625rem; border: 0.1875rem solid #383648; background-color: #d5d5d5; font-size: 1rem; font-family: 'kanit', sans-serif; outline: none; padding: 6.0.25rem 12.0.5rem; min-width: 11.6875rem; justify-content: center; cursor: pointer; line-height: 1rem!important; font-weight: 600; color:black; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] [class~="menu"]{ display: flex; align-items: center; position: relative; cursor: pointer; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] [class~="menu"] [class~="dropdown"]{ display: flex; flex-direction: column; align-items: center; padding: 1rem; position: absolute; top: 4.375rem; right: 0; background: white; border-radius: 0.625rem; width: 11.25rem; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] [class~="menu"] [class~="dropdown"] a{ color: #111111; font-size: 1rem; padding: 0.0625rem; width: 100%; font-weight: 700; text-align: center; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] [class~="menu"] h2{ display: flex; align-items: center; color: #ffa409; padding: 6.0.25rem 12.0.5rem; font-size: 1.875rem; } [class~="section1"]{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } [class~="section1"] [class~="section1-null-container"]{ display: flex; padding: 1rem; } [class~="section1"] [class~="section1-null-container"] h1{ font-size: ; text-align: center; } [class~="section1"] [class~="section1-container"]{ width: 81.25rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); padding: 1rem; } [class~="section1"] [class~="section1-container"] [class~="box"]{ display: flex; padding: 1rem; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"]{ display: flex; flex-direction: column; justify-content: space-between; width: 100%; background-color: rgb(20, 24, 36); box-shadow: rgba(0, 0, 0, 0.45) 0rem 0rem 0.75rem 0.375rem; border-radius: 1.25rem; height: 16rem; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"]:hover{ background: #262936; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"]{ padding: 1rem; padding-bottom: 0; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="top"]{ display: flex; justify-content: space-between; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"] [class~="top"] [class~="leftside"]{ display: flex; flex-direction: column; gap: .5rem; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"] [class~="top"] [class~="leftside"] h1{ font-size: 1.75rem; line-height: 1rem!important; color: #d5d5d5; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"] [class~="top"] [class~="leftside"] p{ font-size: 0.9375rem; font-family: 'heebo', sans-serif; font-weight: 800; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"] [class~="top"] [class~="rightside"]{ padding: 0.5rem; box-shadow: rgba(13, 13, 13, 0.8) 0rem 0rem 0.5625rem inset; border-radius: 0.625rem; background: transparent; height: fit-content; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"] [class~="top"] [class~="rightside"] img{ width: 2.5rem; height: 2.5rem; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"] [class~="bottom"]{ display: flex; margin: 22.0.25rem 0rem auto; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"] [class~="bottom"] p{ font-size: 0.9375rem; font-family: 'heebo', sans-serif; font-weight: 800; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="topside"] [class~="bottom"] p span{ color: #348153; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="bottomside"]{ padding: 0.5rem 1rem ; padding-top: 0; display: flex; } [class~="section1"] [class~="section1-container"] [class~="box"] [class~="box-container"] [class~="bottomside"] p{ padding: 0.5rem 1.75rem; width: fit-content; background-color: rgb(56, 54, 72); border-radius: 2rem; color: rgb(254, 163, 28); font-weight: 600; width: 12.5rem; font-size: 14.4.125rem; text-align: center; cursor: pointer; } [class~="section1"] [class~="bottom-container"]{ display: flex; flex-direction: column; padding: 1rem; padding-bottom: 2rem; } [class~="section1"] [class~="bottom-container"] h1{ text-align: center; margin-bottom: 1rem; } [class~="section1"] [class~="bottom-container"] p{ margin-bottom: .5rem; } [class~="footer"]{ display: flex; bottom: 0; width: 100%; padding: 0.25rem; background-color: rgb(20, 24, 36); box-shadow: rgba(0, 0, 0, 0.45) 0rem 0rem 0.75rem 0.375rem; border-top: #91919328 solid .0.0625rem; } [class~="footer"] [class~="footer-container"]{ display: flex; width: 100%; justify-content: center; align-items: center; position: relative; flex-wrap: nowrap!important; box-sizing: border-box; --tw-border-opacity: 1; border-color: rgba(229,231,235,var(--tw-border-opacity)); } [class~="footer"] [class~="footer-container"] a{ padding: 0 0.5rem; margin-left: 0.5rem; } [class~="footer"] [class~="footer-container"] [class~="faq"]{ position: absolute; right: 1.875rem; padding: 0 0.5rem; } [class~="footer"] [class~="footer-container"] [class~="faq"] p{ color: #fea31c; font-weight: 700; } @media(max-width:80rem){ [class~="navigation"]{ overflow: hidden; } } @media(max-width:75rem){ [class~="section1"] [class~="section1-container"]{ width: 60rem; } } @media(max-width:64rem){ [class~="navigation"]{ overflow: visible; } [class~="navigation"] [class~="navigation-container"] [class~="leftside"] [class~="logo"] h2{ display: none; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] [class~="one"]{ display: none; } [class~="navigation"] [class~="navigation-container"] [class~="rightside"] button{ min-width: 9.5rem; } [class~="section1"]{ height: fit-content; } [class~="footer"]{ position: fixed; bottom: 0; } } @media(max-width:62rem){ [class~="section1"] [class~="section1-container"]{ width: 45rem; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); padding-bottom: 4rem!important; } } @media(max-width:60.9375rem){ [class~="navigation"] [class~="navigation-container"] [class~="leftside"] [class~="tvl"]{ display: none; } } @media(max-width:48rem){ [class~="section1"] { width: 100%; } [class~="section1"] [class~="section1-container"]{ width: 100%; display: flex; flex-direction: column; } [class~="footer"]{ display: none; } } @media(max-width:35.9375rem){ [class~="section1"] [class~="section1-container"]{ width: 100%; padding: 0; } } @media(max-width:31.25rem){ [class~="navigation"] [class~="navigation-container"] [class~="leftside"] [class~="logo"]{ margin-left: 0rem; } }