index.css

:root {
    --circlePlacementOffset: 0px;
    --testingCardVerticalOffset: 10%;
    --testingCardHorizontalOffset: 10%;
    --documentingCardVerticalOffset: 10%;
    --documentingCardHorizontalOffset: 10%;

    --testingVerticalPointOffset: 20%;
    --testingHorizontalPointOffset: 20%;

    --documentingVerticalPointOffset: 20%;
    --documentingHorizontalPointOffset: 20%;

    --cardWidth: 30%;
    --cardHeight: 30%;
}

@media only screen and (max-width: 650px) {
    :root {
        --testingCardVerticalOffset: 24px;
        --testingCardHorizontalOffset: 24px;
        --documentingCardVerticalOffset: 24px;
        --documentingCardHorizontalOffset: 24px;
        --cardWidth: 40%;
        --cardHeight: 30%;
    }

    body {
        font-size: 13px;
    }
    h1 {
        font-size: 18px;
    }
}

@media only screen and (min-width: 1600px) {
    :root {
        --cardWidth: 20%;
        --cardHeight: 20%;

        --circlePlacementOffset: -2px;
    }
}

body {
    --text-color: #bbbbbb;

    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

    margin: 0;
    padding: 0;

    background-color: #66669b;
    color: var(--text-color);
}

.landing {
    display: flex;
    flex-direction: column;
    max-width: 1250px;
    padding: 0 16px;
    margin: 0 auto;
    overflow: hidden;
}

.testing-triangle-image,
.testing-triangle {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 85%);
}

.testing-triangle {
    background-image: linear-gradient(45deg, #000, #111);
}

.testing-triangle-image {
    background-image: url(webtau-terminal.png);

    background-repeat: no-repeat;
    background-size: 100vh;
    opacity: 0.2;
}

.documenting-triangle-image,
.documenting-triangle {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    clip-path: polygon(100% 16%, 100% 100%, 0% 100%, 0% 86%);
}

.documenting-triangle {
    background-image: linear-gradient(45deg, #6f438d, #f1e7ee);
}

.documenting-triangle-image {
    background-image: url(znai-doc.png);

    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.4;
}


.testing-point {
    position: fixed;
    bottom: calc(var(--testingVerticalPointOffset) + var(--circlePlacementOffset));
    left: var(--testingHorizontalPointOffset);

    background: linear-gradient(45deg, #96c93d, #0b3f05);
    border: 1px solid #0b3f05;
}

.documenting-point {
    position: fixed;
    top: calc(var(--documentingVerticalPointOffset) + var(--circlePlacementOffset));
    right: var(--documentingHorizontalPointOffset);

    background: linear-gradient(45deg, #8E2DE2, #bbb7c4);
    border: 1px solid #8E2DE2;
}

.diagonal-point {
    box-sizing: border-box;

    width: 24px;
    height: 24px;

    border-radius: 5px;
}

.card {
    position: fixed;
    border: 1px solid;
    border-radius: 5px;

    padding: 16px;

    color: #222;

    overflow: auto;
}

.card h1 {
    margin: 0;
}

.card a,
.card a:visited {
    color: var(--card-text-color);
    text-decoration: none;
}

.testing-card {
    --card-text-color: #111;

    top: var(--testingCardVerticalOffset);
    left: var(--testingCardHorizontalOffset);
    width: var(--cardWidth);
    height: var(--cardHeight);

    border-color: #222;
    background: linear-gradient(to left, #96c93d, #00b09b);
}

.documenting-card {
    --card-text-color: #ddd;

    bottom: var(--documentingCardVerticalOffset);
    right: var(--documentingCardHorizontalOffset);
    width: var(--cardWidth);
    height: var(--cardHeight);

    border-color: #4A00E0;
    background: linear-gradient(to right, #4A00E0, #8E2DE2);
}

.card-connection-testing {
    position: fixed;
    left: calc(var(--testingVerticalPointOffset) + 11px);
    bottom: var(--testingVerticalPointOffset);
    width: 2px;
    height: calc(100% - var(--testingVerticalPointOffset) - var(--testingCardVerticalOffset) - 10px);

    background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            #505b31 10px,
            #7a671b 25px
    )
}

.card-connection-documenting {
    position: fixed;
    right: calc(var(--documentingHorizontalPointOffset) + 11px);
    top: var(--documentingVerticalPointOffset);
    width: 2px;
    height: calc(100% - var(--testingVerticalPointOffset) - var(--testingCardVerticalOffset) - 10px);

    background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            #4A00E0 10px,
            #8E2DE2 25px
    )
}