*, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
  }
  :before, :after {
    --tw-content: ""
  }
  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal
  }
  body {
    margin: 0;
    line-height: inherit
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit
  }
  a {
    color: inherit;
    text-decoration: inherit
  }
  b, strong {
    font-weight: bolder
  }
  code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1em
  }
  small {
    font-size: 80%
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
  }
  sub {
    bottom: -.25em
  }
  sup {
    top: -.5em
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }
  button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0
  }
  button, select {
    text-transform: none
  }
  button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
  }
  :-moz-focusring {
    outline: auto
  }
  :-moz-ui-invalid {
    box-shadow: none
  }
  progress {
    vertical-align: baseline
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto
  }
  [type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none
  }
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
  }
  summary {
    display: list-item
  }
  blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0
  }
  fieldset {
    margin: 0;
    padding: 0
  }
  legend {
    padding: 0
  }
  ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0
  }
  dialog {
    padding: 0
  }
  textarea {
    resize: vertical
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
  }
  input::placeholder, textarea::placeholder {
    opacity: 1;
    color: #9ca3af
  }
  button, [role=button] {
    cursor: pointer
  }
  :disabled {
    cursor: default
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle
  }
  img, video {
    max-width: 100%;
    height: auto
  }
  [hidden] {
    display: none
  }
  *, :before, :after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
  }
  ::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
  }
  .container {
    width: 100%
  }
  @media (min-width: 640px) {
    .container {
      max-width: 640px
    }
  }
  @media (min-width: 768px) {
    .container {
      max-width: 768px
    }
  }
  @media (min-width: 1024px) {
    .container {
      max-width: 1024px
    }
  }
  @media (min-width: 1280px) {
    .container {
      max-width: 1280px
    }
  }
  @media (min-width: 1536px) {
    .container {
      max-width: 1536px
    }
  }
  .visible {
    visibility: visible
  }
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    box-sizing: border-box;
    font-family: Prompt, sans-serif
  }
  @font-face {
    font-family: GothamBlack;
    src: url(../fonts/GothamBlack.otf) format("opentype");
    font-weight: 400;
    font-style: normal
  }
  @font-face {
    font-family: GothamBold;
    src: url(../fonts/GothamBold.otf) format("opentype");
    font-weight: 400;
    font-style: normal
  }
  @font-face {
    font-family: GothamBlackRegular;
    src: url(../fonts/GothamBlackRegular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
  }
  body, #root {
    height: 100vh;
    overflow: hidden
  }
  #root {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center
  }
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
  }
  .bank-container {
    display: flex;
    align-items: center;
    position: absolute;
    right: 4%;
    top: 4%
  }
  .background-image {
    width: 32px;
    height: 31px;
    margin-right: 15px
  }
  .bank-infos {
    display: flex;
    flex-direction: column;
    text-align: left
  }
  .bank-infos p {
    font-family: GothamBold;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 5px 0 0;
    letter-spacing: .1em;
    white-space: nowrap
  }
  .bank-infos span {
    text-transform: uppercase;
    font-family: GothamBlackRegular;
    font-size: 15px;
    color: #fff;
    text-align: left
  }
  .user-icon {
    position: relative;
    width: 50px;
    height: 50px;
    margin-left: 10px
  }
  .user-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    padding: 1px;
    background: linear-gradient(to left, red, red, transparent) 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
  }
  .flare {
    position: absolute;
    width: 642px;
    height: 642px;
    left: -321px;
    top: 759px;
    background: var(--flare-color);
    filter: blur(197px);
    z-index: 1
  }
  .flare2 {
    position: absolute;
    width: 642px;
    height: 642px;
    left: 1598px;
    top: 759px;
    background: var(--flare-color);
    filter: blur(197px)
  }
  .container .title {
    font-family: GothamBlackRegular;
    text-transform: uppercase;
    font-size: 20px;
    color: var(--white-color);
    letter-spacing: .3em;
    font-weight: 700
  }
  .container .subtitle {
    font-weight: 700;
    font-family: GothamBold;
    font-size: 12px;
    color: var(--subtitle-color);
    margin-bottom: 5%;
    text-transform: uppercase
  }
  .container .subtitle span {
    font-weight: 700;
    font-family: GothamBold;
    color: var(--secondary-color);
    text-transform: uppercase
  }
  .grid-container {
    display: grid;
    grid-template-areas: "praca sandy paleto""pier pier paleto";
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px
  }
  .card {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    transition: transform .3s ease, background-image .3s ease
  }
  .card.selected {
    background-image: linear-gradient(to top, var(--card-selected) 1%, transparent 60%)
  }
  .card:hover {
    transform: scale(1.02)
  }
  .overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px
  }
  .overlay h2 {
    text-transform: uppercase;
    font-family: GothamBlack;
    font-size: 20px;
    color: var(--white-color);
    margin: 0;
    text-shadow: var(--text-shadow) 0px 1px 5px
  }
  .text-roxo {
    text-transform: uppercase;
    font-family: GothamBlack;
    font-size: 20px;
    color: var(--secondary-color);
    margin: 0;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 1);
  }
  .overlay p {
    text-transform: uppercase;
    font-size: 12px;
    color: #fff9;
    font-family: GothamBold;
    margin: 0
  }
  .praca {
    width: 263px;
    height: 365px;
    grid-area: praca
  }
  .sandy {
    width: 263px;
    height: 365px;
    grid-area: sandy
  }
  .pier {
    text-align: left;
    width: 536px;
    height: 233px;
    grid-area: pier
  }
  .paleto {
    width: 263px;
    height: 610px;
    grid-area: paleto
  }
  .buttons {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%
  }
  .lastLoc {
    background-image: url(../background/backgroundloc.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 114px;
    height: 43px;
    color: var(--white-color);
    font-size: 12px;
    font-family: GothamBlackRegular;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 2.8%;
    transition: transform .3s ease
  }
  .spawn-wrapper {
    background-image: url(../background/backgroundspawn.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 67px;
    width: 180px;
    color: var(--white-color);
    font-size: 18px;
    font-family: GothamBlackRegular;
    text-transform: uppercase;
    cursor: pointer;
    margin-left: 1%;
    margin-right: -.5%;
    transition: transform .3s ease
  }
  .spawn-wrapper:hover, .lastLoc:hover {
    transform: scale(1.02);
    color: var(--secondary-color)
  }
  .select-spawn {
    background-image: url(../background/backgroundselect.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 294px;
    height: 118px;
    font-size: 24px;
    font-family: GothamBlackRegular;
    text-transform: uppercase;
    margin-top: 4%
  }
  .select-spawn p {
    font-family: GothamBlackRegular;
    color: var(--secondary-color);
    margin-top: 10%;
    font-size: 24px;
    margin-bottom: 0
  }
  .select-spawn h3 {
    font-family: GothamBlackRegular;
    color: var(--white-color);
    font-size: 35px;
    margin-top: -5%;
    text-shadow: var(--text-shadow) 0px 1px 5px
  }
  @media (max-width: 1920px) {
    #interface {
      zoom: .94
    }
  }
  @media (max-width: 1280px), (max-width: 1024px), (max-width: 800px) {
    #interface {
      zoom: .8
    }
  }