@font-face { font-family: 'Helvetica-Var'; src: url('/fonts/Helvetica-Now-Var.ttf'); }

/* css clean up */

*{
	font-family: 'Helvetica-Var', sans-serif; font-weight: 200;

	box-sizing: border-box;
	margin: 0;
	padding: 0;
    text-decoration: none;

    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    -webkit-user-drag: none;

    word-wrap: break-word;

    /*border: 1px solid red;*/
}

h1, h2, h3, h4, h5, h6, p {
    cursor: default;
}

.selectable {
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;

    cursor: text;
}
.selectable::selection {
    color: #F23317;
}

.hover {
    transition: opacity .2s ease;
}
.hover:hover {
    opacity: .6;   
}

.hover-scale {
    transition: scale .3s ease, opacity .3s ease, box-shadow .3s ease, rotate .3s ease;
}
.hover-scale:hover {
    opacity: .6;
    scale: .9;
    rotate: 15deg;
}

.inpextra {
    position: fixed;
    left: -500vw; right: -500vw;
    opacity: 0;
    pointer-events: none;
}

.hidden {
    pointer-events: none;
}

:root {
    /* colors */

    --main-dark: #121115;
    --main: #050505;
    --main-medium: #1e1d21;
    --main-light: #2c283c;
    --main-opaque: #1a191dcc;
    --main-accent: #c94dda;
    --text-dark: #cbc7c0;
    --text: #f0ece4bb;
    --text-light: #f8f5eebb;
    --text-full: #B6B4B0;
    --background-layer: #1f001a3d;
}

textarea{
    resize: vertical;
}

body {
    background-color: var(--main);
}

.no-phone {
    display: block;
}
.no-desk {
    display: none;
}

/* components */

.video {
    position: fixed;
    width: 100vw; height: 100vh;
    object-fit: cover;
    mask-image: radial-gradient(#000000, #00000099,  #00000022);
    opacity: .4;
    filter: grayscale(1);
    z-index: -1;
}

.heading {
    width: calc(100vw - 2rem); height: 14rem;
    position: absolute;
    top: 0; left: 1rem;
    background-image: url(/images/dojo.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

h1 {
    position: absolute;
    top: 2rem; width: 100%;
    text-align: center;
    font-size: 2.3rem;
    padding: 0 3rem;
    font-weight: 300;
    text-shadow: 0 0 35px #e09636;
    color: #e49936c2;
}

.instagram {
    background-image: url(/images/instagram-color.svg);
    box-shadow: 0 0 25px 4px #D5079A;
    background-color: #f7c9d8;
}
.instagram:hover {
    box-shadow: 0 0 20px 3px #D5079A;
}
.linked-in {
    background-image: url(/images/linked-in-color.svg);
    box-shadow: 0 0 25px 4px #0087C7;
    background-color: #bfe3f4;
}
.linked-in:hover {
    box-shadow: 0 0 20px 3px #0087C7;
}
.smoothcomp {
    background-image: url(/images/smoothcomp-color.svg);
    box-shadow: 0 0 25px 4px #00c7c0;
    background-color: #bff4f0;
}
.smoothcomp:hover {
    box-shadow: 0 0 20px 3px #00c7c0;
}

.icon {
    width: 3rem; aspect-ratio: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.floating-icons .icon {
    pointer-events: all;
    width: 4rem;
    border-radius: 1.3rem;
}

.content {
    display: grid;
    grid-template-columns: calc(30vw - 10rem) auto auto calc(30vw - 10rem);
    gap: 4rem;
}

.centre {
    grid-column: 2 / 4;
}

.articles-link {
    position: relative;
    color: white;
    font-weight: 130;
    font-size: 1.7rem;
    line-height: 1.7rem;
    width: max-content;
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: .8;
    transition: transform .4s ease, opacity .4s ease;
    margin-top: calc(100dvh - 6.5rem);
}
.articles-link:hover {
    opacity: .4;
    transform: scale(.85);
}

.arrow {
    width: 4.5rem; height: 2.5rem;
    background-image: url(/images/arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform .4s ease;
}
.articles-link:hover .arrow {
    transform: translateY(.5rem);
}

#articles {
    margin: 10rem 0 5rem 0;
    display: flex;
    flex-direction: column;
    gap: 6rem;
    color: #ffffff77;
}

.card {
    width: 100%;
    border: 1px solid #686868;
    padding: 1.7rem 2rem;
    color: #ffffff85;
    backdrop-filter: blur(20px);
    background: linear-gradient(52deg, #ffffff26, #ffffff22, #ffffff5f);
    transition: border .3s ease, opacity .3s ease;
    border-radius: .5rem;
}
.article * {
    cursor: pointer;
}
.article:hover {
    opacity: .8;
}

.article.blick {
    background: linear-gradient(52deg, #ff313146, #ff909022, #ff50505f);
    border: 1px solid #845757;
}
.article.zurich-sport {
    background: linear-gradient(52deg, #31baff46, #90e9ff22, #50e2ff5f);
    border: 1px solid #576d84;
}
.article.twenty-min {
    background: linear-gradient(52deg, #3831ff46, #9f90ff22, #505cff5f);
    border: 1px solid #585784;
}

.card h3 {
    font-size: 1.6rem;
    margin-bottom: .5rem;
    color: #ffffffb6;
    margin-bottom: 1rem;
}
.article .date, #about .age {
    font-size: .8rem;
    font-weight: 150;
    margin-bottom: .2rem;
    color: #ffffff7e;
}
.article p:not(.date) {
    mask-image: linear-gradient(#000000, #000000aa, #00000000);
}

.article.blick:hover {
    border: 1px solid #db9c9c;
}
.article.twenty-min:hover {
    border: 1px solid #9d9cdb;
}


#about {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 4rem 2rem;
}
#about p, #about h3 {
   text-align: center;
    max-width: 61ch;
}

.stats {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0 4rem 0;
    gap: 4rem;
    flex-wrap: wrap;
}

.stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.stats > div > div {
    display: flex;
    justify-content: center;
    /* gap: 1.3rem; */
    gap: .7rem;
}

.stats > div > div > .icon {
    opacity: .8;
    filter: sepia(1);
}

.stats > div > div > h4 {
    font-size: 4rem;
    line-height: 3rem;
    font-weight: 400;
    padding-bottom: .15rem;
    color: #ffffffbe;
    text-align: end;
}
.stats > div > p {
    grid-column: span 2;
    text-align: center;
}


#form {
    background: linear-gradient(52deg, #ff31cf46, #ff90e522, #ff50cb5f);
    border: 1px solid #674669;
}



form {
    max-width: 1000px;
    width: 90%;
    padding: 3rem;
    overflow: visible;
    margin: auto;
    display: grid;
    grid-template-columns: calc(50% - .7rem) calc(50% - 1.7rem);
    gap: 2.4rem;
    overflow: scroll;
    color: #dbc2d3;
}
form div {
    position: relative;
}
form label {
    top: -1.7rem; left: .2rem;
    position: absolute;
    color: #c7a9be;
}
form input, form textarea {
    width: 100%;
    background-color: var(--background-layer);
    border: none;
    outline: none;
    color: #dbc2d3;
    font-size: 1rem;
    padding: .6rem .9rem;
    border-radius: .25rem;
    border: 1px solid transparent;
    field-sizing: content;
}
form input::placeholder, form textarea::placeholder {
    color: #7a566f;
}

form input:focus-visible, form textarea:focus-visible {
        border: 1px solid #6a396c;
        background-color: #1f001aa8;
}

.submit {
    background: linear-gradient(#782e6895 5%, #82337194);
    cursor: pointer;
    border: 1px solid #6a396c;
    transition: filter .2s ease, opacity .2s ease;
}
.submit:hover {
    opacity: 1;
    filter: brightness(1.7);
}
form .split {
    display: flex;
    gap: 1rem;
}
form .split div:first-child {
    width: 7rem;
}
form .split div:last-child {
    width: 100%;
}

.content form h3 {
    color: #d0b5c8;
}

form textarea {
    min-height: 4.7rem;
    max-height: 13.7rem;
}

.full {
    grid-column: span 2;
}

.centre-full {grid-column: span 4;}

.floating-icons {
    pointer-events: none;
    position: fixed;
    bottom: 0; left: 0;
    padding: 3rem 4rem;
    display: flex;
    gap: 2.5rem;
    z-index: 10;
}

/* footer */

footer.card {
    width: auto;
    border-radius: .5rem .5rem 0 0;
    border: 1px solid #1d061d;
    border-bottom: none;
    margin-top: 5rem;
    background: linear-gradient(52deg, #220f1d46, #1b051522, #1a01125f);
}
footer.card a {
    color: #74537c;
    word-wrap: anywhere;
    text-align: center;
    line-height: .9rem;
}
footer.card p {
    line-height: .9rem;
    color: #74537c;
}

.legal {
    width: 100%;
    gap: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* media-thin */

@media only screen and (min-width: 2000px) {
    .content {
        grid-template-columns: auto 30rem 30rem auto;
    }
}

@media only screen and (max-width: 1600px) {
    .content {
        grid-template-columns: 10vw auto auto 10vw;
    }
}

@media only screen and (max-width: 1200px) {
    .content {
        grid-template-columns: 5vw auto auto 5vw;
    }
    #form, form {
        padding: 2rem 1rem;
    }
}

/* media-phone */

@media only screen and (max-width: 1024px) {
    .floating-icons {
        position: sticky;
        padding: 2rem;
        gap: 2rem;
        flex-direction: column;
    }
    .floating-icons .icon {
        width: 3rem;
        border-radius: 1rem;
    }

    .linked-in {
        box-shadow: 0 0 15px 3px #0087C7;
    }
    .linked-in:hover {
        box-shadow: 0 0 8px 2px #0087C7;
    }

    .instagram {
        box-shadow: 0 0 15px 3px #D5079A;
    }
    .instagram:hover {
        box-shadow: 0 0 8px 2px #D5079A;
    }

    .smoothcomp {
        box-shadow: 0 0 15px 3px #00c7c0;
    }
    .smoothcomp:hover {
        box-shadow: 0 0 8px 2px #00c7c0;
    }

    footer.card {
        margin-top: 0;
    }
}

@media only screen and (max-width: 800px) {
    .no-phone {
        display: none;
    }
    .no-desk {
        display: block;
    }
    form {
        grid-template-columns: 1fr;
    }
    .full {
        grid-column: span 1;
    }

    .content {
        grid-template-columns: 2.5vw auto auto 2.5vw;
        gap: 4rem 2vw;
    }
    #form, form {
        padding: 1rem .5rem;
    }
}

/* media-thin-phone */

@media only screen and (max-width: 500px) {
    .content {
        grid-template-columns: 0 auto auto 0;
        gap: 4rem 0;
    }

    footer.card {
        border-radius: 0;
    }
    .card {
        border-right: none !important;
        border-left: none !important;
        border-radius: 0;
    }

    .floating-icons {
        right: 0; left: unset;
        padding: 1.5rem;
        gap: 1.5rem;
        flex-direction: column;
    }
    .floating-icons .icon {
        width: 2.5rem;
        border-radius: .7rem;
    }

    .heading {
        top: 1rem;
    }

    .linked-in {
        box-shadow: 0 0 12px 1px #0087C7;
    }
    .linked-in:hover {
        box-shadow: 0 0 5px 1px #0087C7;
    }

    .instagram {
        box-shadow: 0 0 12px 1px #D5079A;
    }
    .instagram:hover {
        box-shadow: 0 0 5px 1px #D5079A;
    }

    .smoothcomp {
        box-shadow: 0 0 12px 1px #00c7c0;
    }
    .smoothcomp:hover {
        box-shadow: 0 0 5px 1px #00c7c0;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none;
    }
}