@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

/*
FONTS: https://db.onlinewebfonts.com/
*/

@font-face {
    font-family: 'Mexcellent';
    src: url('/fonts/mexcellent_rg-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Georgia';
    src: url('/fonts/georgia.woff2') format('woff2');
}

@font-face {
    font-family: 'Helvetica';
    src: url('/fonts/helvetica.woff2') format('woff2');
}

@font-face {
    font-family: 'Quicksand';
    src: url('/fonts/quicksand.woff2') format('woff2');
}

@font-face {
    font-family: 'Verdana';
    src: url('/fonts/verdana.woff2') format('woff2');
}

@font-face {
    font-family: 'Rooney';
    src: url('/fonts/rooney.woff2') format('woff2');
}

@font-face {
    font-family: 'Karla';
    src: url('/fonts/karla.woff2') format('woff2');
}

@font-face {
    font-family: 'Karlas1B';
    src: url('/fonts/karlas1B.woff2') format('woff2');
}

@font-face {
    font-family: 'Arial';
    src: url('/fonts/arial.woff2') format('woff2');
}

@font-face {
    font-family: 'Baskerville';
    src: url('/fonts/baskerville.woff2') format('woff2');
}

@font-face {
    font-family: 'Calibri';
    src: url('/fonts/calibri.woff2') format('woff2');
}

@font-face {
    font-family: 'Consolas';
    src: url('/fonts/consolas.woff2') format('woff2');
}

@font-face {
    font-family: 'Courier New';
    src: url('/fonts/courier_new.woff2') format('woff2');
}

@font-face {
    font-family: 'Deljavu Sans';
    src: url('/fonts/dejavu_sans.woff2') format('woff2');
}

@font-face {
    font-family: 'Didot';
    src: url('/fonts/didot.woff2') format('woff2');
}

@font-face {
    font-family: 'Impact';
    src: url('/fonts/impact.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Mono';
    src: url('/fonts/space_mono.woff2') format('woff2');
}

@font-face {
    font-family: 'Futurist';
    src: url('/fonts/futurist.woff2') format('woff2');
}

@font-face {
    font-family: 'FrakturNo2';
    src: url('/fonts/fraktur_no2.woff2') format('woff2');
}

@font-face {
    font-family: 'Futurist Fixed';
    src: url('/fonts/futurist_fixed.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto.woff2') format('woff2');
}

@font-face {
    font-family: 'Coolvetica';
    src: url('/fonts/coolvetica_rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
     font-family: 'Coolvetica', 'Mexcellent', sans-serif;
}

.blinking {
    animation: blink 1s linear infinite;
}

a {
  color: magenta;
  text-decoration: none;
  xtext-transform: uppercase;
}

#dimensions {
  //position: fixed;
  //top: 50%;
  //left: 50%;
  //transform: translate(-50%, -50%);
  //background-color: black;
  //color: gold;
  //border: 1px solid gold;
  //padding: 10px;
  //font-size: 24px;
}

#answerButton, #answerButtonChatgpt, #answerButtonSuper, #copyButtonFromClip {
     font-family: 'Mexcellent', sans-serif;
     font-size: 1.8em;
}

#answerButton {
    color: green;
}

#answerButtonChatgpt {
    color: blue;
}

#vsSpan {
     font-size: 2em;
    text-align: center;
}

.langListButtons {
     font-family: 'Mexcellent', sans-serif;
     font-size: 1em;
     margin: 3px;
}

.allButtons {
     font-family: 'Mexcellent', sans-serif;
     font-size: 1.5em;
     display: none;
}


.promoClass {
    position: relative;
}

.helpQuest {
    position: absolute;
    right: 10px;
    bottom:10px;
}

#outputPlayerHyper {
    padding: 20px;
    display: flex;
    align-items: center;
}

.smallButton {
    font-family: 'Mexcellent', sans-serif;
    font-size:15pt;
    margin-right: 5px;
}

.voiceDesc {
    xcolor: yellow;
    margin-left: 20px;
}

.audioLineClass {
    margin: 1px;
    padding:1px;
    color: lime;
    font-size: 1.5em;
    display: flex;
    align-items: center;
}

.buttonStyle {
    font-family: 'Mexcellent', sans-serif;
    font-size: 1.5em;
    margin-left: 10px;
}

#cleanupButton, #cleanupButtonSuper, #cleanupButtonHyper, #cleanupButtonSuperSysrole {
     font-family: 'Mexcellent', sans-serif;
     font-size: 1.5em;
    margin-left: 10px;
}

#addInputContainer {
     font-family: 'Mexcellent', sans-serif;
     font-size: 1.5em;
    margin-left: 0px;
}


.helpLineClass {
     font-family: 'Mexcellent', sans-serif;
     font-size: 25px;
    margin-left: 10px;
    cursor: pointer;
}

.cookiePolicyButtonClass {
     font-family: 'Mexcellent', sans-serif;
     font-size: 35px;
    border: 3px solid;
    margin: 30px;
    padding:20px;
    cursor: pointer;
}

#cookiePolicyYes {
    border-color: green;
}

#cookiePolicyNo {
    border-color: red;
}

.audioLineClass {
    font-size: 1.5em;
    margin-left: 10px;
}


.superSmartAssAd {
     font-size: 1.5em;
    margin-left: 10px;
    text-align: center;
}

.copy2marker {
    font-size: 1.3em;
    font-family: Arial;
}


#inputLabel {
    font-size: 1.3em;
}

.inputStyle {
    border: 3px solid #ccc; 
    margin: 10px 0px;
    padding: 5px;
    font-size: 1.1em;
    xwidth: 50%;
    color:  #000066;
    flex-grow: 1;
}

#inputText, #inputTextSuper, #inputTextHyper, #inputTextSuperSysrole {
    border: 3px solid #ccc; 
    margin: 10px 0px;
    margin-bottom: 2px;
    padding: 5px;
    color:  #000066;
    font-size: 1.1em;
    xwidth: 50%;
    flex-grow: 1;
    white-space: pre-wrap;
}

#versionText, #companyText {
    xborder: 3px solid #ccc; 
    margin: 10px 0px;
    xpadding: 5px;
    xfont-size: 1.5em;
    xwidth: 50%;
}

#outputText, #outputTextSuper {
    border: 3px solid magenta; 
    background-color: magenta;
    margin-left: 0px;
    margin-right: 0px;
    color:  #000066;
    margin-bottom: 2px;
    padding: 5px;
    display: none;
    font-size: 1.1em;
}

#wordsAndTimesOutputSuper, #wordsAndTimesInputSuper, #wordsAndTimesInputHyper {
    padding-left: 2px;
}

.button-container {
    margin-top: 10px;
}


input[type="color"] {
    -webkit-appearance: none;
    border: 0px;
    width: 24px;
    height: 24px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: 0px;
}

#outputTextHyper {
    padding: 0px;
    font-size: 1em;
}


.inputContainer {
    display: flex;
    align-items: center;
    width: 100%;
}

.button-container {
    display: flex;
    align-items: left;
    xalign-items: flex-start;
    width: 100%;
    caret-color: black;
}

.settingsLineDivClass {
    font-size: 15pt;
}

#audioPlayOverlay, #audioPlayOverlayPlayer, #helpOverlay, #helpOverlaySmartass, #helpOverlaySmartassSuper, #helpOverlaySmartassHyper, #helpOverlaySmartassPrompter, #cookiePolicyOverlay , #settingsOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    xwidth: 50%;
    xheight: 90%;
    width: 90%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%);
    overflow: auto;
    display: none;
    padding: 20px;
    border-radius: 20px;
    border-style: solid;
    border-width: 3px;
    cursor: pointer;
}

#helpOverlay, #helpOverlaySmartass, #helpOverlaySmartassSuper, #helpOverlaySmartassHyper, #helpOverlaySmartassPrompter, #cookiePolicyOverlay {
      color: yellow;
}

#settingsOverlay {
      color: pink;
}

.disable-scroll {
    overflow: hidden;
    xpointer-events: none;
}

.helpHighlight {
    color: lightblue;
}

.promoClass {
    background-color: lime;
    //background-color: rgba(255, 0, 0, 1);
    opacity: 1;
    font-size:20px;
    font-family: 'Mexcellent';
    color: magenta;
    border-radius: 5px;
    border: 3px solid magenta;
    cursor: pointer;
}

#audioPlayOverlay {
      color: lime;
}

#audioPlayOverlayPlayer {
      color: magenta;
      width: 40%;
      height: 50%;
}

.audioPlayerVoiceClass {
    margin-left: 10px;
    font-size:50px;
    font-family: 'Mexcellent';
    color: magenta;
}

#downloadButton {
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}
audio {
	width: 200px;
}

.dropdown-content {
  //display: none;
  visibility:hidden;
  position:absolute;
}

h2 {
    color: silver;
    text-decoration: underline;
}

h3 {
    color: silver;
    text-decoration: none;
}

@media only screen and (max-width: 1080px) {
    input[type="text"] {
        width: 100%;
    }

    .button-container {
	flex-direction: column;
    }

    #audioPlayOverlayPlayer {
      color: magenta;
      width: 90%;
      height: 90%;
    }

    .voiceDesc {
	font-size: 18px;
	xcolor: yellow;
	margin-left: 5px;
	margin-top: 3px;
    }

    .audioLineClass, .buttonStyle, #cleanupButton, #cleanupButtonSuper, #cleanupButtonHyper, #cleanupButtonSuperSysrole, #addInputContainer, .inputStyle, #inputTextSuper, #inputText, #inputTextHyper, #outputText, #outputTextSuper, #wordsAndTimesOutputSuper, #wordsAndTimesInputSuper, #wordsAndTimesInputHyper {
	font-size: 1.1em;
    }

    #inputLabel {
	font-size: 1.3em;
    }

    #answerButton, #answerButtonChatgpt, #answerButtonSuper, #copyButtonFromClip, #vsSpan, .allButtons {
	font-size: 1.5em;
    }
}


# END
# AXXEL.NET
# 2023JUL14
# 2023JUL31
# 2023AUG04
# 2023AUG22