html {
    scroll-behavior: smooth;
}

body {
    --background-color: #0d0d0d;
    --text-color: #ccc;
    --bad-color: #fa3131;
    --warning-color: #a39529;
    --neutral-color: #235c9a;
    --background-light-color: #131313;

    background-color: var(--background-color);
    color: var(--text-color);

    margin: 0;

    display: flex;
    flex-direction: column;

    font-family: "Rubik";
}

header {
    display: flex;
    flex-direction: row;
    gap: 20px;
    position: sticky;

    font-family: "Tektur";

    padding: 12px 0;
    margin: 0 auto;

    height: fit-content;
    width: 90%;

    border-bottom: 4px solid var(--text-color);
}

.header-title {
    font-weight: 800;
    font-size: 32px;
    text-decoration: none;

    background-color: var(--text-color);
    color: var(--background-color);

    padding: 0 8px;
    margin: auto 0;
    height: fit-content;
}

.header-title:hover {
    text-decoration: underline;
}

.header-delimiter {
    font-weight: 700;
    font-size: 18px;
    height: fit-content;
    margin: auto 0;
}

.header-subtitle {
    font-size: 28px;
    height: fit-content;
    margin: auto 0;
}



.body-content {
    margin: 28px auto;

    height: fit-content;
    width: 90%;

    display: flex;
    flex-direction: column;

    flex: 1;
}


.github-link {
    color: var(--background-color);
    background-color: var(--text-color);

    padding: 2px 6px;
    margin: 6px auto 6px 0;

    font-family: "Tektur";
    font-size: 18px;
    font-weight: 600;

    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: row;
    gap: 6px;

    text-decoration: none;

    --notchSize: 6px;
    clip-path: 
        polygon(
        0% 0%, 
        0% 0%, 
        calc(100% - var(--notchSize)) 0%, 
        100% var(--notchSize), 
        100% 100%, 
        100% 100%, 
        var(--notchSize) 100%, 
        0% calc(100% - var(--notchSize))
        );
}

.github-link-center {
    margin-left: auto;
    margin-right: auto;
}

.github-link:hover {
    text-decoration: underline;
}

.github-link-icon {
    width: 18px;
    height: 18px;

    margin: auto 0;
}






.overview {
    width: fit-content;
    max-width: 700px;
    margin: 10vh auto 20vh auto;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.overview-title {
    font-size: 42px;
    font-weight: 400;
    font-family: "Tektur";
    text-align: center;

    width: fit-content;
    margin: 0 auto;
}

.overview-description {
    font-family: "Rubik";
    font-size: 22px;
    font-weight: 300;
    text-align: center;

    width: fit-content;
    margin: 0 auto;
}



.underconstruction {
    width: 350px;
    height: auto;

    margin: 0 auto;
}






footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    bottom: 0;

    font-family: "Tektur";

    padding: 12px 0;
    margin: 0 auto;

    height: fit-content;
    width: 90%;

    border-top: 4px solid var(--text-color);
}

.footer-text {
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    color: var(--text-color);
}

.footer-text-colorinvert {
    color: var(--background-color);
    background: var(--text-color);
    width: fit-content;
    padding: 0 4px;
}

a, div, button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}






@media (max-width: 560px) {
    .github-link {
        padding: 2px 4px;
        font-size: 14px;
        font-weight: 500;
    }

    .github-link-icon {
        width: 14px;
        height: 14px;

        margin: auto 0;
    }

}


.zoomable {
    cursor: zoom-in;
}

.windowImg-block {
    position: fixed;

    width: 100%;
    height: 100%;

    display: flex;
    cursor: zoom-out;

    background: rgba(0, 0, 0, 0.9);
}

.windowImg-image {
    max-width: min(90%, 1400px);
    width: auto;
    min-width: 140px;

    height: auto;
    max-height: min(90%, 1400px);
    min-height: 140px;

    object-fit: contain;
    display: block;

    margin: auto;

    cursor: zoom-out;
    pointer-events: none;

    border: 3px solid var(--text-color);
}




.intro-animation-parent {
    position: relative;
}

.intro-animation-child {
    position: absolute;
    height: 100%;
    background-color: var(--text-color);
    left: 0;

    animation: intro 1s 1 steps(100);
    animation-timing-function: ease-out;
}

@keyframes intro {
    from {
        width: 100%;
    }

    50% {
        width: 100%;
    }

    to {
        width: 0%;
        display: none;
    }
}