:root {
    --iframe-width: calc(100px + 40vw);
    --iframe-height: calc(100px + 25vw);
    --h1-fontsize: calc(8px + 0.65vw);
}

@media screen and (max-width: 1000px) {

    :root {
        --iframe-width: calc(150px + 50vw);
        --iframe-height: 400px;
        --h1-fontsize: calc(16px + 0.2vw);
    }
}

@media screen and (min-width: 2500px) {
    :root {
        --h1-fontsize: clamp(34px, calc(9px + 0.85vw), 50px);
    }
}

.container {
    width: fit-content;
    padding: var(--mp4);
}

h1 {
    min-width: 150px;
    width: 25%;
    padding-bottom: var(--mp2);
    border-bottom: 1.2px solid var(--color3);
}

h1>span:first-child {
    font-family: var(--font2);
    letter-spacing: 0.3px;
}

h1>span:nth-child(2) {
    font-size: var(--p-fontsize);
}

h2 {
    font-size: calc(var(--h2-fontsize) * 0.8);
}

p {
    margin-top: var(--mp2);
}

.iframecontainer {
    width: fit-content;
    height: fit-content;
    box-shadow: var(--boxshadow) var(--color1);
}

iframe {
    width: var(--iframe-width);
    max-width: 1500px;
    height: var(--iframe-height);
    max-height: 1000px;
    display: block;
    filter: brightness(95%) grayscale(1);
}

.tooltiptext {
    line-height: var(--p-fontsize);
    visibility: hidden;
    position: fixed;
    padding: var(--mp3);
    border-radius: 6px;
    color: #fff;
    background-color: #00b0d8;
    text-align: center;
}