@keyframes blurin {
    0% {
        filter: blur(2px);
        opacity: 0;
    }
}

@keyframes blurin-contact {
    0% {
        filter: blur(2px);
        opacity: 0;
    }

    30% {
        filter: blur(2px);
        opacity: 0;
    }
}

ion-icon {
    font-size: 18px;
    position: relative;
    top: 2px;
}

body {
    margin: 0;

    /* Disables blur until the script is run */
    --dpr: 0;
}

body,
button {
    font-family: "Lexend", sans-serif;
}



/* Title card */
.title-card {
    background-color: black;
    position: relative;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.title-card h1,
.title-card .contact {
    transform: translateY(-20px);
    text-transform: uppercase;
    color: #d5dc62;
    z-index: 2;
}

.title-card h1 {
    filter: blur(calc(0.5px / var(--dpr)));
}

.title-card div {
    filter: blur(calc(0.4px / var(--dpr)));
}

.title-card a {
    color: #d5dc62;
}

.title-card a:hover {
    color: #FCFFF1;
}

.title-card h1 {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.2em;
    animation: 2s ease-out blurin;
}

.title-card .contact {
    animation: 3.5s ease-in-out blurin-contact;
    white-space: nowrap;
}

.title-card .contact div {
    padding: 7px;
    display: inline;
}

.title-card .contact span,
.title-card .contact a {
    font-size: 12px;
    display: inline-block;
    direction: rtl;
    text-align: left;
    overflow: hidden;

    max-width: 0;
    --full-width: 200px;
    transition: max-width 0.3s ease-in-out;
}

.title-card .contact .github {
    padding-left: 60px;
}

.title-card .contact .phone {
    padding-right: 60px;
}

.title-card .contact div:hover span,
.title-card .contact div:hover a {
    max-width: var(--full-width);
}

.title-card #waves,
.title-card .noise {
    position: absolute;
}

.title-card #waves {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@keyframes noise {
    0% {
        transform: translate(-12%, -9%);
    }

    10% {
        transform: translate(-7%, -11%);
    }

    20% {
        transform: translate(-12%, -5%);
    }

    30% {
        transform: translate(-5%, -16%);
    }

    40% {
        transform: translate(-19%, -6%);
    }

    50% {
        transform: translate(-5%, -2%);
    }

    60% {
        transform: translate(-14%, -9%);
    }

    70% {
        transform: translate(-3%, -0%);
    }

    80% {
        transform: translate(-10%, -1%);
    }

    90% {
        transform: translate(-14%, -15%);
    }

    100% {
        transform: translate(-8%, -1%);
    }
}

.title-card .noise {
    opacity: 0.2;
    background-image: url(resources/noise.webp);
    background-repeat: repeat;
    mix-blend-mode: multiply;
    width: 1000%;
    height: 1000%;
    animation: noise 11s steps(12) infinite;

    z-index: 0;
}



/* Content */
.content {
    position: relative;
    background-color: #FCFFF1;
    color: #282828;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(resources/noise.webp);
    mix-blend-mode: darken;
    opacity: 0.04;
}

.content h1 {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 24px;
    margin: 0;
    filter: blur(calc(0.5px / var(--dpr)));
}

.content h2 {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 0;
    margin-top: 20px;
    filter: blur(calc(0.45px / var(--dpr)));
}

.content a {
    color: #282828;
    font-weight: 600;
}

.content a:hover {
    color: #5e61a3;
}

.content a.main {
    display: inline-block;
    margin-bottom: 5px;
    filter: blur(calc(0.45px / var(--dpr)));
}

.content p,
.content ul {
    margin: 0;
    filter: blur(calc(0.4px / var(--dpr)));
    font-size: 14px;
}

.content>div {
    box-sizing: border-box;
    background-color: #FFFFFF;
    height: fit-content;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    z-index: 1;


    --v-pad: 20px;
    --h-pad: 40px;
    --extra-pad: 0px;
    /* Minimum margin ↘ */
    width: calc(100% - (30px - 2 * var(--extra-pad)));
    max-width: calc(720px + 2 * var(--extra-pad));
    padding: calc(var(--v-pad) + var(--extra-pad)) calc(var(--h-pad) + var(--extra-pad));
    margin-top: calc(0px - var(--extra-pad));
    margin-bottom: calc(50px - var(--extra-pad));

    transition:
        box-shadow 0.1s,
        width 0.1s,
        max-width 0.1s,
        padding 0.1s,
        margin 0.1s;
}

@media (max-width: 600px) {
    .content>div {
        --v-pad: 15px;
        --h-pad: 15px;
    }
}

.content>div:hover {
    --extra-pad: 5px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.10);
}

.content>div.selected {
    --extra-pad: 15px;
    cursor: initial;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
}

.content>div .details {
    --full-height: 1000px;
    max-height: 0;
    transition: max-height 0.5s;
}

.content>div.selected .details {
    max-height: var(--full-height);
}

.content svg {
    user-select: none;
}

.content svg,
.content img,
.content embed {
    box-sizing: border-box;
    max-width: 100%;
    float: right;
    clear: both;
    margin-left: 30px;
}

.content .details img {
    margin-top: 18px;
    margin-bottom: 18px;
}

.content div {
    overflow: hidden;
}

.content .video {
    width: 100%;
    margin-top: 50px;

    position: relative;
    padding-bottom: calc(100% / (16 / 9));
    height: 0;
    overflow: hidden;
}

.content .video>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.content .collapse {
    background-color: transparent;
    border: none;
    display: block;
    margin: auto;
    margin-top: 40px;
    color: #b0b0b0;
    font-weight: 700;
    text-transform: uppercase;
}

.content .collapse:hover {
    text-decoration: underline;
    cursor: pointer;
}