/* box sizing border box on all */
*,
*::before,
*::after {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

:root {
    /* zooms in 2x, everything is in rem not just text */
    font-size: 32px;
}

/* font-face with file "font.ttf" */
@font-face {
    font-family: "font";
    src: url("font.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}


body {
   font-family: "font", "AvenirNext LT Pro", "Avenir Next", system-ui, sans-serif;
   margin: 0;
   padding: 0;
   overflow: clip;
}

.ves-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-weight: 700;
    line-height: 0.8;
    font-size: 6rem;

    /* text-shadow: 0px 0.125rem 0.25rem rgb(0 0 0 / 20%); */
    user-select: none;


    .upper {
        color: hsl(0, 0%, 100%);
        text-shadow: 0 0 0.25rem #1d1d1d77;
        /* -webkit-text-stroke: 0.25rem #1d1d1d; */
        paint-order: stroke fill;
        transform: translateX(-2.5rem);
        /* diabolically, need to kern the L and the S */
        & span:nth-child(1) {
            margin-right: 0.25rem;
        }
    }

    .lower {
        color: hsl(28, 87%, 50%);
        text-shadow: 0 0 0.25rem #1d1d1d77;
        /* -webkit-text-stroke: 0.25rem #1d1d1d; */
        paint-order: stroke fill;
        transform: translateX(2.5rem);
    }
}
.ves-gradient {
    /* background: linear-gradient(in oklab 165deg, #ff8a46 10%, #fb1661 50%, #3b156a 90%); */
    background: linear-gradient(in oklch 165deg, #ff8a46 10%, #3b156a 90%);
    background-size: 100dvw 100dvh;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    position: absolute;
    overflow: clip;
    width: 100dvw;
    height: 100dvh;
    transform-origin: center;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    mix-blend-mode: overlay;
}

* {
    box-sizing: border-box;
}

.ves-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0;
    gap: 1rem;
    height: 2rem;
    margin-block: 0.5rem;
    width: auto;
    /* translate: -50%; */
}

.ves-grid {
    display: grid;
    /* grid-template-columns: repeat(9, 1rem); */
    grid-auto-rows: 1rem;
    gap: 0;
    margin: 0;
    padding: 0;
    /* width: 100%; */
    align-items: stretch;
    mix-blend-mode: overlay;
}


.pill {
    background-color: rgb(206, 206, 206);
    
    /* border: solid 2px rgb(180, 180, 180); */
    /* align-self: stretch; */
    /* height: 100%; */
    box-shadow: 0 0 12px 2px rgba(206, 206, 206, 0.15);

    grid-row-end: span 2;
}

.pill.dot {
    grid-column-end: span 2;
    border-radius: 50%;
}

.pill.small {
    grid-column-end: span 6;
    border-radius: 9999px;
}

.pill.medium {
    grid-column-end: span 10;
    border-radius: 9999px;
}

.pill.large {
    grid-column-end: span 12;
    border-radius: 9999px;
}

@keyframes pill-pop {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes pill-fade-in {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: var(--target-opacity, 1);
    transform: scale(1);
  }
}