/* all kartogramm-related colours, 
 * add additional ones here */

:root {
    /* political parties */
    --fpoe:   #334eaa;  /* #7587c5 #adb8dd */
    --gruene: #88b700;  /* #aece52 #cfe299 */
    --jetzt:  #b6b6b6;  /* #cccccc #e2e2e2 */
    --neos:   #d94ca5;  /* #e586c2 #f0b7db */
    --oevp:   #99ccd7;  /* #badce4 #d6ebef */
    --spoe:   #bc000b;  /* #d25259 #e4999d */

    /* general page properties */
    --background: #271f24;
    --highlight:  #a8869b;
    --rot:        #ed1c24;
    --weiss:      #ffffff;
    --text:       var(--weiss);
    --href:       #cbb8c4;
}
path.am_fpoe {
    fill: #0042ba;
}
path.am_gruene {
    fill: #7eee19;
}
path.am_oevp {
    fill: #4ac9d4;
    stroke: #4ac9d4;
}
path.am_spoe {
    fill: #ff0000;
}

path.oesterreich {
    fill: #fff;
}

input, button {
    margin-top: 50px;
}

svg {
    border: 1px solid #fff;
}

svg path:hover {
    stroke: #fff;
    stroke-width: 2px;
}
html,
body {
    background-color: var(--background);
    color: var(--text);
    font: normal normal 14px/16.8px "IBM Plex Sans";
}

section.everythingelse {
    z-index: 10;

    position: absolute;

    width: 94vW;
    height: 94vH;
    margin: 3vW 3vH;
}
section.map {
    z-index: 20;
    position: absolute;
    
    width: 80vW;
    height: 80vH;

    top: 10vH;
    right: 10vW;
    bottom: 10vH;
    left: 10vW;
}

section.map svg {
    width: 100%;
    height: 100%;

    vertical-align: middle;
    text-align: center;

    border: none;
    /*background-color: var(--background);*/
    background: none;
}

section.map svg path {
    stroke: none;
    stroke-width: 0;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-opacity: 0.8;
}
section.map svg path.hover {
    stroke: var(--weiss);
    stroke-width: 2;
}

section.map svg path.oesterreich {
    fill: none;
    stroke: var(--rot);
    stroke-width: 3px;
}
section.map svg path.fpoe {
    fill: var(--fpoe);
}
section.map svg path.gruene {
    fill: var(--gruene);
}
section.map svg path.jetzt {
    fill: var(--jetzt);
}
section.map svg path.neos {
    fill: var(--neos);
}
section.map svg path.oevp {
    fill: var(--oevp);
}
section.map svg path.spoe {
    fill: var(--spoe);
}
section.everythingelse {
    z-index: 100;

    position: absolute;

    width: 94vW;
    height: 10vH;
    margin: 3vW 0vH;
}
section.everythingelse input[type=range] {
    width: 80vW;
    text-align: center;
}
section.map svg {
    transition: transform 0.5s ease-in-out;
    transform-origin: left top;
}

@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
    /* hochkant */
    section.map svg {
        transform: 
            rotate(-90deg)
            translateX(-100%);
        width: 100vH;
        height: 100vW;
    }
}
@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
    /* daquer */
    section.map svg {
    }
}