header .svg-wrapper {
    position: absolute;
    top: calc(3rem - 27vw);
    left: 0;
    width: 100%;
}

.header-h1 {
    font-family: "Antonio";
    top: calc(9vw);
    left: calc(5vw*2);
    font-size: 3rem;
    position: absolute;
    transform: rotate(-10deg);
    color: var(--white);
}

@media (min-width: 1600px) {
    header .svg-wrapper {
        top: calc(3rem - 29vw);
    }

    .header-h1 {
        top: calc(6vw);
        font-size: 4rem;
    }
}

@media (min-width: 2400px) {
    header .svg-wrapper {
        top: calc(3rem - 31vw);
    }

    .header-h1 {
        top: calc(7vw);
    }
}

@media (min-width: 3000px) {
    header .svg-wrapper {
        top: calc(3rem - 33vw);
    }

    .header-h1 {
        top: calc(6vw);
    }
}

@media (max-width: 1200px) {
    .header-h1 {
        font-size: 2rem;
    }
}

nav.header {
    z-index: 9;
    position: absolute;
    right: 0;
    top: 6rem;
}

nav.header ul {
    margin-top: 4vw;
    margin-right: 4vw;
}

nav.header li {
    display: inline-block;
    text-decoration: none;
    margin-right: 2vw; 
    position: relative;
}

nav.header li svg {
    width: 2vw;
    height: 2vw;
    min-width: 24px;
    min-height: 24px;
    filter: invert(20%) sepia(85%) saturate(1906%) hue-rotate(340deg) brightness(91%) contrast(87%);
    transition: filter .2s;
}

.back-header {
    height: 14rem;
}

nav .tooltip-btn {
    border: none;
}

nav .tooltip {
    position: absolute;
    right: -0.6rem;
    top: calc(100% + 1rem);
    background-color: var(--white);
    width: 400px;
    padding: 2rem;
    border-radius: 0.2rem;
}

nav .tooltip h3 {
    font-family: "Antonio";
}

nav .tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 0.8rem;
    border: 0.6rem solid var(--white);
    border-color: transparent transparent var(--white) transparent;
}

@media (max-width: 550px) {
    nav.header li {
        position: static;
    }

    nav .tooltip {
        right: 1rem;
        width: calc(100vw - 2rem);
    }

    nav .tooltip::after {
        border: none;
    }
}

nav .close-tooltip {
    border: none;
    position: absolute;
    top: 0rem;
    right: 0.3rem;
    width: 1rem;
    height: 1rem;
    padding: 1rem;
} nav .close-tooltip::before,
  nav .close-tooltip::after {
    position: absolute;
    top: 1rem;
    right: 0.5rem;
    content: "";
    width: 1rem;
    height: 2px;
    background-color: var(--black);
} nav .close-tooltip::after {
    transform: rotate(45deg);
} nav .close-tooltip::before {
    transform: rotate(-45deg);
}