:root {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: "Arial";
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pageBackground);
}

div.Install {
    padding: 0 min(6.8vw, 68px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
div.InstallUpper {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.InstallLower {
    width: 100%;
    position: relative;
    border-radius: min(2vw, 20px);
    padding: 0;
    z-index: 1;

    background-color: var(--barButtonBackground);
    border-top: min(0.8vw, 8px) solid var(--barButtonBackground);
    border-left: min(0.8vw, 8px) solid var(--barButtonHighlight);
    border-bottom: min(0.8vw, 8px) solid var(--barButtonShading);
    border-right: min(0.8vw, 8px) solid var(--barButtonShading);
}

div.InstallTab {
    order: 0;
    width: 20vw;
    padding: min(2vw, 20px) 0 0 0;
    margin: min(4vw, 40px) min(1vw, 10px) 0 min(1vw, 10px);
    border-radius: min(2vw, 20px) min(2vw, 20px) 0 0;

    position: relative;
    top: min(0.8vw, 8px);
    z-index: 2;

    display: flex;
    justify-content: space-between;

    background-color: var(--barButtonBackground);
    border-left: min(0.8vw, 8px) solid var(--barButtonBackground);
    border-right: min(0.8vw, 8px) solid var(--barButtonBackground);
}
div#middle.InstallTab {
    order: 1;
}
div#reverse.InstallTab {
    order: 2;
}

h1.InstallCover {
    position: absolute;
    width: 100%;
    height: min(2.2vw, 22px);
    border-radius: min(2vw, 20px) min(2vw, 20px) 0 0;

    margin: 0;
    padding: 0;
    left: max(-0.8vw, -8px);
    top: max(-0.8vw, -8px);

    background-color: var(--barButtonBackground);
    border-top: min(0.8vw, 8px) solid var(--barButtonHighlight);
    border-left: min(0.8vw, 8px) solid var(--barButtonHighlight);
    border-right: min(0.8vw, 8px) solid var(--barButtonShading);
}
h2.InstallTab {
    margin: 0;
    font-size: min(2.8vw, 28px);
    font-weight: bold;

    text-shadow:
        min(0.1vw, 1px) min(0.1vw, 1px) 0 var(--titleBoxShadowHigh),
        max(-0.1vw, -1px) max(-0.1vw, -1px) 0 var(--titleBoxShadowLow);
    color: var(--generalHeading);
}

span.InstallTab.Left {
    right: min(2.8vw, 28px);
    border-radius: 0 0 min(2vw, 20px) 0;
    border-bottom: min(0.8vw, 8px) solid var(--barButtonHighlight);
    border-right: min(0.8vw, 8px) solid var(--barButtonHighlight);
}
span.InstallTab.Right {
    left: min(2.8vw, 28px);
    border-radius: 0 0 0 min(2vw, 20px);
    border-bottom: min(0.8vw, 8px) solid var(--barButtonHighlight);
    border-left: min(0.8vw, 8px) solid var(--barButtonShading);
}
span.InstallTab {
    width: min(2vw, 20px);
    height: min(4vw, 40px);
    position: relative;
}

div.InstallSwitch {
    order: 1;
    width: 20vw;
    padding: min(1.5vw, 15px) 0;
    margin: min(4vw, 40px) min(1vw, 10px) 0 min(1vw, 10px);
    border-radius: min(2vw, 20px) min(2vw, 20px) 0 0;

    position: relative;
    top: min(0.8vw, 8px);
    cursor: pointer;
    z-index: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;

    background-color: var(--barButtonBackgroundB);
    border-top: min(0.8vw, 8px) solid var(--barButtonHighlightB);
    border-left: min(0.8vw, 8px) solid var(--barButtonHighlightB);
    border-right: min(0.8vw, 8px) solid var(--barButtonShadingB);
}
div.InstallSwitch:hover {
    outline: min(0.4vw, 4px) solid var(--barButtonOutline);
    filter: brightness(90%);
    transform: scaleX(1.05) scaleY(1.1);
}
div.InstallSwitch:active {
    outline: min(0.4vw, 4px) solid var(--barButtonOutline);
    filter: brightness(75%);
    transform: scaleX(0.98) scaleY(0.96);
}

h2.InstallSwitch {
    margin: 0;
    font-size: min(2vw, 20px);
    font-weight: bold;

    text-shadow:
        min(0.1vw, 1px) min(0.1vw, 1px) 0 var(--titleBoxShadowHighB),
        max(-0.1vw, -1px) max(-0.1vw, -1px) 0 var(--titleBoxShadowLowB);
    color: var(--generalHeadingB);
}
p.InstallLower
{
 margin: min(2vw, 20px);
    padding: 0;

    text-align: center;
    font-size: min(2vw, 20px);
    font-weight: normal;
    color: var(--generalText);
}

div.InstallCover {
    position: absolute;
    height: min(2.2vw, 22px);
    top: max(-0.8vw, -8px);

    margin: 0;
    padding: 0;
    background-color: var(--barButtonBackground);
}
div.InstallCover.Left {
    width: calc(20vw - min(12.8vw, 128px));
    left: max(-0.8vw, -8px);
    border-radius: min(2vw, 20px) 0 0 0;

    border-top: min(0.8vw, 8px) solid var(--barButtonHighlight);
    border-left: min(0.8vw, 8px) solid var(--barButtonHighlight);
}
div#middle.InstallCover.Left {
    width: calc(40vw - min(9.3vw, 93px));
}
div#reverse.InstallCover.Left {
    width: calc(60vw - min(5.8vw, 58px));
}

div.InstallCover.Right {
    width: calc(60vw - min(5.8vw, 58px));
    right: max(-0.8vw, -8px);
    border-radius: 0 min(2vw, 20px) 0 0;

    border-top: min(0.8vw, 8px) solid var(--barButtonHighlight);
    border-right: min(0.8vw, 8px) solid var(--barButtonShading);
}
div#middle.InstallCover.Right {
    width: calc(40vw - min(9.3vw, 93px));
}
div#reverse.InstallCover.Right {
    width: calc(20vw - min(12.8vw, 128px));
}

h1.InstallDescription {
    width: calc(100% - min(4vw, 40px));
    margin: min(4vw, 40px) min(2vw, 20px) min(2vw, 20px) min(2vw, 20px);

    text-align: center;
    font-size: min(3.6vw, 36px);
    font-weight: bold;
}
h3.InstallDescription {
    margin: min(1vw, 10px) min(4vw, 40px);
    font-size: min(2.8vw, 28px);
    font-weight: bold;
}
p.InstallDescription {
    margin: min(2vw, 20px);
    font-size: min(2vw, 20px);
    font-weight: normal;
}

div.Section {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* transition: transform 0.4s ease; */
}
/* div.Section:hover {
    transform: ScaleX(1.02) ScaleY(1.02);
} */

@media (max-width: 700px) {
    h3.InstallDescription {
        margin: min(1vw, 10px) min(6vw, 60px);
        font-size: min(3vw, 30px);
        font-weight: bold;
    }
    p.InstallDescription {
        margin: min(3vw, 30px);
        font-size: min(2.4vw, 24px);
        font-weight: normal;
    }
}