main > h1 {
    /* display: none; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 25vw;
    margin: 0;
    opacity: 0.3;
    /* filter: blur(5px); */
    color: white;
}
:root {
    --msk-triangle: conic-gradient(
        at center bottom,
        red 30deg,
        transparent 0deg 330deg,
        red 0deg
    );
}
main > h1::after {
    content: "";
    position: absolute;
    left: 0%;
    /* top: 25%; */
    transform: translate(50%, 50%);
    z-index: 2;
    width: 2em;
    aspect-ratio: 1.154700538379251 / 1;
    background-image: conic-gradient(at center bottom, #333 30deg, transparent 0deg 330deg, #333 0deg), conic-gradient(from 0deg at 53% 50%, transparent 60deg, #84e72e 150deg, 220deg, #ff0 285deg, transparent 300deg), linear-gradient(120deg, #00bcff 20%, #00e190 60%);
    background-size: 40% 40%, cover, cover;
    background-repeat: no-repeat;
    background-position: center 33%, center, center;
    -webkit-mask-image: var(--msk-triangle);
    mask-image: var(--msk-triangle);
    -webkit-mask-size: calc(100% + .5px) calc(100% + .1px);
    mask-size: calc(100% + .5px) calc(100% + .1px);
    -webkit-mask-position: center;
    mask-position: center;
    transform: rotate(15deg);
    transform-origin: center 33%;
    background-image: conic-gradient(from var(--from, 0deg) at 53% 50%, transparent 60deg, #84e72e 150deg, 220deg, #ff0 285deg, transparent 300deg), linear-gradient(120deg, #00bcff 20%, #00e190 60%);
        background-size: cover;
        background-position: center;
        -webkit-mask-image: var(--msk-triangle), var(--msk-triangle);
        mask-image: var(--msk-triangle), var(--msk-triangle);
        mask-mode: alpha;
        -webkit-mask-size: 40% 40%, calc(100% + .5px) calc(100% + .1px);
        mask-size: 40% 40%, calc(100% + .5px) calc(100% + .1px);
        -webkit-mask-position: center 33%, center;
        mask-position: center 33%, center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
}

/* TODO update text size depends on container width */


main {
    height: 100%;
    /* overflow-x: hidden;  */
    overflow: hidden;
    position: relative;
}
main > div {
    height: 100%;
    width: 100%;
    overflow: scroll;
}
main div > ul:nth-of-type(1) {
    align-self: center;
    position: relative;
    aspect-ratio: 1;
    width: 140vw;
    height: 140vh;
    padding: 0;
    margin: 0;
    min-width: 100em;
    min-height: 100em;
    /* TODO make min width */
}

main div > ul:nth-of-type(1) > li {
    /* border: 1px solid red; */
    position: absolute;
    list-style: none;
    height: 20%;
    width: 15.71%;
    /* TODO MAKE % */
    /* height: 17%;
    width: 18%; */
    display: flex;
    justify-content: center;
    align-items: center;
    & a, button {
        width: 80%;
        height: 100%;
        background-color: rgb(238, 238, 238);
        border: solid black 1px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 2em;
        display: flex;
        align-items: start;
        text-align: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        /* & div {
            background-color: gray;
            overflow: hidden;
            display: flex;
            justify-content: center; */
            /* position: relative; */
            & p {
                margin: 0;
                order: 1;
                color: white;
                z-index: 99;
                background-color: #33333347;
                background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
                height: fit-content;
                width: 100%;
                display: flex;
                justify-content: center;
                padding-bottom: 1em;
            }
            & img {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        /* } */
    }
    & a:focus-visible {
        border: solid hotpink 10px;
    }
}

main div > ul:nth-of-type(1) > li:nth-of-type(1){
    top: 4vh;
    left: 28vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(2){
    top: 7vh;
    left: 55vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(3){
    top: 6vh;
    left: 81vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(4){
    top: 6vh;
    left: 112vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(5){
    top: 10vh;
    left: 3vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(6){
    top: 40vh;
    left: 36vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(7){
    top: 35vh;
    left: 90vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(8){
    top: 46vh;
    left: 115vw;
}
main div > ul:nth-of-type(1) > li:nth-of-type(9){
    top: 79vh;
    left: 10vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(10){
    top: 72vh;
    left: 36vw;
}
main  div > ul:nth-of-type(1) > li:nth-of-type(11){
    top: 38vh;
    left: 62vw;
}
main  div > ul:nth-of-type(1) > li:nth-of-type(12){
    top: 69vh;
    left: 88vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(13){
    top: 78vh;
    left: 115vw;
}
main div  > ul:nth-of-type(1) > li:nth-of-type(14){
    top: 110vh;
    left: 4vw;
}
main  div > ul:nth-of-type(1) > li:nth-of-type(15){
    top: 107vh;
    left: 34vw;
}
main  div > ul:nth-of-type(1) > li:nth-of-type(16){
    top: 110vh;
    left: 82vw;
}
main  div > ul:nth-of-type(1) > li:nth-of-type(17){
    top: 107vh;
    left: 105vw;
}
main  div > ul:nth-of-type(1) > li:nth-of-type(18){ 
     /* TODO change all values again */
    top: 70vh;
    left: 63vw;
}
main  div > ul:nth-of-type(1) > li:nth-of-type(19){
    top: 101vh;
    left: 58vw;
}
main  div > ul:nth-of-type(1) > li:nth-of-type(20){
    top: 45vh;
    left: 2vw;
}

@supports (animation-range: entry-crossing) {
    main div > ul:nth-of-type(1) > li > a p{
      overflow: hidden; 
      display: block;
      font-size: 7rem; 

      & > span {
        padding: 0.3em;
        inline-size: max-content; 
        line-height: 1;   
        transform-origin: 0 0;    
        animation: apply-text-ratio linear; 
        animation-timeline: view(inline);  
        animation-range: entry-crossing;  
  
        display: block;           
        scroll-snap-align: start; 
        contain: layout;         
      }
    }
  }

  @keyframes apply-text-ratio {
    from {
      transform: scale(0); 
      margin-block-end: -1lh; 
    }
  }
/* src: https://kizu.dev/fit-to-width-text/ */