:root {
    --ease-linear: cubic-bezier(0.25,0.25,0.75,0.75);
    --ease-in-sine: cubic-bezier(0.47,0,0.745,0.715);
    --ease-out-sine: cubic-bezier(0.39,0.575,0.565,1);
    --ease-in-out-sine: cubic-bezier(0.445,0.05,0.55,0.95);
    --ease-in-quad: cubic-bezier(0.55,0.085,0.68,0.53);
    --ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
    --ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
    --ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
    --ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
    --ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
    --ease-in-quart: cubic-bezier(0.895,0.03,0.685,0.22);
    --ease-out-quart: cubic-bezier(0.165,0.84,0.44,1);
    --ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
    --ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
    --ease-out-quint: cubic-bezier(0.23,1,0.32,1);
    --ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
    --ease-in-expo: cubic-bezier(0.95,0.05,0.795,0.035);
    --ease-out-expo: cubic-bezier(0.19,1,0.22,1);
    --ease-in-out-expo: cubic-bezier(1,0,0,1);
    --ease-in-circ: cubic-bezier(0.6,0.04,0.98,0.335);
    --ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
    --ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
    --ease-in-back: cubic-bezier(0.6,-0.28,0.735,0.045);
    --ease-out-back: cubic-bezier(0.25,2,0.5,0.9);
    --ease-in-out-back: cubic-bezier(0.68,-0.55,0.265,1.55);
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --padding: 2rem;
    --min-padding: -2rem;
    --color-white: #fff;
    --color-grey: #727272;
    --color-black: #222;
    --color-primary: #222;
    --color-secondary: #eee;
    --color-blue: #19a0fc;
    --color-text: #b8b8b8;
    --radius: 1rem;
    --outline-radius: 1.7rem;
    --gap: 1rem;
    --row-gap: 5rem;
    --max-width: 1440px;
    --header-height: 5rem;
    --padding-top: 5rem;
    --padding-bottom: 3rem
}

@media only screen and (prefers-color-scheme: light) {
    :root {
        --color-secondary:#ffffff;
        --color-primary: #222;
        --color-text: #969696;
    }
}

@media only screen and (min-width: 600px) {
    :root {
        --padding:5rem;
        --min-padding: -5rem;
        --gap: 2rem;
        --row-gap: 10rem;
        --header-height: 5.5rem;
        --padding-top: 5rem;
        --padding-bottom: 9rem
    }
}

@media only screen and (min-width: 960px) {
    :root {
        --padding:5.5rem;
        --min-padding: -5.5rem
    }
}

@media only screen and (max-height: 500px)and (min-aspect-ratio:16/9) {
    :root {
        --padding:2rem;
        --min-padding: -2rem
    }
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-color: #222;
    background-color: var(--color-primary);
    box-sizing: border-box;
    font-size: 2.4154589372vw
}

@media only screen and (max-width: 768px)and (orientation:landscape) {
    html {
        font-size:1.4285714286vw
    }
}

@media only screen and (min-width: 600px) {
    html {
        font-size:.8333333333vw
    }
}

@media only screen and (min-width: 960px) {
    html {
        font-size:.6944444444vw
    }
}

@media only screen and (min-width: 1440px) {
    html {
        font-size:10px
    }
}

body {
    font-family: "Formula Condensed";
    font-weight: 700;
    overflow-x: hidden;
    position: relative;
    background-color: #222;
}

*,:after,:before {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0
}

button {
    background: 0 0;
    border: none;
    border-radius: 0;
    display: inline-block;
    outline: 0;
    width: auto
}

a {
    color: currentColor;
    -webkit-text-decoration: none;
    text-decoration: none
}

code[class*=language-],pre[class*=language-] {
    word-wrap: normal;
    background: 0 0;
    color: #000;
    font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
    font-size: 1em;
    -webkit-hyphens: none;
    hyphens: none;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    text-align: left;
    text-shadow: 0 1px #fff;
    white-space: pre;
    word-break: normal;
    word-spacing: normal
}

code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection {
    background: #b3d4fc;
    text-shadow: none
}

code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection {
    background: #b3d4fc;
    text-shadow: none
}

@media print {
    code[class*=language-],pre[class*=language-] {
        text-shadow: none
    }
}

pre[class*=language-] {
    margin: .5em 0;
    overflow: auto;
    padding: 1em
}

:not(pre)>code[class*=language-],pre[class*=language-] {
    background: #f5f2f0
}

:not(pre)>code[class*=language-] {
    border-radius: .3em;
    padding: .1em;
    white-space: normal
}

.token.cdata,.token.comment,.token.doctype,.token.prolog {
    color: #708090
}

.token.punctuation {
    color: #999
}

.token.namespace {
    opacity: .7
}

.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag {
    color: #905
}

.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string {
    color: #690
}

.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url {
    background: hsla(0,0%,100%,.5);
    color: #9a6e3a
}

.token.atrule,.token.attr-value,.token.keyword {
    color: #07a
}

.token.class-name,.token.function {
    color: #dd4a68
}

.token.important,.token.regex,.token.variable {
    color: #e90
}

.token.bold,.token.important {
    font-weight: 700
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

.nuxt-progress {
    background-color: #000;
    height: 2px;
    left: 0;
    opacity: 1;
    position: fixed;
    right: 0;
    top: 0;
    transition: width .1s,opacity .4s;
    width: 0;
    z-index: 999999
}

.nuxt-progress.nuxt-progress-notransition {
    transition: none
}

.nuxt-progress-failed {
    background-color: red
}

#container {
    padding-top: var(--padding);
    transition: opacity .2s ease
}


#container[visible] {
    opacity: 1!important
}

.hamburger-menu {
    left: 50%;
    position: fixed!important;
    top: 0;
    transform: translateX(-50%)
}

.menu-enter-active,.menu-leave-active {
    transition: opacity .25s ease-out
}

.menu-enter,.menu-leave-active {
    opacity: 0
}

.page-enter-active {
    transition: opacity 1s var(--ease-out-cubic)
}

.page-leave-active {
    transition: opacity .25s var(--ease-out-cubic)
}

.page-enter,.page-leave-active {
    opacity: 0
}
/*
header {
    align-items: center;
    color: var(--color-secondary);
    display: flex;
    height: var(--header-height);
    justify-content: space-between;
    left: calc(var(--padding) + var(--safe-area-inset-left));
    position: sticky;
    top: calc(1rem + var(--safe-area-inset-top));

    width: calc(100% - var(--padding)*2 - var(--safe-area-inset-left) - var(--safe-area-inset-right));
    z-index: 2
}
*/
@media only screen and (min-width: 600px) {
    header {
        top: 2.5rem;
    }
}



header .bar,header .bar:after,header .bar:before {
    border-radius: 50rem;
    height: 100%;
    position: absolute
}

header .bar:after,header .bar:before {
    background-color: var(--color-secondary);
    content: "";
    top: 0;
    width: 75%
}

header .bar:before {
    left: -.75rem;
    transform: rotate(180deg) translateX(var(--padding))
}

header .bar:after {
    right: -.75rem;
    transform: translateX(var(--padding))
}


header>* {
    position: relative
}

header>*>span {
    display: block;
    overflow: hidden
}

header>*>span>span {
    display: block;
    padding-top: .04em
}



header>:nth-child(2)>span>span {
    transition-delay: .07s!important
}

header>:nth-child(3)>span>span {
    transition-delay: .14s!important
}

header>:nth-child(4)>span>span {
    transition-delay: .21s!important
}

header>:nth-child(5)>span>span {
    transition-delay: .28s!important
}

header[visible]>*>span>span {
    transform: none!important;
    transition: 1.25s transform var(--ease-in-out-quint)
}

header .bar:after,header .bar:before,header>* {
    transition: transform .25s ease-out
}

header a,header p {
    color: currentColor;
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 800;
    height: .8em;
    letter-spacing: 0.5px;
    line-height: 1;
    position: relative;
    text-transform: uppercase;
    top: .05em
}

header a {
    height: .84em;
    outline: 0;
    position: relative
}

header a:before {
    background-color: hsla(0,0%,100%,.1);
    border: .25rem solid hsla(0,0%,100%,.2);
    border-radius: var(--radius);
    content: "";
    height: calc(100% + 1rem);
    left: -1rem;
    opacity: 1;
    position: absolute;
    top: -.5rem;
    transition: .1s opacity var(--ease-in-out-cubic),.1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem)
}

header a:focus-visible:before {
    opacity: 1;
    visibility: visible
}

header a:after {
    background-color: currentColor;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: .95em;
    transform: scaleY(0);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%
}

@media(hover: none)and (pointer:coarse) {
    header a:active:after {
        transform:scaleY(1)
    }
}

@media(hover: hover)and (pointer:fine) {
    header a:hover:after {
        transform:scaleY(1)
    }
}

@media only screen and (max-width: 599px) {
    header .email,header .location {
        display:none
    }
}

header .hamburger {
    box-sizing: content-box;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 2rem!important;
    height: .84em;
    justify-content: space-between;
    margin: 0 -.25rem;
    outline: 0;
    padding: .25rem;
    position: relative;
    width: 3.5rem
}

header .hamburger:before {
    background-color: hsla(0,0%,100%,.1);
    border: .25rem solid hsla(0,0%,100%,.2);
    border-radius: var(--radius);
    content: "";
    height: calc(100% + 2rem);
    left: -1rem;
    opacity: 1;
    position: absolute;
    top: -1rem;
    transition: .1s opacity var(--ease-in-out-cubic),.1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem)
}

header .hamburger:focus-visible:before {
    opacity: 1;
    visibility: visible
}

header .hamburger svg {
    fill: currentColor;
    height: 100%;
    overflow: visible;
    width: 100%
}

header .hamburger g {
    transition: .1s opacity var(--ease-in-out-sine)
}

header .hamburger #cross {
    opacity: 1
}


.index[data-v-cardsmain] {
    height: 100%;
    padding-top: var(--safe-area-inset-top);
    width: 100%
}

.index[visible] main[data-v-cardsmain] {
    opacity: 1!important;
    transform: none!important;
    transition: 1s opacity var(--ease-in-out-sine),1s transform var(--ease-out-cubic);
    transition-delay: .75s
}

main[data-v-cardsmain] {
    grid-gap: var(--row-gap) var(--gap);
    display: grid;
    gap: 3rem 1rem;
    grid-template-columns: repeat(2,1fr);
    margin: 0 auto;
    max-width: var(--max-width);
    padding: var(--padding-top) calc(var(--padding) + var(--safe-area-inset-right)) var(--padding-bottom) calc(var(--padding) + var(--safe-area-inset-left))
}


@media only screen and (min-width: 600px) {
    main[data-v-cardsmain] {
        grid-template-columns:repeat(4,1fr)
    }
}

@media only screen and (max-width: 768px) {
    main[data-v-cardsmain] {
        gap: 2rem 1rem;
   }
}


.menu>*[data-v-aboutinfo] {
    position: relative;
  }
  nav[data-v-aboutinfo] {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    grid-area: menu;
    justify-self: center;
    margin: 0 auto;
    max-width: 1000px;
    pointer-events: none;
    width: 100%;
  }
  nav a[data-v-aboutinfo]:first-child {
    align-self: flex-end;
  }
  @media only screen and (min-width: 600px) {
    nav a[data-v-aboutinfo] {
        font-size: 16rem;
    }
  }
  nav a[data-v-aboutinfo] {
    display: inline-block;
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 8rem;
    font-style: normal;
    font-weight: 800;
    height: .84em;
    letter-spacing: 0px;
    line-height: 1;
    outline: none;
    padding: .02em 0;
    pointer-events: auto;
    position: relative;
    text-transform: uppercase;
  }
  nav a[data-v-aboutinfo]:before {
    background-color: rgba(0, 0, 0, .1);
    border: .25rem solid rgba(0, 0, 0, .2);
    border-radius: var(--radius);
    content: "";
    height: calc(100% + 2rem);
    left: -1rem;
    opacity: 0;
    position: absolute;
    top: -1rem;
    transition: .1s opacity var(--ease-in-out-cubic), .1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem);
  }
  nav a span[data-v-aboutinfo] {
    height: .84em;
    overflow: hidden;
    position: relative;
    color: #000000;
  }
  nav a.nuxt-link-exact-active span[data-v-aboutinfo]:before {
    transform: translate(-.05em, -50%);
  }
  nav a span[data-v-aboutinfo]:after, nav a span[data-v-aboutinfo]:before {
    content: "/";
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .35s transform var(--ease-in-out-cubic);
  }
  nav a.nuxt-link-exact-active span[data-v-aboutinfo]:after {
    transform: translate(-.1em, -50%);
}

.copyright[data-v-aboutinfo], 
.location[data-v-aboutinfo], 
.social p[data-v-aboutinfo], 
nav small[data-v-aboutinfo] {
    font-style: normal;
    letter-spacing: 1px;
    line-height: 1;
    color: #000000;
}
nav small[data-v-aboutinfo] {
    font-family: "Neue Haas Grotesk Display", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    margin-left: 1em;
}
@media only screen and (min-width: 600px) {
    nav a[data-v-aboutinfo] {
        font-size: 16rem;
    }
}
@media only screen and (min-width: 600px) {
    nav a[data-v-aboutinfo]:nth-child(3) {
        margin-left: 40%;
    }
}

nav a[data-v-aboutinfo]:nth-child(3) {
    margin-left: 20%;
}
nav a[data-v-aboutinfo]:nth-child(2), 
nav a[data-v-aboutinfo]:nth-child(3) {
    align-self: flex-start;
}


@media only screen and (min-width: 600px) {
    .location[data-v-aboutinfo] {
        display: none;
    }
}
.location[data-v-aboutinfo] {
    align-self: center;
    grid-area: location;
}
.location a[data-v-aboutinfo] {
    position: relative;
}
.location a[data-v-aboutinfo]:after {
    background-color: currentColor;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 1em;
    transform: scaleY(.333);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%;
}
.copyright[data-v-aboutinfo], .location[data-v-aboutinfo], .social p[data-v-aboutinfo] {
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    text-transform: uppercase;
}
.social[data-v-aboutinfo] {
    display: flex;
    gap: var(--padding);
    grid-area: social;
}
@media only screen and (max-width: 599px) {
    .social[data-v-aboutinfo] {
        align-self: flex-end;
        flex-direction: column;
        gap: 1em;
    }
}

.copyright[data-v-aboutinfo] {
    grid-area: copyright;
    justify-self: flex-end;
}

@media only screen and (max-width: 599px) {
    .copyright[data-v-aboutinfo] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}
.social a[data-v-aboutinfo] {
    display: inline-block;
    height: .84em;
    outline: none;
    position: relative;
    white-space: nowrap;
}
.social a[data-v-aboutinfo]:before {
    background-color: rgba(0, 0, 0, .1);
    border: .25rem solid rgba(0, 0, 0, .2);
    border-radius: var(--radius);
    content: "";
    height: calc(80% + 1rem);
    left: -1rem;
    opacity: 0;
    position: absolute;
    top: -.5rem;
    transition: .1s opacity var(--ease-in-out-cubic), .1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem);
}
.social a[data-v-aboutinfo]:after {
    background-color: currentColor;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 1em;
    transform: scaleY(.333);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%;
}
@media(hover:hover)and (pointer:fine){
    nav a:hover span[data-v-aboutinfo]:before{transform:translate(-.05em,-50%)}
  nav a:hover span[data-v-aboutinfo]:after{transform:translate(-.1em,-50%)}}

@media(hover:none)and (pointer:coarse){
    .location a[data-v-aboutinfo]:active:after{transform:scaleY(1)}}
@media(hover:hover)and (pointer:fine){
    .location a[data-v-aboutinfo]:hover:after{transform:scaleY(1)}
                
}

@media(hover:none)and (pointer:coarse){.social a[data-v-aboutinfo]:active:after{transform:scaleY(1)}}
@media(hover:hover)and (pointer:fine){
  .social a[data-v-aboutinfo]:hover:after{transform:scaleY(1)}}







footer[data-v-cardsmain] {
    padding: var(--padding) calc(var(--padding) + var(--safe-area-inset-right)) var(--padding) calc(var(--padding) + var(--safe-area-inset-left))
}


.card[data-v-cardsinfo] {
    grid-gap: var(--gap);
    border-radius: var(--radius);
    display: grid;
    gap: var(--gap);
    grid-template-areas: "image image" "title year";
    grid-template-rows: auto 1fr;
    outline: 0;
    position: relative
}


.card[data-v-cardsinfo]:focus-visible:before {
    opacity: 1;
    visibility: visible
}
.card[data-v-cardsinfo]:before {
    background-color: hsla(0, 0%, 100%, .2);
    border-radius: var(--outline-radius);
    content: "";
    height: calc(100% + 2rem);
    left: -1rem;
    opacity: 0;
    position: absolute;
    top: -1rem;
    transition: opacity .1s ease-in-out, visibility .1s;
    visibility: hidden;
    width: calc(100% + 2rem);
    z-index: -1;
}

.card:not([nohover])[haslink][data-v-cardsinfo] {
    cursor: pointer
}

@media(hover: none)and (pointer:coarse) {
    .card:not([nohover])[haslink]:active img[data-v-cardsinfo] {
        transform:scale(.955)
    }
    .card:not([nohover])[haslink]:active video[data-v-cardsinfo] {
        transform:scale(.955)
    }


    .card:not([nohover])[haslink]:active .image[data-v-cardsinfo]:after {
        opacity: 1
    }
}

@media(hover: hover)and (pointer:fine) {
    .card:not([nohover])[haslink]:hover img[data-v-cardsinfo] {
        transform:scale(1.1)
    }
    .card:not([nohover])[haslink]:hover video[data-v-cardsinfo] {
        transform:scale(1.1)
    }
    .card:not([nohover])[haslink]:hover .image[data-v-cardsinfo]:after {
        opacity: 1
    }
}




.card .image[data-v-cardsinfo] {
    border-radius: var(--radius);
    grid-area: image;
    height: 0;
    overflow: hidden;
    padding-top: 112%;
    position: relative;
    width: 100%;
    will-change: transform;
    border: 1px solid rgb(255 255 255 / 64%);
    display: block; 
    height: 100%; 
    transition-duration: .5s; 
    opacity: 1; 
    object-fit: cover; 
    transition-timing-function: cubic-bezier(0,0,.2,1);
}

.card .image[data-v-cardsinfo]:after {
    box-shadow: inset 0 0 3rem 0 rgba(0,0,0,.5);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: .5s opacity cubic-bezier(0.19, 1, 0.4, 1.35);
    width: 100%
}
@media only screen and (max-width: 768px) {
    .card .image[data-v-cardsinfo] {
        border: 0px solid rgb(255 255 255 / 64%); 
    }
}

.card video[data-v-cardsinfo] {
    border-radius: var(--radius);
    height: 105%;
    left: 0%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: -2.5%;
    transition: .5s transform cubic-bezier(0.19, 1, 0.4, 1.35);
    width: 100%;
}

.card img[data-v-cardsinfo] {
    border-radius: var(--radius);
    height: 105%;
    left: -2.5%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: -2.5%;
    transition: .5s transform cubic-bezier(0.19, 1, 0.4, 1.35);
    width: 105%
}

.card .meta[data-v-cardsinfo] {
    align-items: flex-start;
    display: flex;
    gap: var(--gap);
    grid-column: span 2;
    justify-content: space-between;
    position: relative
}
.card .meta[data-v-cardsinfo]  .infoBtn-container[data-v-cardsinfo] {
    align-items: center;
    display: flex;
    gap: var(--gap);
    padding: 7%;
    grid-column: span 2;
    justify-content: center;
    position: relative;
}

.card .meta[data-v-cardsinfo]  .infoBtn-container[data-v-cardsinfo]:hover {

    padding: 7% 15%;
 
}


.card p[data-v-cardsinfo] {
    color: var(--color-secondary);
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0px;
    line-height: 1;
    text-transform: uppercase
}

@media only screen and (min-width: 600px) {
    .card p[data-v-cardsinfo] {
        font-size:2.8rem
    }
}

.card .title[data-v-cardsinfo] {
    grid-area: title; 
    color: #ffff;
}

.card .year[data-v-cardsinfo] {
    color: var(--color-grey);
    grid-area: year
}

@media only screen and (max-width: 599px) {
    .card[scale="2"][data-v-cardsinfo] {
        grid-column:span 2
    }
}

.card[type=large][data-v-cardsinfo] {
    grid-column: span 2
}

.card[type=large] .image[data-v-cardsinfo] {
    padding-top: 63%
}

@media only screen and (min-width: 600px) {
    .card[type=large] .image[data-v-cardsinfo] {
        padding-top:calc(56.7% - var(--gap)/ 2)
    }
}

.card[type=featured][data-v-cardsinfo] {

    border: 1px solid rgba(255, 255, 255, 0.808);
    background-color: rgba(0, 0, 0, 0);
    border-radius: 2rem;
    box-shadow: inset 20px -9rem 20rem 0 rgb(255 255 255 / 55%);
    grid-column: span 2;
    grid-template-areas: "image image" "meta meta";
    grid-template-columns: repeat(2,1fr);
    padding: 1.5rem;
    padding: var(--border);
}

.card[type=featured][data-v-cardsinfo]:hover {
   border-radius: 2rem;
   box-shadow: inset 17px 20rem 20rem 0 rgb(255 255 255 / 55%);
 transition: box-shadow 3s cubic-bezier(0.19,1,0.22,1);
 
}
@media only screen and (max-width: 768px) {
    .card[type=featured][data-v-cardsinfo] {
        --border:1rem;
        border-radius: 1rem;
        box-shadow: inset 20px 15rem 20rem 0 rgb(255 255 255 / 55%);
    }
    .card[type=featured][data-v-cardsinfo]:hover {
        border-radius: 1rem;
     }
}


@media only screen and (min-width: 600px) {
    .card[type=featured][data-v-cardsinfo] {
        --border:2rem;
    
    }

    .card[type=featured][align][data-v-cardsinfo] {
        grid-template-areas: "image image label" "image image meta"
    }
}

.card[type=featured][align] .label[data-v-cardsinfo] {
    padding: calc(var(--border)*3) calc(var(--border)*3) 0 var(--border)
}

@media only screen and (min-width: 600px) {
    .card[type=featured][align] .meta[data-v-cardsinfo] {
        padding:0 calc(var(--border)*3) calc(var(--border)*2) var(--border)
    }

    .card[type=featured][data-v-cardsinfo] {
        gap: 0;
        grid-column: span 4;
        grid-template-areas: "image image label" "image image meta";
        grid-template-columns: repeat(2,1fr);
        padding: var(--border)
    }
}

.card[type=featured] .image[data-v-cardsinfo] {
    grid-area: image;
    padding-top: calc(110% - var(--border))
}

@media only screen and (min-width: 600px) {
    .card[type=featured] .image[data-v-cardsinfo] {
        padding-top:58%
    }
}

.card[type=featured] img[data-v-cardsinfo] {
    box-shadow: 0 4px 9px 0 rgba(0,0,0,.16)
}
.card[type=featured] video[data-v-cardsinfo] {
    box-shadow: 0 4px 9px 0 rgba(0,0,0,.16)
}


.card[type=featured] .label[data-v-cardsinfo] {
    padding: calc(var(--border)*2) var(--border) 0 calc(var(--border)*2);
    position: relative
}

.card[type=featured] .meta[data-v-cardsinfo] {
    grid-area: meta
}

@media only screen and (min-width: 600px) {
    .card[type=featured] .meta[data-v-cardsinfo] {
        align-items:flex-start;
        flex-direction: column;
        gap: 3.5rem;
        justify-content: flex-end;
        padding: 0 calc(var(--border)*2) calc(var(--border)*2) calc(var(--border)*2)
    }
}

.card[type=featured] p[data-v-cardsinfo] {
    color: var(--color-white)
}

.card[type=featured][bright] p[data-v-cardsinfo] {
    color: white;
}

.card[type=featured] .label[data-v-cardsinfo] {
    display: none;
    grid-area: label
}
.card[type=featured] .infoBtn-container[data-v-cardsinfo] {
    position: relative;
    border: 1px solid white;
    border-radius: 50rem;
    transition: all 1s cubic-bezier(0.19, 1, 0.4, 1.35);
    overflow: hidden;
}

.card[type=featured] .infoBtn[data-v-cardsinfo]{
    font-size: 4rem;
 display: flex;

}
.card[type=featured] .infoBtn-container[data-v-cardsinfo]:hover {
 
    border: 1px solid white;
    color: white;
    background-color: rgba(255, 255, 255, 0.096);
    border-radius: 50rem;
    transition: all 1s cubic-bezier(0.19, 1, 0.4, 1.35);
    overflow: hidden;

}
.card[type=featured] .infoBtn-container[data-v-cardsinfo]::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn 5s ease-in-out infinite;

}

.arrow-right{
    display: block;
      margin: 5px 5px 5px 0px;
      width: 20px;
      height: 20px;
      border-top: 2px solid #ffffff;
      border-left: 2px solid #ffffff;
      transform: rotate(135deg);
      transition: transform 0.5s ease;
  }

@keyframes shiny-btn {
	0% {
		-webkit-transform: scale(0) rotate(45deg);
		transform: scale(0) rotate(45deg);
		opacity: 0
	}
	80% {
		-webkit-transform: scale(0) rotate(45deg);
		transform: scale(0) rotate(45deg);
		opacity: .5
	}
	81% {
		-webkit-transform: scale(4) rotate(45deg);
		transform: scale(4) rotate(45deg);
		opacity: 1
	}
	100% {
		-webkit-transform: scale(50) rotate(45deg);
		transform: scale(50) rotate(45deg);
		opacity: 0
	}
}
@media only screen and (min-width: 600px) {
    
    .card[type=featured] .label[data-v-cardsinfo] {
        display:inline-block;
        font-size: 2.8rem
    }

    .card[type=featured] .title[data-v-cardsinfo] {
        font-size: 4.3rem
    }

    .card[type=featured] .year[data-v-cardsinfo] {
        font-size: 2.8rem;
        justify-self: flex-start
    }
}

@media only screen and (max-width: 768px) {
  
    .card[type=featured] .infoBtn-container[data-v-cardsinfo] {
        position: relative;
        width: auto;
        height: 100%;
        padding: 3% !important;
        border: 1px solid white;
        background-color: rgba(255, 255, 255, 0);
        border-radius: 50rem;
        transition: all 1s cubic-bezier(0.19,1,0.22,1);
        overflow: hidden;
    
 
    }  
    .card[type=featured] .infoBtn[data-v-cardsinfo] {
        color: rgb(0, 0, 0) !important;
    }  
    .card[type=featured] .infoBtn-container[data-v-cardsinfo]:hover {
       
        border: 1px solid white;
        background-color: rgba(255, 255, 255, 0.425);
        border-radius: 50rem;
        transition: all 1s cubic-bezier(0.19,1,0.22,1);
        overflow: hidden;
    
    }
    .arrow-right{
        display: block;
          margin: 5px 5px 5px 0px;
          width: 15px;
          height: 15px;
          border-top: 3px solid #000000;
          border-left: 3px solid #000000;
          transform: rotate(135deg);
          transition: transform 0.5s ease;
      }
}


.quote[data-v-quote] {
    align-items: center;
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    overflow: hidden;
    padding: var(--gap) 0;
    text-align: center
}

@media only screen and (min-width: 600px) {
    .quote[data-v-quote] {
        grid-column:span 4
    }
}

.title[data-v-quote] {
    font-family: Inter,Helvetica,Arial,sans-serif;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 2.5rem;
    text-transform: uppercase
}

[data-v-quote] .content {
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 4.5rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    max-width: 12em;
    text-transform: uppercase
}

@media only screen and (min-width: 600px) {
    [data-v-quote] .content {
        font-size:7rem
    }
}

[data-v-quote] a {
    display: inline-block;
    height: .84em;
    outline: 0;
    position: relative
}

[data-v-quote] a:before {
    background-color: hsla(0,0%,100%,.1);
    border: .25rem solid hsla(0,0%,100%,.2);
    border-radius: var(--radius);
    content: "";
    height: calc(80% + 1rem);
    left: -1rem;
    opacity: 0;
    position: absolute;
    top: -.5rem;
    transition: .1s opacity var(--ease-in-out-cubic),.1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem)
}

[data-v-quote] a:focus-visible:before {
    opacity: 1;
    visibility: visible
}

[data-v-quote] a:after {
    background-color: currentColor;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    top: .85em;
    transform: scaleY(.333);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%
}

@media(hover: none)and (pointer:coarse) {
    [data-v-quote] a:active:after {
        transform:scaleY(1)
    }
}

@media(hover: hover)and (pointer:fine) {
    [data-v-quote] a:hover:after {
        transform:scaleY(1)
    }
}

.line-separator{
    padding: 3rem 0 0rem;
    width: 100%;
    height: 10px;
    border-bottom: 1px dashed white;
    grid-column: span 2;
}

[data-v-abouttextfont] * {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-decoration: inherit;
    white-space: inherit
}

.paragraph[data-v-abouttext] {
    align-items: center;
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    padding: 3rem 0 0rem;
    text-align: center
}

@media only screen and (min-width: 600px) {
    .paragraph[data-v-abouttext] {
        grid-column:span 4;
    }
    .line-separator{
        grid-column: span 4;
    }
}
@media only screen and (max-width: 768px) {
    .paragraph[data-v-abouttext] {
        padding: 3rem 0 0rem;
    }
    .paragraph[data-v-abouttext] {
        padding: 3rem 0 0rem;
    }
}

.paragraph[data-v-abouttext2] {
    overflow: hidden;
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    margin: 0rem;
    text-align: center;
    width: 100%;
    height: 100%;
    
}


.paragraph[data-v-abouttext2] .paragraph-wrapper-image
{
    overflow: hidden;
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    margin: 0rem 0rem 1rem;
    text-align: center;
    border-radius: 2rem;
    border: 1px solid white;
    width: 100%;
    height: auto;
}


.paragraph[data-v-abouttext2] .paragraph-wrapper
{
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    margin: 0rem;
    padding: 4rem 0;
    text-align: center;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.808);
    width: 100%;
    height: 100%;
    justify-content: space-between;
    transition: box-shadow 3s cubic-bezier(0.19,1,0.22,1);
}


.paragraph[data-v-abouttext2] .paragraph-wrapper:hover {
   border-radius: 2rem;
   box-shadow: inset 20px -9rem 20rem 0 rgb(255 255 255 / 20%);
 transition: box-shadow 3s cubic-bezier(0.19,1,0.22,1);
 
}

.paragraph2[data-v-abouttext2] {
    overflow: hidden;
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    margin: 0rem;
    text-align: center;
    width: 100%;
    height: 100%;
    
}

.paragraph2[data-v-abouttext2] .paragraph-wrapper-image
{
    overflow: hidden;
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    margin: 2rem 0rem -1rem;
    text-align: center;
    border-radius: 2rem;
    border: 1px solid white;
    width: 100%;
    height: auto;
}

.paragraph2[data-v-abouttext2] .paragraph-wrapper2
{
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    margin: 0rem;
    padding: 4rem 0;
    text-align: center;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.808);
    width: 100%;
    height: 100%;
    justify-content: space-between;
    transition: box-shadow 3s cubic-bezier(0.19,1,0.22,1);
}
.paragraph2[data-v-abouttext2] .paragraph-wrapper2:hover {
    border-radius: 2rem;
    box-shadow: inset 20px -9rem 20rem 0 rgb(255 255 255 / 20%);
  transition: box-shadow 3s cubic-bezier(0.19,1,0.22,1);
  
 }


@media only screen and (min-width: 600px) {
    .paragraph[data-v-abouttext2] {
        grid-column:span 2;
    }
    .paragraph2[data-v-abouttext2] {
        grid-column:span 2;
    }
}



@media only screen and (max-width: 768px) {
  
    .paragraph2[data-v-abouttext2] {
        margin: 0rem 0rem;
    }
    .paragraph2[data-v-abouttext2] .paragraph-wrapper2
    {
        margin: 0rem;
    }
    .paragraph2[data-v-abouttext2] .paragraph-wrapper-image
{
    margin: 2rem 0rem -1rem;
}
}



[data-v-abouttext] .content {
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2.6rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    padding: 0 2rem;
    text-align: left;
    text-indent: 50%;
    text-transform: uppercase;
    color: #ffff;
}

[data-v-abouttext2] .content {
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    padding: 0 2rem;
    text-align: left;
    color: #ffff;
}
[data-v-abouttext2] .content-title {
    text-indent: 70%;
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    padding: 0 2rem;
    text-align: left;
    color: #ffff;
}
[data-v-abouttext2] .content-subtitle {
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1;
    padding: 5px 2rem;
    text-align: left;
    color: #ffff;
}
[data-v-abouttext2] .content-subtitle a{
    height: .84em;
    outline: 0;
    position: relative;
    color: currentColor;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 100;
    height: .8em;
    letter-spacing: 0;
    line-height: 1.6rem;
    position: relative;
    word-break: break-word;
    top: 0;
    color: #ffff;
}

[data-v-abouttext2] .content-subtitle a::after {
    background-color: currentColor;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 1.6em;
    transform: scaleY(0);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%;
}
@media only screen and (max-width: 768px) {
    [data-v-abouttext2] .content-subtitle a::after {
        top: 1.2em;
    }
}

@media(hover: none)and (pointer:coarse) {
    .content-subtitle a:active:after {
        transform:scaleY(1)
    }
}

@media(hover: hover)and (pointer:fine) {
    .content-subtitle a:hover:after {
        transform:scaleY(1)
    }
}


[data-v-abouttext2] .content-data {
    color: #c9c9c9;
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size:1.7rem;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 2rem;
    padding: 2rem 2rem 0rem;
    text-align: left;
    color: #ffff;
}
[data-v-abouttext2] .content-data:first-child {
    padding-top: 0rem !important;

}
[data-v-abouttext2] .content-data span {
    color: #a7a7a7;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size:1.3rem;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 0px;
    line-height: 1;
    padding: 0rem 0.5rem;
    text-align: left;
    color: #ffff;
}
[data-v-abouttext2] .content-software {
    display: flex;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 2rem;
    padding: 0 2rem;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    color: #ffff;
}



@media only screen and (min-width: 600px) {
    [data-v-abouttext] .content {
        font-size:3.9rem;
        padding: 0 5.5rem
    }
    [data-v-abouttext2] .content {
        font-size:3.5rem;
        line-height: 3.8rem;
        padding: 0rem 5.5rem;
    }
    [data-v-abouttext2] .content-title {
        font-size: 2.6rem;
        padding: 0rem 5.5rem 0rem;
    }
    [data-v-abouttext2] .content-software {
        font-size: 2rem;
        line-height: 2.2rem;
        padding: 1rem 5.5rem 0rem;
    }
    [data-v-abouttext2] .content-subtitle {
        font-size: 2rem;
        line-height: 2.2rem;
        padding: 0rem 5.5rem 0rem;
    }
    [data-v-abouttext2] .content-subtitle a {
        font-size: 2rem;
        line-height: 2.2rem;
        padding: 1rem 0rem 0rem;
    }
    [data-v-abouttext2] .content-data {
        font-size: 2rem;
        line-height: 2.2rem;
        padding: 3rem 5.5rem 0rem
    }
    [data-v-abouttext2] .content-data span {
        font-size:1.5rem;
        padding: 1rem 0.5rem;
    }
}

[data-v-abouttext] p {
    padding-top: 1rem;
    white-space: pre-line;
    color: #ffff;
}

[data-v-abouttext] p:not(:last-child) {
    margin-bottom: 1em
}

[data-v-abouttext] a {
    display: inline-block;
    height: .84em;
    outline: 0;
    position: relative;
    text-indent: 0
}

[data-v-abouttext] a:before {
    background-color: hsla(0,0%,100%,.1);
    border: .25rem solid hsla(0,0%,100%,.2);
    border-radius: var(--radius);
    content: "";
    height: calc(80% + 1rem);
    left: -1rem;
    opacity: 0;
    position: absolute;
    top: -.5rem;
    transition: .1s opacity var(--ease-in-out-cubic),.1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem)
}

[data-v-abouttext] a:focus-visible:before {
    opacity: 1;
    visibility: visible
}

[data-v-abouttext] a:after {
    background-color: currentColor;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    top: .85em;
    transform: scaleY(.333);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%
}

@media(hover: none)and (pointer:coarse) {
    [data-v-abouttext] a:active:after {
        transform:scaleY(1)
    }
}

@media(hover: hover)and (pointer:fine) {
    [data-v-abouttext] a:hover:after {
        transform:scaleY(1)
    }
}

.wip[data-v-cardstext] {
    border-radius: var(--radius);
    color: var(--color-white);
    grid-column: span 2;
    transition: .5s background-color var(--ease-in-out-sine),.2s color var(--ease-out-cubic)
}

@media only screen and (min-width: 600px) {
    .wip[data-v-cardstext] {
        grid-gap:var(--gap);
        display: grid;
        gap: var(--gap);
        grid-column: span 4;
        grid-template-columns: 1fr 2fr
    }
}

.wip[bright][data-v-cardstext] {
    color: var(--color-black)
}

p[data-v-cardstext] {
    color: currentColor
}

.label[data-v-cardstext] {
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    padding: var(--padding) 0 var(--padding) var(--padding);
    text-transform: uppercase
}

@media only screen and (min-width: 600px) {
    .label[data-v-cardstext] {
        font-size:2.8rem
    }
}

.label[data-v-cardstext]:before {
    animation: 1.5s blink-cardstext var(--ease-out-cubic) infinite;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 1rem;
    margin-right: .25em;
    vertical-align: middle;
    width: 1rem
}

@keyframes blink-cardstext {
    50% {
        opacity: .2
    }
}

.projects[data-v-cardstext] {
    padding: var(--padding)
}

@media only screen and (min-width: 600px) {
    .projects[data-v-cardstext] {
        padding:var(--padding) var(--padding) var(--padding) 0
    }
}

.projects__inner[data-v-cardstext] {
    pointer-events: none;
    position: relative
}



.project[data-v-cardstext] {
    grid-gap: 1rem;
    -webkit-touch-callout: none;
    border-bottom: 1px solid;
    border-top: 1px solid;
    display: grid;
    gap: 1rem;
    grid-template-areas: "title title index" "subtitle subtitle subtitle";
    grid-template-columns: 1fr 1fr auto;
    outline: 0;
    padding: 2rem 0;
    pointer-events: auto;
    position: relative;
    transition: .5s opacity var(--ease-out-cubic)
}

.project[data-v-cardstext]:not(:first-child) {
    margin-top: -1px
}

@media only screen and (min-width: 600px) {
    .project[data-v-cardstext] {
        grid-template-areas:"title year index" "subtitle subtitle subtitle";
        padding: 3rem 0
    }
}

@media(hover: none)and (pointer:coarse) {
    .project[data-v-cardstext]:active {
        opacity:1!important
    }

    .project:active+.thumbnail[data-v-cardstext] {
        visibility: visible
    }

    .project:active+.thumbnail .thumbnail__inner[data-v-cardstext] {
        opacity: 1;
        transform: scale(1) rotate(var(--rotation))
    }

    .project:active+.thumbnail[data-v-cardstext]:before {
        opacity: 1;
        transform: scale(1) translate(-10%,10%) rotate(calc(var(--rotation)*.9))
    }

    .project:active+.thumbnail img[data-v-cardstext] {
        transform: scale(1)
    }
    .project:active+.thumbnail video[data-v-cardstext] {
        transform: scale(1)
    }
}

@media(hover: hover)and (pointer:fine) {
    .project[data-v-cardstext]:hover {
        opacity:1!important
    }

    .project:hover+.thumbnail[data-v-cardstext] {
        visibility: visible
    }

    .project:hover+.thumbnail .thumbnail__inner[data-v-cardstext] {
        opacity: 1;
        transform: scale(1) rotate(var(--rotation))
    }

    .project:hover+.thumbnail[data-v-cardstext]:before {
        opacity: 1;
        transform: scale(1) translate(-10%,10%) rotate(calc(var(--rotation)*.9))
    }

    .project:hover+.thumbnail img[data-v-cardstext] {
        transform: scale(1)
    }
    .project:hover+.thumbnail video[data-v-cardstext] {
        transform: scale(1)
    }
}

.project[data-v-cardstext]:focus-visible {
    opacity: 1!important
}

.project:focus-visible+.thumbnail[data-v-cardstext] {
    visibility: visible
}

.project:focus-visible+.thumbnail .thumbnail__inner[data-v-cardstext] {
    opacity: 1;
    transform: scale(1) rotate(var(--rotation))
}

.project:focus-visible+.thumbnail[data-v-cardstext]:before {
    opacity: 1;
    transform: scale(1) translate(-10%,10%) rotate(calc(var(--rotation)*.9))
}

.project:focus-visible+.thumbnail img[data-v-cardstext] {
    transform: scale(1)
}
.project:focus-visible+.thumbnail video[data-v-cardstext] {
    transform: scale(1)
}

.index[data-v-cardstext],.title[data-v-cardstext],.year[data-v-cardstext] {
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase
}

@media only screen and (min-width: 600px) {
    .index[data-v-cardstext],.title[data-v-cardstext],.year[data-v-cardstext] {
        font-size:2.8rem
    }
}

.title[data-v-cardstext] {
    grid-area: title;
    white-space: pre-line
}

.year[data-v-cardstext] {
    grid-area: year
}

@media only screen and (max-width: 599px) {
    .year[data-v-cardstext] {
        display:none
    }
}

.index[data-v-cardstext] {
    grid-area: index
}

.subtitle[data-v-cardstext] {
    font-family: Inter,Helvetica,Arial,sans-serif;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 200;
    grid-area: subtitle;
    letter-spacing: 0;
    line-height: 1
}

@media only screen and (min-width: 600px) {
    .subtitle[data-v-cardstext] {
        font-size:1.8rem
    }
}

.thumbnail[data-v-cardstext] {
    border-radius: var(--radius);
    height: 28rem;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: calc(8% + var(--offset)*100%/var(--projects));
    transform: translate(-50%,-50%);
    transition: visibility .2s;
    visibility: hidden;
    width: 22rem;
    z-index: 1
}

.thumbnail[data-v-cardstext]:before {
    background-color: rgba(0,0,0,.3);
    box-shadow: 0 0 3rem 3rem rgba(0,0,0,.3);
    content: "";
    height: 75%;
    left: 12.5%;
    position: absolute;
    top: 12.5%;
    transform: scale(.7);
    width: 75%
}

.thumbnail[data-v-cardstext]:before,.thumbnail__inner[data-v-cardstext] {
    border-radius: inherit;
    opacity: 0;
    transition: .2s opacity var(--ease-out-cubic),1s transform var(--ease-out-back)
}

.thumbnail__inner[data-v-cardstext] {
    height: 100%;
    overflow: hidden;
    transform: rotate(calc(var(--rotation)*-1)) scale(.9);
    width: 100%
}

.thumbnail img[data-v-cardstext] {
    border-radius: inherit;
    height: 105%;
    left: -2.5%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    top: -2.5%;
    transform: scale(.95);
    transition: 1s transform var(--ease-out-cubic);
    width: 105%
}
.thumbnail video[data-v-cardstext] {
    border-radius: inherit;
    height: 105%;
    left: -2.5%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    top: -2.5%;
    transform: scale(.95);
    transition: 1s transform var(--ease-out-cubic);
    width: 105%
}

.title[data-v-0afff8e6] {
    grid-column: span 2;
    padding: var(--gap) 0;
    width: 100%
}

@media only screen and (min-width: 600px) {
    .title[data-v-0afff8e6] {
        grid-column:span 4
    }
}

.content[data-v-0afff8e6] {
    color: var(--color-secondary);
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 4.5rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: .95;
    text-transform: uppercase;
    white-space: pre-line
}

@media only screen and (min-width: 600px) {
    .content[data-v-0afff8e6] {
        font-size:8.9rem;
        padding: 0 5.5rem
    }
}

.recognition[data-v-cardstext2] {
    grid-gap: var(--row-gap);
    color: var(--color-secondary);
    display: grid;
    gap: var(--row-gap);
    grid-column: span 2;
    position: relative
}

@media only screen and (min-width: 600px) {
    .recognition[data-v-cardstext2] {
        grid-column:span 4
    }
}

.recognition>div[data-v-cardstext2] {
    grid-gap: var(--gap);
    display: grid;
    gap: var(--gap);
    grid-template-columns: 2fr 4fr 1fr !important;
}

.recognition>div[data-v-cardstext2]>:nth-child(3) {
    justify-self: flex-end
}

.background[data-v-cardstext2] {
    color: #343434;
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 7.2rem;
    font-style: normal;
    font-weight: 800;
    left: 50%;
    letter-spacing: 1px;
    line-height: 1;
    position: absolute;
    text-orientation: mixed;
    text-transform: uppercase;
    top: 0;
    transform: translate(-50%) rotate(180deg);
    transform-origin: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    writing-mode: vertical-rl;
    z-index: -1
}

@media only screen and (prefers-color-scheme: light) {
    .background[data-v-cardstext2] {
        color:#ededed
    }
}

.background>span[data-v-cardstext2] {
    display: block;
    white-space: nowrap
}

.background>span>span[data-v-cardstext2] {
    display: inline-block
}

.background>span[data-v-cardstext2]:first-of-type {
    margin-bottom: 1em;
    text-align: left
}

.background>span[data-v-cardstext2]:nth-of-type(2) {
    text-align: center
}

.background>span[data-v-cardstext2]:nth-of-type(3) {
    text-align: right
}

.background>span[data-v-cardstext2]:nth-of-type(4) {
    text-align: center
}

@media only screen and (min-width: 600px) {
    .background[data-v-cardstext2] {
        font-size:18rem
    }
}

.background~[data-v-cardstext2] {
    position: relative
}

ul[data-v-cardstext2] {
    grid-gap: 1rem;
    display: grid;
    gap: 1rem;
    grid-auto-flow: row;
    list-style: none
}

a[data-v-cardstext2]:not(.card) {
    height: .84em;
    outline: 0;
    position: relative
}

a[data-v-cardstext2]:not(.card):before {
    background-color: hsla(0,0%,100%,.1);
    border: .25rem solid hsla(0,0%,100%,.2);
    border-radius: var(--radius);
    content: "";
    height: calc(80% + 1rem);
    left: -1rem;
    opacity: 0;
    position: absolute;
    top: -.5rem;
    transition: .1s opacity var(--ease-in-out-cubic),.1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem)
}

a[data-v-cardstext2]:not(.card):focus-visible:before {
    opacity: 1;
    visibility: visible
}

li[data-v-cardstext2],p[data-v-cardstext2],ul[data-v-cardstext2] {
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1;
    text-transform: uppercase;
    color: #ffff;
}

@media only screen and (min-width: 600px) {
    li[data-v-cardstext2],p[data-v-cardstext2],ul[data-v-cardstext2] {
        font-size:2.8rem
    }
}

@media only screen and (max-width: 599px) {
    .index[data-v-cardstext2] {
        display:none
    }

    .content[data-v-cardstext2] {
        grid-column: span 2
    }
}

.awards .content li[data-v-cardstext2] {
    display: flex
}

.awards .content li span[data-v-cardstext2] {
    flex: 1
}
.disclamers{
    
    color: #777777;
}
@media only screen and (min-width: 600px) {
    .partnerships[data-v-cardstext2] {
        grid-template-columns:2fr 3fr 1fr!important
    }

    .partnerships .content[data-v-cardstext2] {
        font-size: 3.8rem
    }
    .awards .content li[data-v-cardstext2] {
        font-size: 3.8rem
    }


    .social .content[data-v-cardstext2] {
        display: flex
    }

    .social .content>[data-v-cardstext2] {
        flex: 1
    }
    .disclamers{
        font-size: 2.8rem;
        color: #777777;
    }
}




.social ul li[data-v-cardstext2]:last-child {
    margin-top: 1em;
    max-width: 5em
}

.social ul li a[data-v-cardstext2] {
    display: inline-block;
    position: relative
}

.social ul li a[data-v-cardstext2]:after {
    background-color: currentColor;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    top: .9em;
    transform: scaleY(.333);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%
}

@media(hover: none)and (pointer:coarse) {
    .social ul li a[data-v-cardstext2]:active:after {
        transform:scaleY(1)
    }
}

@media(hover: hover)and (pointer:fine) {
    .social ul li a[data-v-cardstext2]:hover:after {
        transform:scaleY(1)
    }
}

@media only screen and (min-width: 600px) {
    .news .content[data-v-cardstext2] {
        grid-column:span 2
    }

    .news .content .card[data-v-cardstext2] {
        margin: 0 auto;
        width: 50%
    }
}

footer[data-v-footertext] {
    color: var(--color-secondary);
    display: flex;
    grid-column: span 2;
    justify-content: space-between;
    color: #ffff;
}

@media only screen and (min-width: 600px) {
    footer[data-v-footertext] {
        grid-column:span 4
    }
}

.social[data-v-footertext] {
    display: flex;
    gap: var(--padding);
    grid-area: social
}

@media only screen and (max-width: 599px) {
    .social[data-v-footertext] {
        align-self:flex-end;
        flex-direction: column;
        gap: 1em
    }
}

.social a[data-v-footertext] {
    display: inline-block;
    height: .84em;
    outline: 0;
    position: relative;
    white-space: nowrap
}

.social a[data-v-footertext]:before {
    background-color: rgba(0,0,0,.1);
    border: .25rem solid rgba(0,0,0,.2);
    border-radius: var(--radius);
    content: "";
    height: calc(80% + 1rem);
    left: -1rem;
    opacity: 0;
    position: absolute;
    top: -.5rem;
    transition: .1s opacity var(--ease-in-out-cubic),.1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem)
}

.social a[data-v-footertext]:focus-visible:before {
    opacity: 1;
    visibility: visible
}

.social a[data-v-footertext]:after {
    background-color: currentColor;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 1em;
    transform: scaleY(0);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%
}

@media(hover: none)and (pointer:coarse) {
    .social a[data-v-footertext]:active:after {
        transform:scaleY(1)
    }
}

@media(hover: hover)and (pointer:fine) {
    .social a[data-v-footertext]:hover:after {
        transform:scaleY(1)
    }
}

.copyright[data-v-footertext] {
    grid-area: copyright;
    justify-self: flex-end
}

@media only screen and (max-width: 599px) {
    .copyright[data-v-footertext] {
        display:flex;
        justify-content: space-between;
        width: 100%
    }
}

a[data-v-footertext],p[data-v-footertext] {
     font-family: "Formula Condensed",Helvetica,Arial,sans-serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase
}

a[data-v-footertext] {
    height: .84em;
    outline: 0;
    position: relative
}

a[data-v-footertext]:before {
    background-color: hsla(0,0%,100%,.1);
    border: .25rem solid hsla(0,0%,100%,.2);
    border-radius: var(--radius);
    content: "";
    height: calc(80% + 1rem);
    left: -1rem;
    opacity: 0;
    position: absolute;
    top: -.5rem;
    transition: .1s opacity var(--ease-in-out-cubic),.1s visibility;
    visibility: hidden;
    width: calc(100% + 2rem)
}

a[data-v-footertext]:focus-visible:before {
    opacity: 1;
    visibility: visible
}

a[data-v-footertext]:after {
    background-color: currentColor;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: .95em;
    transform: scaleY(0);
    transform-origin: top;
    transition: .2s transform var(--ease-out-cubic);
    width: 100%
}

@media(hover: none)and (pointer:coarse) {
    a[data-v-footertext]:active:after {
        transform:scaleY(1)
    }
}

@media(hover: hover)and (pointer:fine) {
    a[data-v-footertext]:hover:after {
        transform:scaleY(1)
    }
}

@media only screen and (max-width: 599px) {
    .portfolio[data-v-footertext],.social[data-v-footertext] {
        display:none
    }
}