*,:after,:before{
    box-sizing:border-box
}
:root{
    --color-text:#fff;
    --color-bg:#4732ab;
    --color-link:#fff;
    --color-link-hover:#fff;
    --page-padding:1.5rem 2rem;
    font-size:16px
}
body{
    color:var(--color-text);
    background-color:var(--color-bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background-image:linear-gradient(#0b0bef 0%,#3508e7 10%,#4a08e2 20%,#5c08e2 30%,#650adb 40%,#6f0ed8 50%,#7318c3 60%,#7220ac 70%,#6c2697 80%,#af1dbf 90%,#501cca 100%);
    margin:0;
    font-family:area-normal,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
    overflow-x:hidden
}
.js .loading:before,.js .loading:after{
    content:"";
    z-index:1000;
    position:fixed
}
.js .loading:before{
    width:100%;
    height:100%;
    background:var(--color-bg);
    top:0;
    left:0
}
.js .loading:after{
    width:60px;
    height:60px;
    opacity:.4;
    background:var(--color-link);
    border-radius:50%;
    margin:-30px 0 0 -30px;
    animation:.7s linear infinite alternate forwards loaderAnim;
    top:50%;
    left:50%
}
@keyframes loaderAnim{
    to{
        opacity:1;
        transform:scale(.5)
    }
}
a{
    color:var(--color-link);
    cursor:pointer;
    outline:none;
    text-decoration:none
}
a:hover{
    color:var(--color-link-hover);
    outline:none
}
a:focus{
    background:#d3d3d3;
    outline:none
}
a:focus:not(:focus-visible){
    background:0 0
}
a:focus-visible{
    background:0 0;
    outline:2px solid red
}
.unbutton{
    font:inherit;
    cursor:pointer;
    background:0 0;
    border:0;
    margin:0;
    padding:0
}
.unbutton:focus{
    outline:none
}
main{
    counter-reset:section
}
.splitting .word{
    white-space:nowrap
}
.frame{
    color:var(--color-title);
    padding:var(--page-padding);
    grid-gap:.5rem;
    grid-template:"title""prev""sponsor"/1fr;
    justify-content:start;
    place-items:start end;
    margin-bottom:3rem;
    font-size:14px;
    font-weight:600;
    display:grid
}
.frame a:not(.frame__title-back){
    white-space:nowrap;
    position:relative;
    overflow:hidden
}
.frame a:not(.frame__title-back):before{
    content:"";
    height:1px;
    width:100%;
    transform-origin:0%;
    background:currentColor;
    transition:transform .3s;
    position:absolute;
    top:90%
}
.frame a:not(.frame__title-back):hover:before{
    transform-origin:100%;
    transform:scaleX(0)
}
.frame__title{
    grid-area:title;
    align-items:center;
    display:flex
}
.frame__title-main{
    margin:0;
    font-size:1rem;
    font-weight:400
}
.frame__title-back{
    align-items:flex-end;
    display:flex;
    position:relative
}
.frame__title-back svg{
    fill:currentColor
}
.frame__prev{
    grid-area:prev;
    align-self:start
}
.intro{
    height:100vh;
    text-align:center;
    place-items:center;
    display:grid
}
.intro__title{
    place-items:center;
    margin:0;
    font-weight:300;
    line-height:.9;
    display:grid
}
.intro__title-pre{
    text-transform:uppercase;
    font-family:norman-stencil,sans-serif;
    font-size:clamp(2rem,10vw,9rem);
    font-weight:800
}
.intro__title-sub{
    font-size:clamp(1rem,6vw,2.75rem)
}
.intro__info{
    max-width:230px;
    opacity:.6;
    margin-bottom:4rem;
    padding-bottom:1rem;
    line-height:1.2;
    position:relative
}
.intro__info:after{
    content:"";
    width:1px;
    height:2rem;
    background:#fff;
    position:absolute;
    top:100%;
    left:50%
}
.content{
    width:100vw;
    padding:var(--page-padding);
    flex-direction:column;
    display:flex;
    position:relative
}
.content:last-child{
    padding-bottom:40vh
}
.content--full{
    padding:0
}
.content p{
    max-width:660px;
    margin:1.5rem auto;
    font-size:1.25rem
}
.content--highlight p{
    font-size:clamp(1rem,3vw,2rem)
}
.content__title{
    counter-increment:section;
    text-align:center;
    gap:2rem;
    font-size:12vw;
    line-height:.8;
    display:grid
}
.content__title:before{
    content:"."counter(section);
    text-align:center;
    margin-bottom:10vh;
    font-family:area-normal,sans-serif;
    font-size:1rem;
    font-weight:400;
    display:block
}
.content__title--sides{
    text-align:left;
    grid-template-rows:auto auto;
    grid-template-columns:100%;
    gap:2rem;
    display:grid
}
.content__title--sides span:last-child{
    justify-self:end
}
.font-1{
    font-family:wayfinder-cf,serif;
    font-weight:100
}
.font-2{
    font-family:campaign-serif,sans-serif;
    font-weight:400
}
.font-3{
    font-family:area-normal,sans-serif;
    font-weight:600
}
.font-4{
    font-family:campaign-serif,sans-serif;
    font-style:italic;
    font-weight:400
}
.font-5{
    text-transform:uppercase;
    font-family:zedou,sans-serif;
    font-weight:300
}
.font-6{
    font-family:afronaut,sans-serif;
    font-weight:400
}
.font-7{
    font-family:hoss-round-wide,sans-serif;
    font-weight:400
}
.font-8{
    text-transform:lowercase;
    font-family:monotalic,sans-serif;
    font-weight:400
}
.font-9{
    font-family:aziga,sans-serif;
    font-weight:400
}
.font-10{
    font-family:norman-stencil,sans-serif;
    font-weight:800
}
.font-11{
    font-family:neighbor,sans-serif;
    font-weight:400
}
.font-12{
    font-family:halogen,sans-serif;
    font-weight:700
}
.font-height{
    line-height:1.4
}
.font-larger{
    font-size:27vw
}
.font-upper{
    text-transform:uppercase
}
.font-sub{
    margin-top:2rem;
    font-size:5vw;
    display:block
}
.splitting .font-sub .word{
    grid-auto-flow:column;
    display:grid
}
.font-medium{
    margin-top:3rem;
    font-size:6vw
}
.char-wrap{
    display:inline-block;
    position:relative;
    overflow:hidden
}
@media screen and (min-width:53em){
    .frame{
        grid-gap:2rem;
        grid-template:"title prev sponsor"/auto auto 1fr;
        justify-items:start
    }
}
.splitting.cells img{
    width:100%;
    display:block
}
@supports ( display: grid ){
    .splitting.cells{
        visibility:hidden;
        background-size:cover;
        position:relative;
        overflow:hidden
    }
    .splitting .cell-grid{
        background:inherit;
        width:100%;
        height:100%;
        grid-template:repeat(var(--row-total),1fr)/repeat(var(--col-total),1fr);
        display:grid;
        position:absolute;
        top:0;
        left:0
    }
    .splitting .cell{
        background:inherit;
        position:relative;
        overflow:hidden
    }
    .splitting .cell-inner{
        background:inherit;
        visibility:visible;
        width:calc(100%*var(--col-total));
        height:calc(100%*var(--row-total));
        left:calc(-100%*var(--col-index));
        top:calc(-100%*var(--row-index));
        position:absolute
    }
    .splitting .cell{
        --center-x:calc((var(--col-total) - 1)/2);
        --center-y:calc((var(--row-total) - 1)/2);
        --offset-x:calc(var(--col-index) - var(--center-x));
        --offset-y:calc(var(--row-index) - var(--center-y));
        --distance-x:calc((var(--offset-x)*var(--offset-x))/var(--center-x));
        --distance-y:calc((var(--offset-y)*var(--offset-y))/var(--center-y))
    }
}
.splitting .word,.splitting .char{
    display:inline-block
}
.splitting .char{
    position:relative
}
.splitting .char:before,.splitting .char:after{
    content:attr(data-char);
    visibility:hidden;
    -webkit-user-select:none;
    user-select:none;
    transition:inherit;
    position:absolute;
    top:0;
    left:0
}
.splitting{
    --word-center:calc((var(--word-total) - 1)/2);
    --char-center:calc((var(--char-total) - 1)/2);
    --line-center:calc((var(--line-total) - 1)/2)
}
.splitting .word{
    --word-percent:calc(var(--word-index)/var(--word-total));
    --line-percent:calc(var(--line-index)/var(--line-total))
}
.splitting .char{
    --char-percent:calc(var(--char-index)/var(--char-total));
    --char-offset:calc(var(--char-index) - var(--char-center));
    --distance:calc((var(--char-offset)*var(--char-offset))/var(--char-center));
    --distance-sine:calc(var(--char-offset)/var(--char-center));
    --distance-percent:calc((var(--distance)/var(--char-center)))
}
 a:link, a:hover, a:visited, a:active, a:focus {
     border-bottom: 1px solid white;
}

.text-center {
    text-align: center;
}

h3 {
    font-size: 1.8em
}

@media screen and (max-width: 992px) {
    h3 {
        font-size: 1.4em
    }
  }

ul {
    list-style: none;
    padding: 0;
    margin: 20px;
}
ul li {
    padding: 0;
    margin: 0;
}

footer {
    padding: 100px 0;
}

html, body {
    width: 100vw;
    overflow-x: hidden;
}