@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --widget-bg-color: rgba(31, 143, 255, 0.1);
    --widget-color-a: #ffffff;
    --widget-color-b: #e0e0e0;
    --widget-color-c: #1d1d1d;
    --widget-font-size: 18px;
    --widget-height: calc(var(--widget-font-size) * 2.125);
    --widget-padding: 0 0.625em; /* 0 10px */
    --icon-fill-color: #ffffff;
    --icon-size: .9em; /* 16px relative to font size */
    --divider-height: 50%; /* Height of the divider */
    --divider-width: 0.1250em; /* 1px relative to font size */
    --divider-color: rgba(255, 255, 255, 0.25); /* Color of the divider */
}

body {
    margin: 0;
}

.widget {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
    font-family: "Noto Sans", sans-serif;
    z-index: 98;
    user-select: none;
}

.widget-section {
    color: var(--widget-color-a);
    background-color: var(--widget-bg-color);
    font-size: var(--widget-font-size);
    padding: .5em 1em;
    display: flex;
    gap: 1.5em;
    align-items: center;
    white-space: nowrap;
}

.widget-section:first-child {
    padding-left: 1em;
}


.widget-section div {
    display: flex;
    align-items: center;
}

.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: 0.5em; /* 5px relative to font size */
    display: flex;
    align-items: center;
}

.icon svg {
    width: 100%;
    height: 100%;
    fill: var(--widget-color-a);
    transform: translateY(.5px);
}

.transform-up {
    transform: translateY(-1px);
}

.alt svg {
    width: 100%;
    height: 100%;
    fill: var(--widget-color-b);
}

.dark svg {
    fill: var(--widget-color-c);
}

.widget h2 {
    margin: 1em 0 0 0;
    font-weight: 600;
    font-size: calc(var(--widget-font-size) * 1.2);
    letter-spacing: .0125em;
}

.widget p {
    margin: 0;
    font-size: calc(var(--widget-font-size) * .8);
    font-weight: 300;
    color: var(--widget-color-b);
}

.widget-section h3 {
    margin: 0;
    font-weight: 600;
    font-size: var(--widget-font-size);
    letter-spacing: .0125em;
}

.widget-section h4 {
    margin: 0;
    color: var(--widget-color-b);
    font-weight: 400;
    font-size: var(--widget-font-size);
    letter-spacing: .0125em;
}

.widget-section p {
    margin: 0;
    margin-left: 0.5em; /* 10px relative to font size */
    color: var(--widget-color-b);
    font-size: var(--widget-font-size);
}

.kick svg {
    fill: #53fc18;
}

.smallerSVG {
    transform: scale(.9) translateY(.5px);
}

.justify-right {
    margin-left: auto;
}

#spotify-artist::after {
    content: '-';
    margin-left: .5em;
}

#depo-amount::before {
    content: '-$';
}

#withdraw-amount::before, #vault-amount::before {
    content: '$';
}

.on {
    color: #53fc18 !important;
}

.off {
    color: var(--widget-color-b);
}

.hide {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.flash {
	animation: blink-2 1.25s infinite both;
}

@keyframes blink-2 {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
    100% {
      opacity: 1;
    }
  }