/*************/
/*** FONTS ***/
/*************/

/* Crimson import from Google Fonts */
@import url(https: //fonts.googleapis.com/css2?family=Crimson+Text&display=swap);

/* Julia-Mono import, self hosted */
@font-face {
  font-family: 'Julia Mono Light';
  font-style: normal;
  font-weight: lighter;
  src: url(juliamonolight.ttf);
}

/* A class for things with the serif font */
.fserif {
  font-family: 'Crimson Text', serif;
}

/* A class for things with the mono font */
.fmono {
  font-family: 'Julia Mono Light', monospace;
}



/***************/
/*** GENERAL ***/
/***************/

/* Body element */
body {
  padding: 0;
  background-color: #000;
  color: #FFF;
}

/* Make the text selection highlighting a lovely yellow color */
::selection {
  background-color: #FABC3C;
  color: #000;
}

/* A class for clickable things */
.clickable {
  cursor: pointer;
  transition-duration: .25s;
}

/* Clickable things turn yellow on hover */
.clickable:hover {
  color: #FABC3C;
}

/* For menus/panels/dialogs with a dark grey background */
.greyBG {
  z-index: 10;
  background-color: #1b1b1b;
}

/* A class to elements which are hidden by default */
.hidden {
  display: none;
}

/* Hidden elements can be toggled on by adding this class */
.hidden.on {
  display: block !important;
}

/* A class for things that are as wide as their containers */
/* These usually also have centered text */
.fullWidth {
  width: 100%;
  text-align: center;
}



/***************/
/*** MAIN UI ***/
/***************/

/* Used to center various main ui elements */
.syl-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Main text input field */
.input-field {
  margin: 100px 0px 20px;
  font-size: 25px;
  line-height: 1.5;
  caret-color: #FABC3C;
}

/* Turn off outline when focused on the main input field */
.input-field:focus {
  outline: none;
}

/* Stats element (word/line/char counts) */
.stats {
  font-size: 12px;
  opacity: 0.5;
}

/* Seperators between main stats elements */
.stats-sep {
  margin: 0px 5px;
}

/* SVG arrow image which points down from the input to the diagram */
.ui-arrow {
  width: 30px;
  margin: 20px 0px;
}

/* Syllable/Rhyme diagram */
.diagram {
  font-size: 30px;
  letter-spacing: 2px;
}

/* An element in the diagram which takes up a whole line */
/* Represents a series of two (or more) line breaks in the input */
.sectionSep {
  display: block;
  width: 100%;
  margin: 10px 0px;
  font-size: 25px;
  text-align: center;
}

/* A container in the diagram which represents a line of the input */
.line {
  display: flex;
  justify-content: left;
  height: 40px;
}

/* A span representing a diagram symbol */
.symbol {
  display: inline;
}

/* A span representing a syllabalized-word */
.word {
  display: inline;
}



/********************/
/*** CONTEXT MENU ***/
/********************/

/* A little context menu that's available upon right-clicking the input field */
/* Has items for clipboard management & word querying */
.context-menu {
  position: absolute;
  padding: 4px;
  border-radius: 20px;
  border-top-left-radius: 0;
  font-size: 16px;
}

/* Word menu section */
.context-menu ul {
  margin: 0px;
  padding: 5px;
  list-style-type: none;
}

/* Word menu item */
.context-menu li {
  margin: 7px 5px;
}

/* Word menu section seperator */
.context-menu hr {
  margin: 0px;
  opacity: 0.1;
}



/************************/
/*** QUERY SIDE-PANEL ***/
/************************/

/* Little panel that sits on the right side of the screen when it's active */
/* Used to show query results from the word-menu */
.query {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  overflow-y: scroll;
  -ms-overflow-style: none;
}

/* Hide scrollbar for query panel */ 
.query::-webkit-scrollbar {
  display: none;
}

/* Little X that sits at the top left of the panel and lets the user close it */
.query-hide {
  position: absolute;
  top: -5px;
  left: 10px;
  font-size: 40px;
}

/* A div at the top of the query panel which indicates what kind of query is being run */
.query-type {
  margin-top: 10px;
  font-size: 25px;
  text-align: center;
}

/* The word on which the query was run */
.query-target {
  font-size: 40px;
  font-style: italic;
  margin-top: 30px;
  text-align: center;
}

/* The results of the query, basically just a big list of words */
.query-results {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 5%;
}

/* A word in the results of a query */
.query-results div {
  margin: 5px;
  font-size: 20px;
}