@font-face {
    font-family: "Vstbl01-Regular";
    src: url("fonts/Vstbl01-Regular1.otf") format("opentype"), /* Open Type Font */
    url("fonts/Vstbl01-Regular1.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Vstbl01-Regular1.woff") format("woff");
    /* Modern Browsers */
    font-weight: bold;
    font-style: normal;
}

body {
    /* background-color: rgb(175, 162, 149); */
    background-color: linen;
    display: flex;
    justify-content: center;
    font-size: large;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: background-color 700ms linear;
    /* font-family: Arial, Helvetica, sans-serif; */
}

img {
    max-width: 80%;
    max-height: 80%;
    margin: 300px
}

p {
    font-size: large;
}

#renderDisplay {
    padding: 50px;
}

#renderContainer {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 1000px;
    height: 1000px;
    z-index: 5;
    -moz-hyphens: none;
    -o-hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    position: absolute;
    top: -10000px;
    left: 0px;
}

ul {
    font-size: x-large;
}

#wrapAll {
    /* background-color: linen; */
    width: 100%;
    padding: 5%;
    margin-top: 0;
    max-width: 800px;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
}

#mainDisplay {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 3.33%;
    margin-top: 0;
    padding-top: 0;
    display: flex;
}

#insultContainer {
    /* background-color: slateblue; */
    height: 45vh;
    max-height: 45vh;
    margin-bottom: 0vh;
    padding-top: 0;
    z-index: 2;
    -moz-hyphens: manual;
    -o-hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}
/* Menü unter den Insult-Container auf schmalen Geräten */
@media (max-width: 820px) {
  #mainDisplay {
    flex-direction: column;
  }

  #insultContainer,
  #menuContainer {
    width: 100%;
  }

  #menuContainer {
    margin-left: 0;   /* überschreibt landscape-margin */
    margin-top: 1rem; /* etwas Abstand nach unten */
    flex-direction: column;
  }
}

#insultDisplay {
    margin-top: 0;
    padding-top: 0;
    display: flex;
}

#menuContainer {
    display: flex;
    z-index: 2;
}

#blobs {
    opacity: 20%;
    filter: alpha(opacity=22);
    /* Older than Firefox 0.9 */
    -moz-opacity: 0.22;
    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.22;
    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.22;
}


/* #blobWrapper {
    position: relative;
    overflow: hidden;
}

.blob{

    filter: blur(0px);

} */

.submenu {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.newDesign {
    max-width: 400px;
}

@media only screen and (min-width: 360px) {
    body {
        font-size: x-large;
    }
    #wrapAll {
        min-width: 240px;
    }
}

@media only screen and (min-width: 960px) {
    body {
        font-size: xx-large;
    }
    #wrapAll {
        min-width: 800px;
    }
}

@media (orientation: portrait) {
    #mainDisplay {
        flex-direction: column;
        justify-content: space-between;
    }
    #menuContainer,
    #saveImageContainer {
        flex-direction: column;
        padding-top: 0em;
    }
    .submenu {
        width: 100%;
    }
    .insult,
    .praise,
    .mix {
        width: 30%;
        margin: 2.5%;
    }
    .tryAgain {
        width: 66.5%;
        margin: 2.5%;
    }
    .cuty,
    .copy,
    .info,
    .closeSaveImage {
        width: 31.5%;
        margin: 2.5%;
    }
    .level {
        width: 22.5%;
        margin: 2.5%;
    }
    .refresh,
    .modus {
        width: 100%;
        margin: 2.5%;
    }
}

@media (orientation: landscape) {
    #mainDisplay {
        flex-direction: row;
        justify-content: stretch;
    }
    #insultContainer,
    #saveImageContainer {
        width: 57.5%;
    }
    #menuContainer {
        margin-top: 0;
        margin-left: 2.5%;
        width: 40%;
        flex-direction: column;
    }
    .submenu {
        width: 100%;
    }
    .insult,
    .praise,
    .mix,
    .cuty,
    .level {
        width: 30%;
        margin: 2.5%;
    }
    /* .cuty, */
    .tryAgain {
        width: 66.5%;
        margin: 2.5%;
    }
    .copy,
    .info,
    .closeSaveImage {
        width: 30.5%;
        margin: 2.5%;
    }
    .refresh {
        width: 100%;
        margin: 2.5%;
    }
    /* .level {
        width: 22.5%;
        margin: 2.5%;
    } */
    .modus {
        width: 100%;
        margin: 2.5%;
    }
}

#menuText {
    font-family: 'Arial Narrow Bold', sans-serif;
    font-weight: 400;
    height: 3em;
    font-size: small;
    color: white;
    border-radius: 10px;
    border: none;
    outline: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 63%;
    margin: 0.3em;
}

.button,
button:focus {
    z-index: 2;
    font-family: 'Arial Narrow Bold', sans-serif;
    font-weight: 400;
    height: 3em;
    background-color: rgb(115, 115, 115);
    font-size: medium;
    color: white;
    border-radius: 10px;
    border: none;
    outline: 0px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*     
    .button:hover {} */

.button:disabled {
    transition-duration: 0.2s;
    opacity: 0.4;
}

.button:active {
    transition-duration: 0.1s;
    background-color: rgb(190, 190, 190);
    font-weight: 800;
    color: white;
}


/* .button:hover:disabled {
    color: white;
    background-color: rgb((160, 160, 200));

} */

.insult .praise .mix #copyText {
    width: 100%;
    margin: 0.3em;
}

.back {
    width: 60%;
    margin: 0.3em;
    margin: 0 auto;
}

.cuty,
.copy,
.info,
.tryAgain,
.closeSaveImage {
    margin: 0.3em;
}

.level {
    margin: 0.3em;
}


/* .copy, .info {

    align-self: flex-end;
} */

.refresh,
.refresh:focus,
.closeSaveImage,
.closeSaveImage:focus {
    background-color: rgb(200, 115, 115)
}

.refresh:hover,
.closeSaveImage:hover {
    background-color: rgb(220, 130, 130);
}

.refresh:active,
.closeSaveImage:active {
    background-color: rgb(255, 190, 190);
}

.insult,
.insult:focus {
    background-color: rgb(200, 115, 200)
}

.insult:hover {
    background-color: rgb(220, 115, 220);
}

.insult:active {
    background-color: rgb(255, 115, 255);
}

.praise,
.praise:focus {
    background-color: rgb(200, 200, 115)
}

.praise:hover {
    background-color: rgb(220, 220, 115);
}

.praise:active {
    background-color: rgb(255, 255, 115);
}

.level,
.level:focus,
.modus,
.modus:focus {
    background-color: rgb(160, 160, 160)
}

.level:hover,
.modus:hover {
    background-color: rgb(180, 180, 180);
}

.level:active,
.modus:active {
    background-color: rgb(220, 220, 220);
}

.copy,
.copy:focus {
    background-color: rgb(115, 160, 115)
}

.copy:hover {
    background-color: rgb(130, 180, 130);
}

.copy:active {
    background-color: rgb(190, 240, 190);
}

.cuty,
.cuty:focus {
    background-color: rgb(180, 115, 180)
}

.cuty:hover {
    background-color: rgb(200, 130, 200);
}

.cuty:active {
    background-color: rgb(240, 180, 240);
}

.info,
.info:focus,
.tryAgain,
.tryAgain:focus {
    background-color: rgb(115, 115, 180)
}

.info:hover,
.tryAgain:hover {
    background-color: rgb(130, 130, 200);
}

.info:active,
.tryAgain:active {
    background-color: rgb(180, 180, 240);
}


/* #praiseText {
    color: rgb(183, 255, 193);
}

#mixText {
    color: rgb(250, 250, 165);
}

#insultText {
    color: rgb(156, 92, 182); */


/* } */

#infoContainer {
    z-index: 2;
    margin: 3.33%;
    display: none;
}

.mainHeading {
    z-index: 5;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin-left: 3.33%;
    padding-top: 0;
    font-size: x-large;
}

.warningHeading {
    margin-left: 0 auto;
    z-index: 5;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding-top: 2em;
    font-size: xx-large;
}

.subHeading {
    z-index: 5;
    color: grey;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding-top: 0;
    font-size: large;
}

#debugDisplay {
    z-index: 2;
    margin: 3.33%;
    font-size: medium;
}

#debugContainer {
    display: none;
}

#debugInfo {
    display: none;
}


/* #alertWindowContainer{

    position: relative;
    width: 100%;

    left: 0px;
    top:-35%;
    font-size: 1.2em; */


/* margin: 10vh auto;
    margin:  auto; */


/* display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;





}


#alertWindow {

    font-family:  'Arial Narrow Bold', sans-serif;

    font-weight: 400;
    background-color: rgb(115, 160, 115);
    padding: 1.2em 2em;
    border-radius: 10px;
}

.hidden{
    opacity: 0; */


/* transition-duration: 0.0s;
    transition-property: ; */


/*
.show{

    opacity: 1;
}

.fadeSlow{
    transition-duration: 0.4s;
    transition-property: all;

}

.fadeFast{
    transition-duration: 0.2s;
    transition-property: all;

} */

.todoList {
    color: rgb(168, 50, 50)
}

.done {
    color: rgb(50, 168, 50);
    text-decoration: line-through;
}

.workInProgress {
    color: rgb(50, 50, 168);
}

#saveImageContainer {
    /* padding-top: 500px; */
    border-radius: 2.5%;
    display: none;
    padding: 3%;
    /* background-color: white; */
    /* display: flex;
    flex-direction: column;
    flex-flow: column-reverse; */
    height: 1000px;
    position: relative;
}

#renderedJpg {
    position: absolute;
    top: 1em;
    border: 10px solid white;
    border-radius: 2.5%;
    margin: auto 9%;
}

.saveImageTextBox {
    font-size: medium;
}

#warning {
    /* position: absolute;
    top: 0; */
    font-size: medium;
}

#closeSaveImage {
    z-index: 99;
}

#renderOutput {
    width: 80vh;
    /* top: 0px;
    left: 0px; */
    /* display: block; */
    /* max-width: 300px;
    max-height: 300px; */
    /* padding: 10px; */
    z-index: 99;
}

#renderOutputWrapper {
    /* display: flex;
    flex-direction: column;
    flex-flow: column-reverse;
    /* scale: (0.5, 0.5); */
    /* transform: scale(.3); */
    /* position: absolute; */
    z-index: 99;
}


/* #renderOutputInfo {
        position: relative;
    top: 50vh;
    } */

#renderWrapper {
    max-width: 300px;
    max-height: 300px;
    overflow: hidden;
    background: transparent;
}