:root {
    --debugColor: rgba(255, 255, 255, 0.1);
    --debugColor: rgba(255, 255, 255, 0.0);


    --backgroundColor: rgb(15, 15, 15);
    --backgroundDarkener: rgba(0, 0, 0, 0.7);
    --backgroundBrightener: rgb(0, 0, 0);
    --footerColor: rgb(40, 40, 40);

    --firstHighlight: rgb(255, 166, 0);
    --secondHighlight: rgb(0, 194, 94);
    /* --firstHighlight: rgb(87, 136, 177); */
    /* --secondHighlight: rgb(192, 62, 90); */

    --buttonBakckground: var(--firstHighlight);
    --buttonText: rgb(0, 0, 0);
    --buttonsHover: rgb(255, 255, 255);
    --buttonTextHover: rgb(0, 0, 0);

    --normalTextAndOutlines: rgba(255, 255, 255, 0.7);
    --boldNormalText: rgb(255, 255, 255);
    --dimText: rgba(255, 255, 255, 0.3);
    --logText: rgba(255, 255, 255, 0.6);

    --inputField: rgba(255, 255, 255);
    --inputFieldPlaceholderText: rgba(0, 0, 0, 0.4);
    --inputFieldText: rgb(0, 0, 0);

    --backgroundResults: rgba(0, 0, 0, 1);
    /* --backgroundResults: rgba(255, 0, 0, 0.04); */
    --backgroundIMGs: rgb(30, 0, 0);
    /* --backgroundIMGs: rgba(255, 255, 255, 0.02); */

    --resultLinkColor: var(--backgroundIMGs);
    --resultLinkColorHover: rgb(60, 0, 0);

    --resultMarginLeft: 20px;
    --resultMarginRight: 20px;

    --dividerColor: rgba(255, 255, 255, 0.03);

    --backgroundScrollbar: var(--backgroundColor);
    --backgroundScrollbarThumb: rgb(255, 255, 255, 0.2);
    --backgroundScrollbarThumbHover: rgba(255, 255, 255, 0.4);

    --red: rgb(204, 7, 30);
    --green: rgb(88, 214, 83);


    --heightBottom: 30px;
    --buttonHeight: 60px;

    --widthLog: 210px;
    --widthLeft: 270px;
    --widthRight: 449px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.cRed {
    color: var(--red);
}

.cGreen {
    color: var(--green);
}

.cWhite {
    color: var(--secondHighlight)
}

/* FONTS */

@font-face {
    font-family: 'UnitRounded';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./fonts/Unit-Rounded-Custom-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'UnitRounded';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/Unit-Rounded-Custom-Medi.woff2') format('woff2');
}

html,
.tooltip,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 300;
}

.optionButtons {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 500;
}

.optionButtons p {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 500;
}

.tBold {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 500;
}

#inputFieldSearch,
textarea {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 500;
}

.inputFieldsetLabel {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 500;
}

.inputLabel {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 300;
}

.inputText {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 300;
}

.dropzone {
    font-family: 'UnitRounded', 'Courier New', Courier, monospace;
    font-weight: 300;
}

/* ICONS */

/* .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } */
/* .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } */

/* .material-icons.md-light { color: rgba(255, 255, 255, 1); } */
/* .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } */

.material-symbols-outlined {
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-variation-settings:
        'FILL' 0,
        'wght' 500,
        'GRAD' 0,
        'opsz' 48
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 16px;
    color: var(--normalTextAndOutlines);
    background-color: var(--debugColor);
}

*,
*:before,
*:after {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

html {
    height: 100%;
    background-color: var(--backgroundColor);
    overflow-x: hidden;
}

body {
    width: 100%;
}

h1 {
    font-size: 18px;
    align-self: flex-start;
}

h2 {
    font-size: 20px;
}

.tBold {
    color: var(--secondHighlight);
}

.inputLabel {
    line-height: 1.1;
}

.tSmall {
    font-size: 13px;
    /* line-height: 1.5; */
    /* vertical-align: text-bottom; */
    margin: 0px 0px 0px 0px;
    color: var(--secondHighlight);
    color: var(--dimText);
    vertical-align: super;
}

.tInBold {
    color: var(--boldNormalText);
}

.tooltip {
    padding: 8px 15px 7px 12px;
    color: var(--boldNormalText);

    background-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);

    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;

    font-size: 16px;

    box-sizing: content-box;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* SITE */

#siteCenterer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

#bodyContainer {
    position: relative;
    min-width: calc(var(--widthLog) + var(--widthLeft) + var(--widthRight));
    width: 1800px;
    /* width: 100%; */
    max-width: 100%;
    overflow: hidden;
    resize: horizontal;
}

#siteContent {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - var(--heightBottom));
    height: calc(100svh - var(--heightBottom));
    min-height: calc(100vh - var(--heightBottom));
    min-height: calc(100svh - var(--heightBottom));
    max-height: calc(100vh - var(--heightBottom));
    max-height: calc(100svh - var(--heightBottom));
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
    background-color: var(--backgroundColor);
}

#footerContainer {
    width: 100%;
    height: var(--heightBottom);
    background-color: var(--backgroundColor);
}

.relative {
    position: relative;
}

#hideControls {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--backgroundDarkener);
    z-index: 10;
}

/* LEFT */

#inputContent {
    min-width: var(--widthLeft);
    width: 610px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    background-color: var(--debugColor);
    overflow: hidden;
    padding: 10px 20px;
    resize: horizontal;
}

.flexContent {
    display: flex;
    background-color: var(--debugColor);
}

#inputContentDivider {
    width: 100%;
    height: 100%;
}

#flexReturn {
    width: 100%;
    height: 100%;
    /* max-height: calc(100% - 500px); */
    margin: 25px 0px 0px 0px;
    overflow: hidden;
}

#flexLogo {
    width: 100%;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 20px 0px 0px 0px;
}

/* CONTAINER & STUFF */

.divider {
    width: 20px;
    height: 12px;
}

.dividerButtonHor {
    height: 5px;
}

.dividerButtonVer {
    width: 10px;
}

.containerHorWrapParent,
.containerHorWrap,
.containerVert,
.containerHor,
.containerHorInWrap,
.containerHVertIn,
.containerHorIn {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    max-width: 100%;
    background-color: var(--debugColor);
    gap: 12px 16px;
}

.containerHorWrapParent,
.containerHorWrap,
.containerHorInWrap {
    flex-wrap: wrap;
}

.containerHorWrapParent,
.containerHorWrap,
.containerHor,
.containerHorInWrap,
.containerHorIn {
    flex-direction: row;
}

.containerVert,
.containerVertIn {
    flex-direction: column;
}

.containerHorWrap {
    flex: 1 1 350px;
}

.containerHorInWrap {
    flex: 0 1;
    width: calc(100% - 8px);
    justify-content: flex-start;
    gap: 0px 0px;
}



.containerVertButtons {
    width: 100%;
}

.containerHorWrapButtons {
    flex: 1 1 auto;
}

.buttonGap {
    gap: 10px 10px;
}


/* INPUTS */

.inputFlexChoice {
    flex: 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

/* Audio Models */
#chatterbotFlexChoice {
    flex: 200 0 200px;
    min-width: 200px;
}

#audioModelsLeft {
    flex: 90 0 180px;
    min-width: 180px;
}

#audioModelsRight {
    flex: 160 0 160px;
    min-width: 160px;
}

/* Dropzone */
.dropzone {
    flex: 30 0 120px;
    min-width: 120px;
    min-height: 60px;
}

/* Language Models */
#llmFlexChoice {
    flex: 200 0 200px;
    min-width: 200px;
}

#llmModelsLeft {
    flex: 90 0 180px;
    min-width: 180px;
}

#llmModelsRight {
    flex: 140 0 140px;
    min-width: 140px;
}

/* Image Models */
#imgFlexChoice {
    flex: 40 0 160px;
    min-width: 160px;
}


.inputForm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.inputFieldset {
    padding: 2px 10px 25px 15px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 16px;
    color: var(--normalTextAndOutlines);
    border: 2px solid;
    border-radius: 4px;
}

.inputFieldsetLabel {
    padding: 0px 5px;
    margin: 0px 0px 0px -10px;
}

.inputHeader {
    margin: 8px 0px 4px 0px;
    color: var(--secondHighlight);
}

.valueHeader {
    margin: 4px 0px 0px 0px;
    color: var(--boldNormalText);
}

.inputContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.inputLabel {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 10px;
}

.inputTextLabel {
    flex: 0 1;
}

.inputInput {
    width: 40px;
    text-align: center;
}

.inputRadioButton {
    width: 15px;
    height: 15px;
    margin: 0px 12.5px;

    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    transition: 0.3s;

    border: 1px solid var(--normalTextAndOutlines);
    background-color: var(--normalTextAndOutlines);
    box-shadow: inset 0px 0px 0px 5px var(--backgroundColor);
}

.inputDropdown {
    padding: 2px 4px;
    margin: 7px 0px 7px 0px;
    background-color: var(--backgroundColor);
    color: var(--secondHighlight);
    border: 1px solid var(--normalTextAndOutlines);
    outline: none;
    text-align: left;
}

#llmPersonality {
    width: calc(100% - 10px);
    max-width: 200px;
}


#llmVoiceMood {
    width: calc(100% - 40px);
    max-width: 200px;
}


.inputCheckbox {
    min-width: 15px;
    min-height: 15px;
    max-width: 15px;
    max-height: 15px;
    margin: 5px 12.5px;
    text-align: center;

    appearance: none;
    -webkit-appearance: none;
    border-radius: 10%;
    transition: 0.1s;

    border: 1px solid var(--normalTextAndOutlines);
    background-color: var(--normalTextAndOutlines);
    box-shadow: inset 0px 0px 0px 5px var(--backgroundColor);
}

.inputTextContainer {
    overflow: hidden;
    margin: 0px 0px 8px 0px;
}

.inputLLMattribute {
    width: 80px;
    height: 20px;
    max-width: 80px;
    overflow: hidden;
    resize: none;
    text-align: left;
}

.inputLLMattribute:focus {
    outline: none
}

#llmAttributeYourName {
    width: calc(100% - 10px);
    max-width: 200px;
}

.inputNumberContainer {
    /* width: 150px; */
    margin: 4px 0px 0px 0px;
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: row;
    justify-content: flex-start;
    align-items: space-between;
}

.inputNumber {
    flex: 0 1;
    height: 20px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;

    background-color: var(--backgroundColor);
    color: var(--secondHighlight);
    border: 1px solid var(--normalTextAndOutlines);
    outline: none;
}

.dividerText {
    flex: 0 1;
    margin: 0px 10px;
}

.inputRange {
    width: calc(100% - 5px);
    height: 15px;
    margin: 4px 0px 0px 0px;

    background: #333;
    border-radius: 0px;
    outline: none;

    accent-color: var(--firstHighlight);
    outline: none;
    cursor: pointer;
}

.inputRadioButton:hover,
.inputRadioLabel:hover {
    cursor: pointer;
}

.inputRadioButton:focus-visible {
    outline-offset: 0;
}

.inputRadioButton:hover {
    border: 1px solid var(--boldNormalText);
    background-color: var(--boldNormalText);
    box-shadow: inset 0px 0px 0px 3px var(--backgroundColor);
}

.inputRadioButton:checked {
    border: 1px solid var(--boldNormalText);
    background-color: var(--firstHighlight);
    box-shadow: inset 0px 0px 0px 0px var(--backgroundColor);

    animation: border-bounce;
    animation-duration: 0.15s;
    animation-iteration-count: 4;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes border-bounce {
    0% {
        border-width: 1px;
        transform: scale(1);
    }

    100% {
        border-width: 3px;
        transform: scale(1.1);
    }
}

.inputCheckbox:hover,
.inputCheckboxLabel:hover {
    cursor: pointer;
}

.inputCheckbox:focus-visible {
    outline-offset: 0;
}

.inputCheckbox:hover {
    border: 1px solid var(--boldNormalText);
    background-color: var(--boldNormalText);
    box-shadow: inset 0px 0px 0px 3px var(--backgroundColor);
}

.inputCheckbox:checked {
    border: 1px solid var(--boldNormalText);
    background-color: var(--firstHighlight);
    box-shadow: inset 0px 0px 0px 0px var(--backgroundColor);
}

.cbSliders {
    display: none;
}


.inputDropdown:hover {
    cursor: pointer;
}

/* FILE UPLOAD */

.dropzone {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 7px 0px -2px 0px;

    text-align: center;
    color: var(--logText);

    border: 2px dashed var(--normalTextAndOutlines);
    border-radius: 12px;

    background-color: var(--backgroundBrightener);

    transition: 0.3s;
    cursor: pointer;
}

.dropzone:hover {
    color: var(--buttonTextHover);
    background-color: var(--firstHighlight);
}

.dropzone.dragover {
    color: var(--buttonText);
    background-color: var(--green);
}

.dropzone.dragoverInputValid {
    color: var(--buttonText);
    background-color: var(--green);
    cursor: pointer;
}

.dropzone.dragoverInputInvalid {
    color: var(--buttonText);
    background-color: var(--red);
    cursor: pointer;
}

/* RETURN */

#returnDiv {
    flex: 1 0 var(--widthLog);
    /* min-width: 200px; */
    max-width: var(--widthLog);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    background-color: var(--backgroundBrightener);
    padding: 0px 5px;
}

.returnTextContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.returnIcons {
    justify-content: flex-start;
    font-size: 20px;
    width: 20px;
    font-variation-settings:
        'FILL' 1,
        'wght' 800,
        'GRAD' 50,
        'opsz' 12
}

.returnText {
    margin: 1px 0px;
    font-size: 12px;
    color: var(--logText);
}

/* LOGO */

#logoContainer,
#loadingContainer {
    width: 100%;
    height: 100px;
    margin: 0px 0px 15px;
    background-color: var(--debugColor);
}

#logoIMG {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
}

#loadingContainer {
    display: none;
    transform: rotate(0deg);
    -webkit-animation: spin 3s linear infinite;
    -moz-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

/* #logoContainer {
    display: none;
} */

#iconLoading {
    position: absolute;
    font-size: 110px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scaleX(1);
    color: var(--boldNormalText);
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* RIGHT */

#resultContainer {
    flex: 1 0 var(--widthRight);
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--backgroundResults);
    overflow: hidden;
}

/* SEARCH */

h1 {
    text-align: center;
    margin: 0px 0px 10px;
}

#bottomChatAndButtons {
    width: 100%;
    flex: 0 0;
    padding: 5px 20px 0px;
    align-items: center;
    filter: drop-shadow(0px -1px 1px rgba(255, 255, 255, 0.4));
    background-color: var(--backgroundResults);
    /* background-color: var(--backgroundColor); */
    /* background-color: var(--backgroundIMGs); */
}

.inputFieldSearch {
    width: calc(100% - 10px);

    min-height: 30px;
    height: 30px;
    max-height: min(calc(20vh), 300px);
    max-height: min(calc(20svh), 300px);

    /* resize: vertical; */
    resize: none;
    overflow-y: auto;

    font-size: 15px;
    margin: 0px 0px 5px;
    padding: 4px 4px;
    border: none;
    border-radius: 3px;
    background-color: var(--inputField);
    color: var(--inputFieldText);
}

#hiddenInputMirror {
    position: absolute;
    height: auto;
    overflow: hidden;

    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;

    z-index: -10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#inputFieldSearch:focus {
    outline-color: var(--firstHighlight);
    outline-style: solid;
    outline-width: 3px;
    outline-offset: 0px;
}

#inputFieldSearch::placeholder {
    color: var(--inputFieldPlaceholderText);
    opacity: 1;
}

#clearResultButton {
    position: absolute;
    top: 2vh;
    top: 2svh;
    right: 2.5%;
    border: none;
    border-radius: 3px;
    color: var(--buttonText);
    background-color: var(--buttonBakckground);
    transition: 0.2s;
    z-index: 100;
}

#clearResultButton:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: 0.2s;
}

#iconDelete {
    color: var(--buttonText);
    font-size: 30px;
    padding: 5px;
}

.resultLink {
    text-decoration: none;
}

.resultLink:hover {
    cursor: pointer;
}


/* BUTTONS */

#buttonContainer {
    /* width: 100%;
    max-width: 100%; */
    margin: 0px 0px 20px 0px;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch; */
    background-color: var(--debugColor);
}

.buttonContainer {
    flex: 1 0 200px;
    height: var(--buttonHeight);
    background-color: var(--debugColor);
}

.optionButtons {
    width: 100%;
    height: 100%;
    position: relative;
    border: none;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* margin: 0px 5px; */
    background-color: var(--buttonBakckground);
    transition: 0.05s;
}

.optionButtons:hover {
    cursor: pointer;
    transform: scale(1.02, 1.04);
    background-color: var(--buttonsHover);
    /* filter: blur(1px); */
}

.buttonIcons {
    position: absolute;
    font-size: 35px;
    left: 25px;
    top: 50%;
    transform: translate(-50%, -50%);
    /* background-color: rgba(0, 0, 0, 0.3); */
    color: var(--buttonText);
}

.optionButtons p {
    font-size: 15px;
    margin: 0px 0px 0px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--buttonText);
}

.optionButtons:hover p {
    color: var(--buttonTextHover);
}

.optionButtons:hover .buttonIcons {
    color: var(--buttonTextHover);
}


/* RESULT FORMAT */

#result {
    /* position: absolute; */
    flex: 1 0;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 20px 0px 150px 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

.resultDivider {
    width: calc(100% - 120px);
    height: 3px;
    border-radius: 10px;
    margin: 15px calc(var(--resultMarginRight) + 0px) 0px calc(var(--resultMarginLeft) + 30px);
    background-color: var(--dividerColor);
}

.resultAudioDiv {
    position: relative;
    width: 100%;
    height: 25px;
}

.resultAudio {
    position: absolute;
    left: calc(var(--resultMarginLeft) + 50px);
    top: -4px;
    /* width: calc(100% - var(--resultMarginLeft) - var(--resultMarginRight) - 50px); */
    width: calc(100% - 200px);
    max-width: 500px;
    height: 20px;
    min-width: 350px;
    filter: brightness(0.2);
    filter: brightness(0.2) drop-shadow(0px -1px 0px rgba(255, 255, 255, 0.3)) drop-shadow(0px 2px 0px rgb(0, 0, 0));
}

.resultTextHeader {
    color: var(--dimText);
    font-size: 20px;
    line-height: 1.2;
    margin: 10px var(--resultMarginRight) 2px calc(var(--resultMarginLeft) + 0px);
    text-align: left;
}

.resultTextNoLink {
    color: var(--normalTextAndOutlines);
    font-size: 18px;
    line-height: 1.4;
    margin: 6px var(--resultMarginRight) 2px calc(var(--resultMarginLeft) + 30px);
    text-align: left;
}

.resultTextLink {
    color: var(--normalTextAndOutlines);
    font-size: 18px;
    line-height: 1.4;
    margin: -5px var(--resultMarginRight) 2px calc(var(--resultMarginLeft) + 20px);
    text-align: left;
    padding: 8px 17px 7px 12px;
    border-radius: 7px;
    background-color: var(--resultLinkColor);
    box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.3), inset 0px 3px 5px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
    transition: 0.6s;
}

.resultLink:hover .resultTextLink {
    color: rgba(255, 255, 255, 0.8);
    background-color: var(--resultLinkColorHover);
    box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.5), inset 0px -1px 0px rgba(0, 0, 0, 0.5);
    text-shadow: 0px 3px 1px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 1));
    transition: 0.2s;
}

.resultIMGprompt {
    width: calc(100% - 10px);
    text-align: right;
    padding: 2px;
    position: relative;
}

.resultIMGpromptText {
    position: absolute;
    bottom: 25px;
    right: 10px;
    width: 80%;
    font-size: 15px;
    text-align: right;
    padding: 10px 15px 13px;
    text-align: left;
    background-color: var(--backgroundColor);
    color: var(--logText);
}

.resultIMGpromptSummary {
    color: var(--dimText);
    font-size: 15px;
    text-align: right;
    cursor: pointer;
    /* UNCLICKABLE */
    padding-right: 15px;
    list-style: none;
    user-select: none;
    color: var(--secondHighlight)
}

.resultIMGpromptSummary::marker {
    display: none;
}

.resultIMGpromptSummary::after {
    content: "▼";
    position: absolute;
    right: 2px;
    top: 2px;
    transition: 0.3s ease;
    transform: rotate(calc(90deg));
}

.resultIMGprompt[open] .resultIMGpromptSummary::after {
    transform: rotate(calc(150deg));
}

.resultIMGsContainer {
    width: 100%;
    background-color: var(--backgroundIMGs);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0px 0px;
    padding: 20px 20px;
    box-shadow: inset 0px -1px 2px rgba(255, 255, 255, 0.3), inset 0px 1px 2px rgba(255, 255, 255, 0.15), inset 0px 3px 5px rgba(0, 0, 0, 0.5);
}

.resultIMGlink {
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.resultIMGlink:hover {
    cursor: pointer;
}

.resultIMGs {
    width: 100%;
    height: 100%;
    margin: 0px 15px;
    border-radius: 25px;
    overflow: hidden;
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.8));
    border: 0px solid rgba(0, 0, 0, 0);
    transition: 0.6s;
    z-index: 0;
    cursor: pointer;
}

.resultIMGs:hover {
    transform: scale(1.1) rotate(-4deg);
    filter: drop-shadow(0px 30px 25px rgba(0, 0, 0, 0.8));
    border: 5px solid var(--firstHighlight);
    transition: 0.2s;
    z-index: 10;
    cursor: pointer;
}

.resultIMG {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    cursor: pointer;
}

.resultIMGlinkXL {
    display: none;
    z-index: 1000;
    cursor: pointer;
}

.resultIMGlinkXL:hover {
    cursor: pointer;
}

.resultIMGsXL {
    position: fixed;
    top: 0vh;
    top: 0svh;
    height: 100vh;
    height: 100svh;
    left: 0vw;
    width: 100vw;
    background-color: var(--backgroundDarkener);
    cursor: pointer;
    z-index: 1000;
}

.resultIMGXL {
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(5%, 5%);
    cursor: pointer;
    z-index: 1000;
}

/* Gesamte Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Hintergrund (Track) */
::-webkit-scrollbar-track {
    background: var(--backgroundScrollbar);
}

/* Griff (Thumb) */
::-webkit-scrollbar-thumb {
    background: var(--backgroundScrollbarThumb);
    border-radius: 4px;
}

/* Hover-Effekt */
::-webkit-scrollbar-thumb:hover {
    background: var(--backgroundScrollbarThumbHover);
}

/* FOOTER */

#footer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--footerColor);
    padding: 0px 10px;
}

.footerLink,
.footerText {
    padding: 0px 10px;
}

.footerLink {
    color: var(--firstHighlight);
    color: var(--normalTextAndOutlines);
    text-decoration: none;
}

.footerLink:hover {
    color: var(--normalTextAndOutlines);
    color: var(--firstHighlight);
}

/* .footerLink:focus {
    color: var(--firstHighlight);
}

.footerLink:visited {
    color: var(--firstHighlight);
}

.footerLink:active {
    color: var(--firstHighlight);
} */

.footerText {
    color: var(--dimText);
}