@font-face{font-family:Goldman;src:url(/build/assets/Goldman-Regular-541fa4c4.ttf) format("truetype");font-display:swap}@font-face{font-family:Roboto;src:url(/build/assets/Roboto-Regular-4e147ab6.ttf) format("truetype");font-display:swap}@font-face{font-family:Roboto;font-weight:700;src:url(/build/assets/Roboto-Bold-ec685a46.ttf) format("truetype");font-display:swap}html{background:#000f1f;font-size:62.5%}html,body{margin:0;padding:0}body,input,textarea,button{font-family:Roboto,sans-serif;color:#fff;font-size:1.6rem}div.inner{margin:0 auto;max-width:1080px;padding:0 20px}#footer{border-top:1px solid #092a4b;padding:25px 0;background:#000f1f;font-size:1.4rem;div.footer--inner {display: flex;} div.footer--main {ul {margin: 0; padding: 0; list-style-type: none; li {display: inline; margin: 0 5px;} a {color: #DDDDDD; text-decoration: none; white-space: nowrap;}} p {margin: 10px 0 0 0; color: #747c83; font-size: 1.3rem; line-height: 1.3; &.disclaimer {max-width: 900px; text-wrap: balance;}}} div.footer--social {display: grid; grid-template-columns: repeat(3,40px); grid-gap: 20px; justify-content: center; a {aspect-ratio: 1 / 1; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; &.x {background-image: url(/build/assets/x-ad26555d.svg);} &.facebook {background-image: url(/build/assets/facebook-9a474f11.svg);} &.instagram {background-image: url(/build/assets/instagram-01b1a090.svg);} @media(hover: hover) {transition: ease-in-out transform .2s; &:hover {transform: scale(1.1);}}}} @media(max-width: 899px) {div.footer--inner {flex-direction: column-reverse;} div.footer--main {margin-top: 20px; text-align: center; ul {text-wrap: balance; line-height: 1.8;}}} @media(min-width: 900px) {div.footer--inner {justify-content: space-between;} div.footer--main {ul li:first-child {margin-left: 0;}}}}form.general{div.field {margin-bottom: 15px; label {display: block; margin-bottom: 5px;}} div.cloudflare-turnstile {margin: 10px 0;} input,textarea,button {outline: none; border-radius: 4px;} input,textarea {display: block; width: 100%; box-sizing: border-box; padding: 10px; background: #031629; border: 1px solid #12304b; box-shadow: inset #000810 1px 1px 5px; color: #DDDDDD; &:focus {box-shadow: none; border-color: #034c52;}} textarea {resize: vertical;} button {color: white; padding: 12px 30px; background: linear-gradient(to bottom,#1e8007 0%,#0d5200 100%); box-shadow: inset rgba(255,255,255,.2) 1px 1px 0; border: 1px solid #0a3f00; cursor: pointer; &:active {background: #0d5200;}}}#header{border-bottom:1px solid #092a4b;padding:clamp(10px,2vw,20px) 0;div.header--inner {display: flex; align-items: center; justify-content: space-between;} a.logo {display: block; width: 300px; max-width: 60vw; img {display: block; width: 100%; height: auto;}} nav {ul {list-style-type: none;} a {color: white; text-decoration: none; font-family: "Goldman",sans-serif; padding: 10px 20px; border-radius: 5px; &.active {background: #02213D;}}} @media(max-width: 899px) {button.menu {width: 46px; height: 46px; border: 0; background: url(/build/assets/menu_open-9c539a78.svg) no-repeat center center; background-size: 100% 100%; cursor: pointer;} button.close {position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; background: url(/build/assets/menu_close-180092d1.svg) no-repeat center center; background-size: 100% 100%; cursor: pointer;} nav {position: fixed; z-index: 100000; top: 0; left: 100%; width: 100%; height: 100%; transition: left linear .15s; background: rgba(0,15,31,.9); backdrop-filter: blur(5px); font-size: 2rem; display: flex; align-items: center; ul {max-height: 100%; overflow: auto; box-sizing: border-box; padding: 20px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px;}} @at-root html.nav-open {#header nav {left: 0;} body {overflow: hidden;}}} @media(min-width: 900px) {button.menu,nav button.close {display: none;} nav {ul {display: flex; align-items: center; gap: 5px;}}}}div.legal{margin:0 auto;h2 {margin: 25px 0px 15px 0px; font-size: 1.8rem;} h3 {margin: 12px 0px; font-size: 1.6rem;} ul,ol {margin: 15px 0;} li {margin: 8px 0;} p,li {line-height: 1.4;} div.policy-section {margin-left: 30px;} table.payment-thresholds {width: 250px; border-collapse: collapse; text-align: left; font-size: 12px; th,td {padding: 5px; border: 1px solid #3b4c5a;} th {font-weight: bold;}}}#main{padding:40px 0;background:linear-gradient(to bottom,#01182c 0,#01213d 80px,#01213d calc(100% - 80px),#01182c 100%);a {color: #9bb7d9; transition: color linear .15s; @media(hover: hover) {&:hover {color: #7499c5;}}}}div.page{header.page--header {margin: 0 0 25px 0; h1 {margin: 0; font-size: 2.4rem; font-weight: normal; text-wrap: balance; font-family: "Goldman",sans-serif;}} ul.response-message {padding: 0; margin: 0 0 20px 0; list-style-type: none; &.success {color: #12da4a;} &.error {color: #da1212;} li {margin: 8px 0; line-height: 1.5; font-weight: bold;}}}#page-contact{div.contact-split {display: grid; grid-template-columns: 1fr; gap: 50px; @media(min-width: 1000px) {grid-template-columns: 1fr 300px; gap: 100px;}} div.contact-primary {div.general p {margin: 10px 0px; line-height: 1.6em; &:first-child {margin-top: 0;} &:last-child {margin-bottom: 0;}} form {margin-top: 25px;}} div.contact-secondary {h2 {margin: 25px 0 10px 0; font-size: 1.8rem; font-weight: normal; text-wrap: balance; font-family: "Goldman",sans-serif; &:first-child {margin-top: 0;}} p {margin: 8px 0; font-size: 1.4rem; line-height: 1.5; &:first-child {margin-top: 0;} &:last-child {margin-bottom: 0;}} div.social {display: grid; grid-template-columns: repeat(3,34px); grid-gap: 14px; a {aspect-ratio: 1 / 1; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; &.x {background-image: url(/build/assets/x-ad26555d.svg);} &.facebook {background-image: url(/build/assets/facebook-9a474f11.svg);} &.instagram {background-image: url(/build/assets/instagram-01b1a090.svg);} @media(hover: hover) {transition: ease-in-out transform .2s; &:hover {transform: scale(1.1);}}}}}}#page-faqs{div.question {background: #021C33; border: 1px solid #021426; border-radius: 5px; &:not(:last-child) {margin-bottom: 10px;} header {padding: 15px 10px; border-radius: 5px 5px 0 0; background: #021426; cursor: pointer; display: flex; justify-content: space-between; align-items: center; p {margin: 0;} &:after {display: block; content: ""; width: 30px; height: 30px; background: url(/build/assets/dropdown-e8a4b78c.svg) no-repeat center center; background-size: 100% 100%; transition: rotate linear .15s;}} div.answer {padding: 15px 10px; p,li {margin: 8px 0; line-height: 1.5;} ul,ol {margin: 12px 0;} * {&:first-child {margin-top: 0;} &:last-child {margin-bottom: 0;}}} &.closed {header {border-radius: 5px; &:after {rotate: -90deg;}} div.answer {display: none;}}}}#page-index{padding:20px 0;text-align:center;div.intro {font-size: 2.4rem; text-wrap: balance; font-family: "Goldman",sans-serif; text-transform: uppercase; text-shadow: rgba(0,0,0,.75) 1px 1px 2px; &,a {color: white;} h2,p {margin: 0;} h2 {font-size: 1em; font-weight: normal;} p {margin: 5px 0 0 0; font-size: .75em; span.line {display: inline-block;}}} div.cta {margin: 20px 0 40px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; a {flex: 0 0 100%; display: block; padding: 12px; border: 1px solid black; border-radius: 8px; color: white; text-shadow: rgba(0,0,0,.9) 1px 1px 1px; box-shadow: inset rgba(255,255,255,.3) 1px 1px 1px,rgba(0,0,0,.4) 1px 1px 1px; box-sizing: border-box; font-weight: bold; -webkit-font-smoothing: antialiased; text-decoration: none; background: linear-gradient(to bottom,#606060 0%,#303030 100%); &:active {background: #303030; color: rgba(255,255,255,.7);} &:is(.register,.continue) {background: linear-gradient(to bottom,#459F30 0%,#1D6A0D 100%); &:active {background: #1D6A0D;}} @media(min-width: 500px) {flex: 0 0 200px;}} @media(max-width: 499px) {max-width: 400px; margin-left: auto; margin-right: auto;} &.logged-in {a.login,a.register {display: none;}} &:not(.logged-in) {a.continue {display: none;}}} div.screenshots {margin: 40px auto; max-width: 800px; overflow: hidden; --items-show: 4; div.items {position: relative; display: flex; gap: 10px;} div.item {flex: 0 0 auto; width: calc((100% / var(--items-show)) - ((10px * (var(--items-show) - 1) / var(--items-show)))); height: auto; aspect-ratio: 1284 / 2778; box-sizing: border-box; border-radius: 10px; background: linear-gradient(to bottom,#58a5dc 0%,#d1c975 15%,#d1c975 85%,#58a5dc 100%); padding: 2px;} img {width: 100%; height: 100%; display: block; border-radius: 8px;} @media(max-width: 799px) { --items-show: 3; } @media(max-width: 599px) { --items-show: 2; }} div.about {max-width: 700px; margin: 0 auto; &,a {color: white;} p {margin: 8px 0; line-height: 1.4; &:first-child {margin-top: 0;} &:last-child {margin-bottom: 0;}}} ul.download {margin: 40px 0; padding: 0; list-style-type: none; display: flex; align-items: center; justify-content: center; img {height: 60px; width: auto;} @media(max-width: 599px) {flex-direction: column; li:not(:first-child) {margin-top: 25px;}} @media(min-width: 600px) {li:not(:first-child) {margin-left: 25px;}}} div.ratings {margin: 40px 0 0 0; display: flex; align-items: center; justify-content: center; gap: 15px; img {display: block; height: 80px; width: auto;}}}#page-password{div.intro {margin-bottom: 25px; p {margin: 10px 0; line-height: 1.5; &:first-child {margin-top: 0;} &:last-child {margin-bottom: 0;}}} form {max-width: 500px;}}#page-rounds{div.intro {margin-bottom: 25px; p {margin: 10px 0; line-height: 1.5; &:first-child {margin-top: 0;} &:last-child {margin-bottom: 0;}}} div.round {background: #021C33; border: 1px solid #021426; border-radius: 5px; &:not(:last-child) {margin-bottom: 10px;} header {padding: 8px 10px; border-radius: 5px 5px 0 0; background: #021426; display: flex; justify-content: space-between; align-items: center; p {margin: 0; &.type {padding: 3px 8px; border-radius: 4px; font-size: 1.4rem;}}} div.round--content {padding: 15px 10px; p {margin: 10px 0; line-height: 1.5; &:first-child {margin-top: 0;} &:last-child {margin-bottom: 0;}}}}}#page-updates{div.rounds {ul {list-style-type: none; margin: 0; padding: 0;} a {display: block; width: 100%; background: #021C33; box-sizing: border-box; padding: 10px 15px; color: white; text-decoration: none; transition: background linear .15s; cursor: pointer; text-align: left; @media(hover: hover) {&:hover {background: rgba(0,0,0,.4);}}}} div.updates {p.none {margin: 0;}} div.update {background: #021C33; border: 1px solid #021426; border-radius: 5px; &:not(:last-child) {margin-bottom: 10px;} header {padding: 8px 10px; border-radius: 5px 5px 0 0; background: #021426; display: flex; justify-content: space-between; align-items: center; p {margin: 0; &.type {padding: 3px 8px; border-radius: 4px; font-size: 1.4rem; &.feature {background: linear-gradient(to bottom,#427342 0%,#247924 100%);} &.improvement {background: linear-gradient(to bottom,#2b5173 0%,#205079 100%);} &.change {background: linear-gradient(to bottom,#532665 0%,#52156b 100%);} &.bug {background: linear-gradient(to bottom,#832727 0%,#851b1b 100%);} &.notice {background: linear-gradient(to bottom,#877128 0%,#98831c 100%);}}}} div.update--content {padding: 15px 10px; line-height: 1.5;}} @media(max-width: 999px) {div.rounds {margin-bottom: 25px; border: 1px solid #021426; border-radius: 5px; background: #021C33; li {border-top: 1px solid #021426; &.active a {font-weight: bold;}} button {background: transparent; position: relative; display: block; width: 100%; border-radius: 5px; border: 0; padding: 10px 15px; text-align: left; cursor: pointer; &:active {background: #011221;} &:after {display: block; content: ""; width: 20px; height: 20px; background: url(/build/assets/dropdown-e8a4b78c.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: calc(50% - 10px); right: 10px; transition: rotate linear .15s;}} &.open {button {border-bottom-left-radius: 0; border-bottom-right-radius: 0; opacity: .5;}} &:not(.open) {button:after {rotate: -90deg;} ul {display: none;}}}} @media(min-width: 1000px) {div.rounds {li {&:not(:last-child) {margin-bottom: 10px;} &.active a {background: rgba(0,0,0,.4);}} a {border-radius: 5px; border: 1px solid #021426;} button {display: none;}} div.updates-main {display: grid; grid-template-columns: 200px 1fr; gap: 30px;}}}