html {
    --primary-base: rgba(99, 74, 214, 1);
    --primary-hover: rgba(99, 74, 214, 1);
    --primary-active: rgba(81, 55, 199, 1);
    --secondary-base: rgba(234, 230, 255, 1);
    --secondary-hover: rgba(221, 215, 255, 0.9);
    --secondary-active: rgba(206, 198, 255, 1);
    --background: rgba(245, 246, 247, 1);
    --black-100: rgba(47, 47, 69, 1);
    --black-90: rgba(47, 47, 69, 0.9);
    --black-80: rgba(47, 47, 69, 0.8);
    --black-70: rgba(47, 47, 69, 0.7);
    --black-60: rgba(47, 47, 69, 0.6);
    --black-50: rgba(47, 47, 69, 0.5);
    --black-40: rgba(47, 47, 69, 0.4);
    --black-30: rgba(47, 47, 69, 0.3);
    --black-20: rgba(47, 47, 69, 0.2);
    --black-10: rgba(47, 47, 69, 0.1);
    --white-100: rgba(255, 255, 255, 1);
    --white-90: rgba(255, 255, 255, 0.9);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-10: rgba(255, 255, 255, 0.1);
    --success-base: rgba(135, 211, 76, 1);
    --success-hover: rgba(116, 195, 54, 1);
    --success-active: rgba(87, 167, 24, 1);
    --success-background: rgba(231, 246, 219, 1);
    --error-base: rgba(234, 49, 23, 1);
    --error-hover: rgba(213, 38, 14, 1);
    --error-active: rgba(187, 33, 12, 1);
    --error-background: rgba(255, 238, 238, 1);
    --brand: rgba(255, 97, 112, 1);
    --blue-100: rgba(58, 175, 255, 1);
    --blue-90: rgba(58, 175, 255, 0.9);
    --blue-80: rgba(58, 175, 255, 0.8);
    --blue-70: rgba(58, 175, 255, 0.7);
    --blue-60: rgba(58, 175, 255, 0.6);
    --blue-50: rgba(58, 175, 255, 0.5);
    --blue-40: rgba(58, 175, 255, 0.4);
    --blue-30: rgba(58, 175, 255, 0.3);
    --blue-20: rgba(58, 175, 255, 0.2);
    --blue-10: rgba(58, 175, 255, 0.1);
    --mint-100: rgba(0, 178, 168, 1);
    --mint-90: rgba(0, 178, 168, 0.9);
    --mint-80: rgba(0, 178, 168, 0.8);
    --mint-70: rgba(0, 178, 168, 0.7);
    --mint-60: rgba(0, 178, 168, 0.6);
    --mint-50: rgba(0, 178, 168, 0.5);
    --mint-40: rgba(0, 178, 168, 0.4);
    --mint-30: rgba(0, 178, 168, 0.3);
    --mint-20: rgba(0, 178, 168, 0.2);
    --mint-10: rgba(0, 178, 168, 0.1);
    --purple-100: rgba(118, 95, 222, 1);
    --purple-90: rgba(118, 95, 222, 0.9);
    --purple-80: rgba(118, 95, 222, 0.8);
    --purple-70: rgba(118, 95, 222, 0.7);
    --purple-60: rgba(118, 95, 222, 0.6);
    --purple-50: rgba(118, 95, 222, 0.5);
    --purple-40: rgba(118, 95, 222, 0.4);
    --purple-30: rgba(118, 95, 222, 0.3);
    --purple-20: rgba(118, 95, 222, 0.2);
    --purple-10: rgba(118, 95, 222, 0.1);
    --orange-100: rgba(255, 136, 17, 1);
    --orange-90: rgba(255, 136, 17, 0.9);
    --orange-80: rgba(255, 136, 17, 0.8);
    --orange-70: rgba(255, 136, 17, 0.7);
    --orange-60: rgba(255, 136, 17, 0.6);
    --orange-50: rgba(255, 136, 17, 0.5);
    --orange-40: rgba(255, 136, 17, 0.4);
    --orange-30: rgba(255, 136, 17, 0.3);
    --orange-20: rgba(255, 136, 17, 0.2);
    --orange-10: rgba(255, 136, 17, 0.1);
    --coral-100: rgba(255, 97, 112, 1);
    --coral-90: rgba(255, 97, 112, 0.9);
    --coral-80: rgba(255, 97, 112, 0.8);
    --coral-70: rgba(255, 97, 112, 0.7);
    --coral-60: rgba(255, 97, 112, 0.6);
    --coral-50: rgba(255, 97, 112, 0.5);
    --coral-40: rgba(255, 97, 112, 0.4);
    --coral-30: rgba(255, 97, 112, 0.3);
    --coral-20: rgba(255, 97, 112, 0.2);
    --coral-10: rgba(255, 97, 112, 0.1);
    --green-100: rgba(16, 200, 78, 1);
    --green-90: rgba(16, 200, 78, 0.9);
    --green-80: rgba(16, 200, 78, 0.8);
    --green-70: rgba(16, 200, 78, 0.7);
    --green-60: rgba(16, 200, 78, 0.6);
    --green-50: rgba(16, 200, 78, 0.5);
    --green-40: rgba(16, 200, 78, 0.4);
    --green-30: rgba(16, 200, 78, 0.3);
    --green-20: rgba(16, 200, 78, 0.2);
    --green-10: rgba(16, 200, 78, 0.1);
    --yellow-100: rgba(251, 204, 60, 1);
    --yellow-90: rgba(251, 204, 60, 0.9);
    --yellow-80: rgba(251, 204, 60, 0.8);
    --yellow-70: rgba(251, 204, 60, 0.7);
    --yellow-60: rgba(251, 204, 60, 0.6);
    --yellow-50: rgba(251, 204, 60, 0.5);
    --yellow-40: rgba(251, 204, 60, 0.4);
    --yellow-30: rgba(251, 204, 60, 0.3);
    --yellow-20: rgba(251, 204, 60, 0.2);
    --yellow-10: rgba(251, 204, 60, 0.1);
}

* {
    color: var(--black-100);
    font-family: 'Factor A';
    font-size: 18px;
    line-height: 24px;
    box-sizing: border-box;
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    transition: ease-in-out 100ms;
}

@media screen and (max-width: 768px) {
    * {
        font-size: 16px;
        line-height: 24px;
    }
}

*::placeholder {
    color: var(--black-60);
}

*:disabled {
    color: var(--black-40);
}

body {
    --offset: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--offset);
    background: var(--background);
    scrollbar-width: thin;
    scrollbar-color: var(--black-100) transparent;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media screen and (max-width: 768px) {
    body {
        --offset: 16px;
    }
}

html {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

div.text.bold {
    font-family: 'Factor A Bold';
}

h1 {
    font-family: 'Factor A Bold';
    font-size: 40px;
    line-height: 46px;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 28px;
        line-height: 32px;
    }
}

h2 {
    font-family: 'Factor A Bold';
    font-size: 32px;
    line-height: 38px;
}

@media screen and (max-width: 768px) {
    h2 {
        font-size: 24px;
        line-height: 28px;
    }
}

h3 {
    font-family: 'Factor A Bold';
    font-size: 24px;
    line-height: 30px;
}

@media screen and (max-width: 768px) {
    h3 {
        font-size: 20px;
        line-height: 24px;
    }
}

h4 {
    font-family: 'Factor A Bold';
    font-size: 20px;
    line-height: 24px;
}

@media screen and (max-width: 768px) {
    h4 {
        font-size: 18px;
        line-height: 24px;
    }
}

a {
    color: var(--primary-base);
}

a:hover {
    color: var(--primary-hover);
}

a:active {
    color: var(--primary-active);
}

.no-select {
    user-select: none;
}

button {
    padding: calc(var(--offset) / 4) calc(var(--offset) / 2);
    border-radius: calc(var(--offset) / 2);
    cursor: pointer;
    font-family: 'Factor A Bold';
}

button {
    background: var(--primary-base);
    color: var(--white-100);
}

button:hover {
    background: var(--primary-hover);
    color: var(--white-100);
}

button:active {
    background: var(--primary-active);
    color: var(--white-100);
}

button.error {
    background: var(--error-base);
    color: var(--white-100);
}

button.error:hover {
    background: var(--error-hover);
    color: var(--white-100);
}

button.error:active {
    background: var(--error-active);
    color: var(--white-100);
}

button.secondary {
    background: var(--secondary-base);
    color: var(--black-100);
}

button.secondary:hover {
    background: var(--secondary-hover);
    color: var(--black-100);
}

button.secondary:active {
    background: var(--secondary-active);
    color: var(--black-100);
}

button.success {
    background: var(--success-base);
    color: var(--white-100);
}

button.success:hover {
    background: var(--success-hover);
    color: var(--white-100);
}

button.success:active {
    background: var(--success-active);
    color: var(--white-100);
}

input {
    padding: calc(var(--offset) / 4) calc(var(--offset) / 2);
    border-radius: calc(var(--offset) / 2);
    background: var(--white-100);
    color: var(--black-100);
}

div#app {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--offset);
    border-radius: var(--offset);
    padding: var(--offset);
    width: 100%;
    max-width: 1200px;
    background: var(--white-100);
}

button.secondary.balance {
    position: absolute;
    top: calc(var(--offset) / 2);
    left: calc(var(--offset) / 2);
    display: flex;
    gap: calc(var(--offset) / 4);
    flex-direction: row;
}

span.balance-text {
    font-family: 'Factor A Bold';
}

div.buttons-container {
    display: flex;
    display: flex;
    flex-direction: column;
    gap: calc(var(--offset) / 2);
    position: absolute;
    bottom: calc(var(--offset) / 2);
    left: calc(var(--offset) / 2);
}

svg.left.family {
    cursor: pointer;
    width: 33%;
    height: 100%;
}

svg.left.family:hover {
    scale: 1.2;
    translate: 12% 5%;
}

div#game.no-select {
    position: relative;
    overflow: hidden;
    background-color: var(--black-20);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 400px;
    border-radius: calc(var(--offset) / 2);
}

svg.left {
    position: absolute;
    left: 5%;
    bottom: 0;
}

div.pirate-text {
    position: absolute;
    top: calc(var(--offset) / 2);
    right: calc(var(--offset) / 2);
    left: 33%;
    background: var(--white-80);
    padding: calc(var(--offset) / 2);
    border-radius: calc(var(--offset) / 2);
}

svg.right {
    position: absolute;
    right: 5%;
    bottom: 0;
}

div.scene-buttons-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--offset) / 2);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: calc(var(--offset) / 2);
}

div.scene-container {
    background: var(--white-80);
    display: flex;
    flex-direction: column;
    gap: calc(var(--offset) / 2);
    position: absolute;
    bottom: calc(var(--offset) / 2);
    top: calc(var(--offset) / 2);
    left: calc(var(--offset) / 2);
    right: calc(var(--offset) / 2);
    padding: calc(var(--offset) / 2);
    margin: auto;
    border-radius: calc(var(--offset) / 2);
    width: 500px;
    max-width: calc(100% - var(--offset));
}

svg.right.ship {
    cursor: pointer;
    width: 33%;
    height: 100%;
}

svg.right.ship:hover {
    scale: 1.2;
    translate: -12% 5%;
}