:root {
  --text:rgb(26, 28, 40);
  --butttext: #f9f9fb;
  --background: #f9f9f9;
  --header:rgb(237, 237, 239);
  --primary:rgb(70, 70, 70);
  --secondary:#f9f9f9;
  --accent:rgb(215, 215, 215);
  --seper:rgba(75, 75, 100, 0.62);
  --tinted:rgb(244, 244, 249);
  --bdr:rgb(129, 130, 130);
  --bdr2:rgb(231, 231, 231);
  --bitespire:rgb(59, 69, 71);
  --mgn:auto;
  --mgn2:15%;
  --mxw:85ch;
  --labeltext:rgb(59, 69, 71);
  --basefont:"Segoe UI";
  --basefont:"Times New Roman";
  --basefont:"Titillium Web";
}


@media (prefers-color-scheme: dark) {
    :root {
  --text:rgb(204, 204, 209);
  --butttext: #e7e7ef;
  --background: #1c2a34;
  --header:rgb(24, 36, 43);
  --primary: #5c678a;
  --secondary: #1c2a34;
  --accent: #5c678a;
  --seper:rgba(69, 77, 103, 0.36);
  --bitespire:rgb(69, 74, 75);
  --tinted:rgb(46, 58, 67);
  --bdr:rgb(87, 92, 109);
  --bdr2:rgb(52, 57, 75);
  --labeltext:rgb(125, 133, 135);
}
}


body {
    background-color: var(--background);
    background-image: none;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-family: var(--basefont),"Trebuchet MS", system-ui;
    font-size: 0.80em;
    line-height:145%;
    color: var(--text);
    overflow-x:hidden;
}
hr {
    border: 1px dashed var(--bdr2);
}
h1{font-size:1.4em;}
h2{font-size:1.2em;}
h3{font-size:1.0em;}
h4{font-size:1.0em;}
select {
    appearance: none;
    cursor: pointer;
    outline: none;
    font-size:1.25em;
	margin: 10px 0px 10px 0px;
	border-width: 0px;
	border-radius: 3px;
	text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
	text-decoration: none;
	padding: 7px 25px 7px 25px;
	transition: background-color 0.25s linear;
    
	background: var(--background);
    color: var(--text);
        }

select:hover {
	background:var(--primary);
	border-color:var(--primary);
	color: var(--butttext);
	border-width: 0px;
}

.boxed {
  margin:1em 0em 1em -3em;
  padding:1em 1em 1em 3em;
  background-color: var(--tinted);
  border:0px solid var(--seper);
  border-radius:12px;
  overflow-wrap:break-word;
  text-wrap:auto;
}






.button3{
	font-size:0.7em;
	margin: 10px 0px 10px 0px;
	border-width: 0px;
	border-radius: 3px;
	text-decoration: none;
    cursor: pointer;
    white-space: nowrap;

    border-color: var(--primary);
	background: var(--primary);
    color: var(--butttext);

    text-decoration: none;
	padding: 2px 25px 3px 25px;
	transition: background-color 0.25s linear;
}
.button3:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--text);
	border-width: 0px;
}

.bigbutton2{
	font-size:1.0em;
	margin: 0.1em 0.5em 0.5em 0em;
	text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
	background: var(--primary);
  color: var(--butttext);
  text-decoration: none;
	padding: 4px 11px 4px 11px;
	transition: background-color 0.25s linear;
  border:2px solid var(--primary);
  border-radius:6px;
}
.bigbutton2:hover {
  background: var(--accent);
  border-color: var(--primary);
  color: var(--text);
  border-width: 2px;
}

.bigbutton2light{
	font-size:1.0em;
	margin: 0.1em 0.5em 0.5em 0em;
	text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
	background: var(--secondary)!important;
  color: var(--text)!important;
  text-decoration: none;
	padding: 4px 11px 4px 11px;
	transition: background-color 0.25s linear;
  border:2px solid var(--secondary)!important;
  border-radius:6px;
}
.bigbutton2light:hover {
  background: var(--accent)!important;
  border-color: var(--primary)!important;
  color: var(--text)!important;
  border-width: 2px!important;
}



.bigbutton{
	font-size:1.0em;
	color: var(--butttext);
	background: var(--primary);
	border-color: var(--primary);
	margin: 1px 0px 1px 0px;
	border-style: solid;
	border-width: 2px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
a.bigbutton {
	color: var(--butttext) !important;
	text-decoration: none;
	padding: 0px 14px 0px 14px;
	transition: background-color 0.25s linear;
}
a.bigbutton:hover {
	background: var(--background);
	border-color: var(--primary);
	color: var(--text) !important;
	border-width: 2px;
}

        .fixed-bottom-right {
            position:fixed;
            display:flex;
            bottom:0px;
            width:100%;
            left:0px;
            right:0px;
            padding:10px;
            margin:0;
            background-color: var(--background);
            box-shadow: 0 -20px 14px var(--background);
            justify-content:right;
        }
        .fixed-top-right {
            position: fixed;
            top:2px;
            right:20px;
            padding:0px;
            z-index:1000; 
            font-size:0.75em;
            color:var(--bitespire);
        }
        .fixed-top {
            opacity:0%;
            position: fixed;
            top: 17px;
            left: 50%;
            transform: translateX(-50%);
            display: block;
            max-width:125ch;
            background-color: var(--background);
            padding: 3px 3px 3px 3px;
            z-index: 1000; 
            box-shadow: 0 10px 35px 0px rgb(148,148,148,0.25);
            border:2px solid var(--bdr);
            border-radius: 30px 11px 11px 30px;
        }

        .fixed-top { 
            transition: opacity 0.4s cubic-bezier(.4,0,.2,1), visibility 0.4s cubic-bezier(.4,0,.2,1); 
            opacity: 1; 
            visibility: visible; 
        }
        .fixed-top.fade { 
            opacity: 0.25; 
            pointer-events: none; 
            visibilityx: hidden; 
        } 

        .fixed-inner2x {
            max-width:var(--mxw);
            border:2px solid;
            border-color:var(--bdr);
            border-radius:30px 11px 11px 30px;
            padding: 0px;
            position:relative;
        }

.fixed-inner2::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px; right: 0; bottom: 0;
           background-image: url('kaylogo.png');
   background-repeat: no-repeat;
  background-position: top left;
            background-size: 64px 64px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
.fixed-inner2 > * {
  position: relative;
  z-index: 2;
}




        .content {
            margin-top: 120px; 
            padding: 0px;
        }

        .spinner2 {
            display: none;
            position: fixed;
            top: -1px;
            left: -3px;
            margin-left:auto;
            width:100vw;
            text-align: center;
            justify-content:center;
            padding: 0px 0px 0px 0px;
            z-index: 1001; 
        }

@media (prefers-color-scheme: dark) {
        .spincat {
            filter: invert(100%);
        }
}


        .userquestion {
          	font-family: var(--basefont),"Trebuchet MS", system-ui;
            line-height:135%;
            margin:0 var(--mgn) 0 var(--mgn);
            padding:0em 2em 0em 2em;
            border:0px solid;
            border-radius:5px;
            max-width:var(--mxw);
            max-height:10px;
            overflow:hidden;
          }
        .userquestionheader {
            text-align:left;
            font-size:1.25em;
            border: 2px solid var(--bdr);
            background-color: var(--header);
            border-radius:12px;
            margin: 70px -32px 0px -32px;
            padding: 14px 30px 16px 32px;
            max-height:100px;
            overflow:auto;
            border-bottom:none;
            scrollbar-gutter: stable;
        }
        .titleheader {
            font-size:1.0em;
            border: 0px solid;
            background-color: var(--header);
            border-radius:12px;
            margin: 0px -32px 30px -32px;
            padding: 14px 30px 26px 32px;
            border: 2px solid var(--bdr);
            border-top:none;
        }
        .kayanswer {
        	  font-family: var(--basefont),"Trebuchet MS", system-ui;
            font-size:1.1em;
            line-height:145%;
            margin:0em var(--mgn) 0em var(--mgn);
            padding:0em 2em 0em 2em;
            border:0px solid;
            border-radius:5px;
            max-width:var(--mxw);
            border-bottom:2px solid var(--background);

            button{
              top:0px;
              position: sticky !important;
              font-size:1.0em;
              color: var(--butttext);
              background: var(--primary);
              border-color: var(--primary);
              margin: 1px 0px 1px 0px;
              border-style: solid;
              border-width: 2px;
              border-radius: 3px;
              -webkit-border-radius: 3px;
              -moz-border-radius: 3px;
              text-decoration: none;
              cursor: pointer;
              white-space: nowrap;
              padding: 6px 14px 6px 14px;
            }
            button:hover {
              background: var(--background);
              border-color: var(--primary);
              color: var(--text);
              border-width: 2px;
            }


        }

        button.question-btn {
          background: var(--background);
          color: var(--text);
          cursor:pointer;  
          font-size:0.90em;
          margin: 1px 0px 5px 0px;
          padding: 7px 10px 7px 10px;
          border-width: 0px;
          border-radius: 6px;
          border-color: var(--bdr) !important;
          transition: background-color 0.25s linear;
        }

        button.question-btn:hover {
          background: var(--bdr) !important;
          color: var(--butttext) !important;
          border-width: 0px !important;
        }

        code.kayanswer{
            position: relative;
        }
        code {
          	font-family: monospace,"Courier New";
            padding:0.1em 0.5em 0.1em 0.5em;
            border:1px solid var(--tinted);
            border-radius:4px;
        }
        pre {
            background-color: var(--tinted);
          	font-family: monospace,"Courier New";
            font-size:0.9em;
            margin:0.5em 0em 1.5em 0em;
            padding:1em 1.5em 1em 0.95em;
            border:2px solid var(--seper);
            border-radius:6px;
            overflow-wrap:break-word;
            text-wrap:auto;

        }
        .followup {
            padding:1em 1em 1em 0;
            font-size:1rem;
        }

        .codediv{
            margin:0;
            padding:0em 0em 0em 0em;
            border:0px solid var(--bdr);

            button{
              border-radius: 3px 3px 0px 0px;
              margin:0px;
/*              border-bottom:0px;*/
            }
            button:hover{
              border-radius: 3px 3px 0px 0px;
              margin:0px;
              border-bottom-color:transparent;
            }
            pre{
                border-radius:0px 6px 6px 6px;
                margin:0;
            }
        }


        .labeltext{color:var(--labeltext);font-size:0.8em;}
h1 {
    line-height:100%;
}
li {
    line-height:145%;
    margin-top:0.35em;
    margin-bottom:0.55em;
}

.answerbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0em;
}

textarea {
    font-size:1.5em;
    margin-bottom:0em;
    margin-left:70px;
    margin-right:5px;
    padding:0.5em;
    padding-bottom:0em;

    resize:none;
    color: var(--text);
    min-width:60ch;
    width:75%;

    font-family: var(--basefont),"Trebuchet MS", system-ui;
    background: var(--background);
    overflow:auto;
    border:0px solid;

}

textarea:hover {
    border-color: var(--accent);
    border:0px solid;
}

textarea:focus {
    border-color: var(--primary);
    border:0px solid;
}
textarea:focus, input:focus{
    outline: none;
}

textarea::placeholder {
  color: var(--text);
  font-size: 0.75em;
  font-style: italic;
  opacity: 0.45; 
}

  .options-popup {
    /* display: none; */
            opacity: 0; 
    position: absolute;
    top: 3px;
    left: 3px;
    background: var(--background);
    border: 2px solid var(--bdr);
    border-bottom: 6px solid var(--primary);
    box-shadow: 0 2px 30px 10px rgba(0,0,0,0.15);
    padding: 2em;
    z-index: 10000;
    min-width: 160px;
    border-radius: 23px 12px 12px 12px;
            transition: opacity 0.4s cubic-bezier(.4,0,.2,1), visibility 0.4s cubic-bezier(.4,0,.2,1); 
  }
  #cogButton:focus + .options-popup,
  .options-popup:hover,
  .options-popup:focus-within {
    display: block;
  }
  #popupContainer { display:none;position: relative; }

.body-wrapper {
	background: var(--background);
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-top: 0px;
	clear: both;
  text-align:center;
}

a::after {
    content: " ↗"; 
    font-size: 0.8em;
    color: inherit;
}

@media only screen and (max-width: 750px) {
    .content {
        margin-top: 120px; 
    }

    .spinner2 {
        top: 16px;
        left: 4px;
    }

    .kayanswer {
        margin-left:0.0em;
        margin-right:0.0em;
    }

    .userquestion {
        margin-left:0.0em;
        margin-right:0.0em;
    }
    textarea {
        min-width:20ch;
        width:70%;
    }

    .fixed-top {
        left: 5px;
        right: 5px;
        transform: none;
        max-width:125ch;
    }
}

.theanswer {
  margin:0px -32px -32px -32px;
  padding:32px;
  border-radius:16px;
  border: 4px solid var(--background);
  transition: border-color 0.35s;
}
.visible-border {
  border-color: var(--bdr2);
}

table { border-collapse: collapse; width: 99%; margin: 1em 0; } 
 th, td { border: 1px solid var(--bdr); padding: 0.5em 1em; text-align: left; position: relative; } 
 th { background-color: var(--background); user-select: none; color:var(--text)} 
 tr { background-color: var(--background); color:var(--text);transition: background-color 0.25s; } 
 tr:nth-child(even) { background-color: var(--background); } 
 tbody tr:hover { background-color: var(--primary); color:var(--butttext); } 



::-webkit-scrollbar-track { background: transparent;   border: solid 1px transparent;}
::-webkit-scrollbar-thumb { border-radius:4px; box-shadow: inset 0 0 12px 12px var(--primary); border: solid 1px transparent;}
::-webkit-scrollbar-thumb:hover { border-radius:4px; box-shadow: inset 0 0 12px 12px var(--accent); border: solid 1px transparent;}
::-webkit-scrollbar {width: 8px;}