@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
@font-face {
  font-family: "Silka Bold";
  src: url(../fonts/Silka-Bold.woff);
}
:root {
  --page-landing: #9EAAFF;
  --title-left: #FFFFFF;
  --title-right: #D8DDFF;
  --title-bubble: #808BF0;
  --links: #D4EEF8;
  --links-hover: #FFFFFF;
  --footer-info: #FFFFFF;
  --footer-info-highlight: #D4EEF8;
  --dots: #FFFFFF;
  --button-bg: #99A6FF;
  --button-info: #FFFFFF;
  --button-border: rgba(219, 224, 255, 0.72);
  --button-highlight: #A9B4FF;
  --button-info-highlight: #D4EEF8;
  --button-semiline: #D3EFFF;
  --button-plate: #98A5FC;
  --button-connected: #A6B2FF;
  --icon: #D3EFFF;
  --icon-dark: #808BF0;
  --icon-badge: #808BF0;
  --icon-badge-light: #B3E3FE;
  --bokeh: rgba(128, 139, 240, 0.27);
  --page-connected: #808BF0;
  --copy-bg: #9EAAFF;
  --copy-id: #FFFFFF;
  --copy-button: #7987E8;
  --copy-icon: #FFFFFF;
  --logout-bg: #626DCF;
  --logout-info: #FFFFFF;
  --tab-dark: #808BF0;
  --tab-opaque: #8EC1F0;
  --tab-light: #B3E3FE;
  --input-bg: #ACB6FF;
  --input-placeholder: #D4EEF8;
  --input-focus: #FFFFFF;
  --tooltip-bg: #616DBB;
  --tooltip-info: #FFFFFF;
  --tooltip-icon: #C8CFFF;
  --tooltip-icon-hover: #FFFFFF;
}

footer, div.dots, div.bokeh-row, div.bokeh-wrap, div.background, button.copy, div.copy-wrap, div.id-wrap, div.tooltip-window, div.icon-wrap, button.input-button, input, form.input-wrap, a.button div.info-wrap, div.platform-wrap div.info-wrap, a.button.style-box, a.button.style-wide, div.platform-wrap, div.button-wrap, div.bubble-wrap, div.title-wrap, div.info-wrap, main.se-platforms, main.data, section.half-right, section.half-left, div#main-container, body {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  margin: 0px;
  background: #202020;
  background: var(--page-landing);
  cursor: url("../assets/cursor.svg"), auto;
  overflow: hidden;
}

span, input, button, a {
  font-family: "Lexend", monospace;
  text-decoration: none;
  border: none;
  outline: none;
}

button:hover, a:hover {
  filter: brightness(1.05);
}

button {
  background: transparent;
  cursor: pointer;
}

svg {
  flex-shrink: 0;
}

div#main-container {
  width: 100%;
  height: 100%;
}

section.half-left {
  background: transparent;
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: 50px;
  position: absolute;
  bottom: 0px;
}

section.half-right {
  background: var(--page-connected);
  width: 40%;
  height: 100%;
  padding: 50px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 30px;
  transform: translateX(calc(100% - 50px));
  position: absolute;
  bottom: 0px;
  right: 0px;
}

main.data {
  width: auto;
  height: auto;
  flex-direction: column;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

main.se-login {
  gap: 50px;
}
main.se-login div.bubble-wrap {
  top: -5px;
  right: -40px;
}
main.se-login div.button-wrap {
  align-items: center;
}

main.se-platforms {
  width: 100%;
  height: auto;
  opacity: 0;
  gap: 80px;
  pointer-events: none;
}
main.se-platforms span.left {
  margin-right: 20px;
}
main.se-platforms div.bubble-wrap {
  top: -20px;
  left: 120px;
}
main.se-platforms div.button-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
}
main.se-platforms a.button, main.se-platforms div.platform-wrap {
  background: var(--button-bg);
}

a.user-connected, div.user-connected {
  background: var(--button-connected) !important;
}
a.user-connected svg.badge, div.user-connected svg.badge {
  fill: var(--icon-badge-light);
}
a.user-connected svg.icon, div.user-connected svg.icon {
  color: var(--icon-dark);
}
a.user-connected svg.arrow, div.user-connected svg.arrow {
  visibility: hidden;
}
a.user-connected form.input-wrap, div.user-connected form.input-wrap {
  filter: brightness(1.05);
}
a.user-connected button.input-button svg.arrow, div.user-connected button.input-button svg.arrow {
  display: none;
}
a.user-connected button.input-button svg.checkmark, div.user-connected button.input-button svg.checkmark {
  display: initial;
}

div.info-wrap {
  width: 100%;
  height: auto;
  flex-direction: column;
}

div.title-wrap {
  width: auto;
  height: auto;
  margin-top: 20px;
  position: relative;
}

span.title {
  font-family: "Silka Bold", sans-serif;
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -3.2px;
}
span.title.left {
  color: var(--title-left);
}
span.title.right {
  color: var(--title-right);
}

div.subtitle-wrap {
  margin-top: -5px;
}

span.subtitle {
  font-size: 15px;
  font-weight: 400;
  color: var(--title-left);
  letter-spacing: -0.15px;
}
span.subtitle b {
  font-weight: 500;
}

div.bubble-wrap {
  width: auto;
  height: auto;
  position: absolute;
}

span.bubble {
  font-size: 12px;
  color: var(--button-info);
  position: absolute;
  margin-top: -2px;
  margin-right: -5px;
}

svg.bubble-bg {
  fill: var(--title-bubble);
}

div.button-wrap {
  width: auto;
  height: auto;
  isolation: isolate;
  row-gap: 50px;
  -moz-column-gap: 30px;
       column-gap: 30px;
}

div.platform-wrap {
  background: var(--button-bg);
  width: 270px;
  height: auto;
  padding: 20px 0px 0px 0px;
  border: solid 2px var(--button-border);
  border-radius: 20px;
  position: relative;
  flex-direction: column;
  gap: 10px;
}

a.button.style-wide {
  width: 300px;
  height: 40px;
  padding: 0px;
  border: solid 2px var(--button-border);
  border-radius: 50px;
  flex-direction: row;
  gap: 0px;
  position: absolute;
}
a.button.style-wide:before {
  content: "";
  background-color: var(--button-semiline);
  width: 247px;
  height: 44px;
  position: absolute;
  left: -2px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='247' height='44' viewBox='0 0 247 44' fill='none'%3E%3Cpath d='M246 43H22C10.402 43 1 33.598 1 22V22C1 10.402 10.402 1 22 1H84.6708' stroke-width='2' stroke-linecap='round' stroke='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='247' height='44' viewBox='0 0 247 44' fill='none'%3E%3Cpath d='M246 43H22C10.402 43 1 33.598 1 22V22C1 10.402 10.402 1 22 1H84.6708' stroke-width='2' stroke-linecap='round' stroke='black'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  pointer-events: none;
}
a.button.style-wide div.button-plate {
  background: var(--button-plate);
  width: 84px;
  height: 84px;
  border-radius: 100px;
  position: absolute;
  right: -30px;
  z-index: -20;
  opacity: 0;
}
a.button.style-wide:not(.user-connected):hover div.button-plate {
  opacity: 1;
}
a.button.style-wide div.info-wrap {
  border-radius: 100px;
  flex-direction: row;
  gap: 0px;
}
a.button.style-wide div.info-wrap:before {
  border-radius: 50px;
}
a.button.style-wide span.button-info {
  margin-top: 0px;
}
a.button.style-wide div.icon-wrap {
  left: 15px;
  top: -25px;
}
a.button.style-wide svg.arrow {
  position: absolute;
  right: 25px;
}

a.button.style-box {
  width: 270px;
  height: auto;
  padding: 20px 0px;
  border: solid 2px var(--button-border);
  border-radius: 20px;
  position: relative;
  flex-direction: column;
  gap: 10px;
}

a.button div.info-wrap, div.platform-wrap div.info-wrap {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  gap: 10px;
}

section.half-left a.button div.info-wrap:before {
  content: "";
  background: var(--button-highlight);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  transform: translateX(-100%);
  z-index: -10;
}

span.button-info {
  font-size: 16px;
  font-weight: 400;
  color: var(--button-info);
  margin-top: 10px;
}
span.button-info b {
  font-weight: 500;
  color: var(--button-info-highlight);
}

form.input-wrap {
  background: var(--input-bg);
  width: calc(100% - 30px);
  height: auto;
  padding: 8px 10px 8px 20px;
  border-radius: 50px;
  box-sizing: border-box;
}
form.input-wrap:hover {
  filter: brightness(1.05);
}
form.input-wrap input {
  height: 100%;
}

input {
  background: transparent;
  width: 100%;
  height: auto;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--input-placeholder);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
          mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
input::-moz-placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}
input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}
input:focus {
  color: var(--input-focus);
}

button.input-button {
  width: 30px;
  height: 20px;
}
button.input-button:hover {
  opacity: 0.5;
}
button.input-button svg.checkmark {
  display: none;
}

div.icon-wrap {
  width: auto;
  height: auto;
  position: absolute;
  top: -25px;
}

svg.icon {
  color: var(--icon);
  position: absolute;
}
svg.icon.se {
  margin: 2px 0px 0px 4px;
}
svg.icon.twitch {
  margin: 3px 0px 0px 3px;
}
svg.icon.spotify {
  margin: -1px 0px 0px -1px;
}
svg.icon.pulsoid {
  margin: 2px 0px 0px 2px;
}

svg.badge {
  fill: var(--icon-badge);
}

div.tooltip-wrap {
  width: auto;
  height: auto;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 100;
}
div.tooltip-wrap:hover svg.tooltip {
  color: var(--tooltip-icon-hover);
}
div.tooltip-wrap:hover div.tooltip-window {
  opacity: 1;
  transform: scale(1);
}

div.tooltip-window {
  background: var(--tooltip-bg);
  width: auto;
  height: auto;
  padding: 8px 14px;
  border-radius: 6px;
  flex-direction: column;
  position: absolute;
  top: -35px;
  left: calc(100% + 15px);
  transform: scale(0.9);
  pointer-events: none;
  opacity: 0;
}

span.tooltip-info {
  font-size: 10px;
  font-weight: 500;
  color: var(--tooltip-info);
  text-align: center;
  line-height: 14px;
  white-space: nowrap;
}

svg.tooltip {
  color: var(--tooltip-icon);
  width: 25px;
  height: 25px;
}

div.id-wrap {
  width: 100%;
  max-width: 400px;
  height: auto;
  flex-direction: column;
  gap: 15px;
}

span.id {
  font-size: 14px;
  color: var(--copy-id);
  letter-spacing: 0.42px;
  width: 100%;
  max-width: calc(100% - 50px);
  margin-right: 10px;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
          mask-image: linear-gradient(to right, black 80%, transparent 100%);
  overflow: hidden;
}

div.label-wrap {
  width: auto;
  height: auto;
  margin-top: 30px;
}

div.label-wrap svg.arrow {
  margin-left: 20px;
  margin-right: 10px;
}

span.label {
  font-size: 14px;
  font-weight: 500;
  color: var(--button-info);
}

div.copy-wrap {
  background: var(--copy-bg);
  width: 100%;
  height: auto;
  padding: 5px;
  padding-left: 20px;
  border-radius: 50px;
  box-sizing: border-box;
}

button.copy {
  background: var(--copy-button);
  min-width: 50px;
  height: 30px;
  border: none;
  border-radius: 50px;
}
button.copy svg {
  color: var(--copy-icon);
}
button.copy:hover {
  cursor: pointer;
}
button.copy:active {
  transform: scale(0.9);
}
button.copy:active svg {
  color: var(--icon-badge-light);
}

div.logout-wrap {
  width: auto;
  height: auto;
  margin-top: 20vh;
  margin-bottom: 50px;
}

a.logout {
  background: var(--logout-bg);
  width: auto;
  height: auto;
  padding: 12px 25px 15px 25px;
  border-radius: 100px;
}

span.logout-info {
  font-size: 14px;
  font-weight: 600;
  color: var(--logout-info);
}

div.background {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  z-index: -10;
}

div.bokeh-wrap {
  width: auto;
  height: auto;
  flex-direction: column;
  position: absolute;
}
div.bokeh-wrap.bl {
  bottom: -75px;
  left: 0px;
}
div.bokeh-wrap.tr {
  top: -75px;
  right: 25px;
  align-items: flex-end;
}

div.bokeh {
  background: var(--bokeh);
  width: 150px;
  height: 150px;
  border-radius: 100px;
}

svg.sticker {
  position: absolute;
}
svg.sticker.heart {
  top: 220px;
  right: 0px;
}
svg.sticker.star {
  bottom: 80px;
  right: -50px;
}

div.decor-wrap {
  --width-decors: 40px;
  width: var(--width-decors);
  height: 100%;
  position: absolute;
  top: 0px;
  left: calc(var(--width-decors) * -1);
}

div.tab {
  width: var(--width-decors);
  position: absolute;
}

div.tab.dark {
  background: var(--tab-dark);
  height: 300px;
  margin-top: -50px;
  transform: skewY(45deg);
  filter: drop-shadow(2px 0px 0px var(--tab-dark));
}

div.tab.opaque {
  background: var(--tab-opaque);
  height: 290px;
  border-radius: 0px 0px 0px 10px;
  transform: skewY(45deg);
  opacity: 0.5;
  mix-blend-mode: multiply;
}

div.tab.light {
  background: var(--tab-light);
  height: 500px;
  border-radius: 0px 0px 0px 10px;
  transform: skewY(45deg);
}

div.dots {
  width: auto;
  height: auto;
  gap: 10px;
}

div.dot {
  background: var(--dots);
  width: 2px;
  height: 2px;
  border-radius: 10px;
}

footer {
  width: 100%;
  height: auto;
  padding: 50px;
  flex-direction: column;
  position: absolute;
  bottom: 0px;
  gap: 20px;
}

footer * {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.15px;
}
footer * b {
  font-weight: 500;
}

div.ticket-wrap {
  display: none;
}
div.ticket-wrap span {
  color: var(--footer-info);
}
div.ticket-wrap span.highlight {
  color: var(--footer-info-highlight);
}
div.ticket-wrap a {
  color: inherit;
}
div.ticket-wrap a:hover {
  color: var(--links-hover);
}

a.links {
  color: var(--links);
}
a.links:hover {
  color: var(--links-hover);
  transform: translateY(-2px);
}

span.dot-divider {
  color: white;
  margin: 0px 10px;
}

*.hide {
  display: none !important;
}

.theme.se-connected section.half-left {
  width: 60%;
}
.theme.se-connected main.se-platforms {
  opacity: 1;
  pointer-events: initial;
}
.theme.se-connected div.ticket-wrap {
  display: initial;
}
.theme.se-connected div.terms-wrap {
  display: none;
}
.theme.se-connected div.bokeh-wrap {
  opacity: 0 !important;
}

@media (max-width: 1100px) {
  main.se-platforms div.button-wrap {
    grid-template-columns: 1fr;
  }
}