.header {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 4.5vw;

    background-color: var(--color-dark-gray);
}

.header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    background-image: url("/img/backgrounds/main-bg.png");
    background-repeat: repeat;
    background-size: 6.8vw 6.8vw;

    opacity: 1;
}

@media screen and (max-width: 1000px) and (orientation: portrait) {
    .header {
        height: 12vw;
    }

    .header::before {
        background-size: 10vw 10vw;
    }
}