select, input {
    appearance: none;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input {
    width: 3em;
}

@font-face {
    font-family: "karrik";
    src: url("fonts/Karrik-Regular.woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "karrik";
    src: url("fonts/Karrik-Italic.woff2");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "basteleur";
    src: url("fonts/Basteleur-Moonlight.woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "basteleur-bold";
    src: url("fonts/Basteleur-Bold.woff");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "facade";
    src: url("fonts/Facade-Sud.woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "facade";
    src: url("fonts/Facade-Ouest.woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "facade";
    src: url("fonts/Facade-Sud-Ouest.woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: local('Lato'), url('assets/lato-light.woff2')
}


body {
    margin: 0;
}

.container {

    width: 100%;
    aspect-ratio: 16/9;
    /*transform: scaleX(-1);
    height: 100vh;*/
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.container canvas {
    z-index: 2;
}

#video-feed {
    width: 100%;
    transform: scaleX(-1);
    /*opacity: 0.2;*/
    position: fixed;
    top: 0;
    /*
    left: 0;
    */
    z-index: -9999999;
    /*
    width: 50vw;x: 
    z-inde9999999;
    transform: scaleX(-1);
    height: 0;
    */
}


figure {
    position: relative;
}   

fieldset {
    color: blanchedalmond;

    position: absolute;
    /*
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    */
}



/*
#flipped-canvas {
    width: 100%;
    position: fixed;
    top: 300px;
    z-index: 999999999;
    *//*
    /*
    aspect-ratio: 16/9;
    */
    /*
}

#flipped-video {
    width: 100%;
    position: fixed;
    top: 600px;
    z-index: 9999999;
}
*/



body {
    /*
    font-family: 'Lato', 'Segoe UI';
    font-size: 16px;
    font-variant: small-caps;
    margin: 0;
    background: black;
    color: white;
    /*overflow: hidden;
    width: 100vw;
    height: 100vh;
    */
}


:root {
    font-family: sans-serif;
    /*
    scroll-behavior: smooth;
    border-width: 0cap;

    width: 100vw;
    */
}

#video {}

body {
    margin: 0;
    width: 100%;
    /*
    font-family: monospace;
    background: black;
    color: white;
    font-size: 16px;
    line-height: 22px;
    margin: 0;
    */
}

header {
    color: black;
    background-color: rgb(212 255 48);

    .facade {
        font-size: x-large;
        font-family: facade;
        color: rgb(184 144 169);
        text-align: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 3%;
        margin: 0;
    }

    .karrik-xxl {
        font-size: xx-large;
        padding-left: 5%;
        padding-right: 5%;
        margin: 0;
    }
}

iframe {
    width: 100%;
    /*height: 80vw;*/
    aspect-ratio: 16 / 9;
    /*   width: 100%;
  overflow: hidden;*/
    border: 0;
}

img {
    width: 100%;
}

h1 {
    font-size: 100px;
    text-align: center;
    font-family: facade;
    margin: 0;
}

h3 {
    font-size: xx-large;
    text-align: left;
    font-family: karrik;
    margin: 0;
    padding: 5%;
    margin: 0;
}

h2 {
    font-size: xx-large;
    text-align: center;
    font-family: facade;
    padding: 5%;
    margin: 0;
}

p {
    font-size: x-large;
    text-align: left;
    font-family: karrik;
    /*color: rgb(184 144 169);*/
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 3%;

    margin: 0;
}

cite {
    font-style: inherit;
    font-size: smaller;
}

figure {
    margin-block-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    break-inside: avoid;
}

ul {
    margin-top: 0%;
    list-style-type: none;
    display: inline-block;
}

li {
    float: left;
    /* Elemente links ausrichten */
    margin-right: 10px;
}

.facade-xxl {
    font-family: facade;
}

.facade-xl {
    font-size: xx-large;
    text-align: center;
    font-family: facade;
}

.facade-x {
    font-size: x-large;
    text-align: center;
    font-family: facade;
}

.ueberschr {
    font-size: xx-large;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0;
    font-family: karrik;

}

.text {
    font-family: karrik;
}

.zitat {
    font-size: x-large;
    padding-left: 15%;
    padding-right: 15%;
    font-family: basteleur-bold;
    margin: 0;
    color: rgb(212 255 48);
}

.ar {
    padding: 5%;
    margin: 0;
    font-size: x-large;
    font-family: facade;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 3%;
    margin: 0;
    color: rgb(212 255 48);
}

.sign {
    font-size: 150px;
    margin: 0;
    padding-top: 0%;
    padding-left: 4%;
    padding-bottom: 0%;
    font-family: facade;
    font-style: bold;
    color: rgb(212 255 48);
}

.cap {
    color: rgb(212 255 48);
}

.bold {
    font-weight: bold;
}

.bunt {
    color: rgb(158, 102, 137);
}

.foooter {
    font-size: small;
    font-family: karrik;
    text-align: left;
    padding-top: 3%;
}

.link {
    color: black;
    text-decoration: none;
}

/*
figure {
    width: 40%;
    padding-left: 5%;
}

figure .container {
    transform: rotateY(180deg);
}
*/
    

#art01 {
    background-color: rgb(6 55 68);

    .ueberschr {
        color: rgb(184 144 169);
    }

    .text {
        color: rgb(184 144 169);
        padding-bottom: 10%;
    }

    figure {
        canvas {
            margin: 0 auto;
            width: 100%;
            transform: rotateY(180deg);
        }
    }

}

#art02 {
    background-color: rgb(184 144 169);

    .ueberschr {
        color: rgb(6 55 68);
    }

    .text {
        color: rgb(6 55 68);
        padding-bottom: 10%;
    }
}

#art03 {
    background-color: rgb(96 106 102);

    .ueberschr {
        color: rgb(42, 13, 99);
    }

    .text {
        color: rgb(42, 13, 99);
        padding-bottom: 10%;
    }

}

#art04 {
    background-color: rgb(42, 13, 99);

    .ueberschr {
        color: rgb(171, 184, 179);
    }

    .text {
        color: rgb(171, 184, 179);
        padding-bottom: 10%;
    }
}

#art05 {
    background-color: rgb(188 188 188);

    .ueberschr {
        color: black;
        padding-top: 2%;
    }

    .text {
        color: rgb(108, 66, 132);
        padding-bottom: 10%;
    }
}

#art06 {
    background-color: whitesmoke;

    .ueberschr {
        padding-top: 5%;
    }
}

#art07 {
    background-color: white;
    overflow-wrap: break-word;

    .text {
        color: black;
        padding-bottom: 3cap;
        font-size: small;
    }

    .ueberschr {
        padding-top: 5%;
    }
}

footer {
    background-color: rgb(188 188 188);
}