main {
    height: 90vh;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#intro {
    text-align: center;

    h1 {
        text-transform: uppercase;

        #name-1 {
            font-family: "Manrope-ExtraBold", sans-serif;
            font-size: 3em;
            letter-spacing: 0.25em;
            color: var(--blue);
        }

        #name-2 {
            color: var(--light-green);
            letter-spacing: 0.45em;
        }
    }

    h2 {
        color: var(--light-green);
        font-weight: 500;
    }

    hr {
        height: 0;
        margin: 10px 0;
        border: 1px solid var(--green);
        border-bottom-width: 2px;
    }
}

@media (max-width: 1600px) {
    main {
        svg {
            transform: scale(0.75);
        }

        #name-2 {
            letter-spacing: 0.2em !important;
        }
    }
}

/* one column */
@media (max-width: 800px) {
    main {
        flex-direction: column;
        justify-content: flex-start;

        svg {
            transform: scale(0.4);
        }

        #name-1 {
            font-size: 1.5em !important;
        }
    }
}

@media (max-width: 400px) {
    main {
        #name-2 {
            letter-spacing: 0.1em !important;
            font-size: 0.8em !important;
        }

        #svg-canvas {
            height: 60%;
            margin-top: -120px; /* ich weiß es auch doch auch nicht... */
        }
    }
}