/********************************** fonts **********************************/
/* vt323-regular - latin */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('./assets/fonts/vt323-v17-latin-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('./assets/fonts/vt323-v17-latin-regular.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* goldman-700 - latin */
@font-face {
  font-family: 'Goldman';
  font-style: normal;
  font-weight: 700;
  src: local(''),
    url('./assets/fonts/goldman-v15-latin-700.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('./assets/fonts/goldman-v15-latin-700.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/********************************** all **********************************/

/* styling for EVERY element */
* {
  /* ensures borders margins etc. don't overextend parent */
  box-sizing: border-box;
}

/* an accessibility no-no for screen readers but since there is only one
 * input field and the focus border ruins the illusion of a retro-console,
 * I feel it is justified
*/
*:focus {
  outline: none;
}

input::placeholder {
  /* change color of all input placeholder text */
  color: #999;
}

body {
  /* set font family to VT323, or failing that a monospace font */
  font-family: "VT323", monospace;
  margin: 0;
  padding: 0;
}


/********************************** loading page **********************************/

.loading-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #444;
  color: #999;
  font-size: 20px;
}


/********************************** container for the application **********************************/
.container {
  /* set minimum height of the screen to 100% of the viewport height */
  min-height: 100vh;
  /* set display as flex and set flex settings */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  /* add more vertical pading than horizontal */
  padding: 32px 16px;
  /* set background to an image */
  background-image: url('./assets/SpeedMetals-MetalTexture-Feb17.jpg');
  /* set background image settings, stops image distorting */
  background-position: center;
  background-size: cover;
}

/* all first children of .container class */
.container>* {
  /* set flex and direction */
  display: flex;
  flex-direction: column;
}


/********************************** search bar & playback **********************************/
/* container for left column */
.search-play-section {
  /* shorthand for flex-grow, flex-shrink and flex-basis combined */
  flex: 1 1 0;
}

/* container for the search input box */
.search-bar {
  /* shorthand for flex-grow, flex-shrink and flex-basis combined */
  flex: 0 1 0;
  padding-bottom: 8px;
}

/* adds an inset box shadow */
.box-shadow-items {
  width: 100%;
  background: #444444;
  /* adds inset box shadow to give a 3d appearance, 
  should cover safari and mozilla too */
  box-shadow: inset 2px 4px 4px rgba(0, 0, 0, 0.33);
  -webkit-box-shadow: inset 2px 4px 4px rgba(0, 0, 0, 0.33);
  -moz-box-shadow: inset 2px 4px 4px rgba(0, 0, 0, 0.33);
  /* remove border */
  border: none;
  font-size: 1.5em;
}

.search-input {
  /* set font styles for the search input */
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  color: #2cec0d75;
  padding: 8px;
}

.search-list {
  /* shorthand for flex-grow, flex-shrink and flex-basis combined */
  flex: 1 1 0;
  /* set display settings */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* if more info is generated than can be shown on the screen, a scroll bar appears */
  overflow: scroll;
  margin-bottom: 8px;
}

.track-list {
  padding: 0;
  margin: 0;
  width: 100%;
}

.track-list-item {
  font-size: 0.7em;
  /* remove standard list item styling */
  list-style: none;
  text-decoration: none;
  /* no marker prefix on the ist item */
  marker: none;
  display: block;
  /* width: 100%; */
  color: #2cec0d75;
  padding: 4px;
  /* set a bottom border to separate items on screen */
  border-bottom: solid 0.5px;
}

/* separate from track-list-item so the no-serarch-results
 message doesn't appear to be clickable */
.clickable {
  /* make button appear clickable */
  cursor: pointer;
}

/* removes last green bottom border line in track list */
ul:last-child {
  border-bottom: none;
}

.playback-controls {
  /* shorthand for flex-grow, flex-shrink and flex-basis combined */
  flex: 0 1 0;
  /* set display settings */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.playback-buttons {
  /* keep width same as height */
  aspect-ratio: 1 / 1;
  /* round edges into a circle */
  border-radius: 50%;
  font-size: 16px;
  /* border: none; */
  border-width: 0.2px;
  border-color: #555;
  /* set the background to an image */
  background-image: url('./assets/istockphoto-615829394-170667a.jpg');
  /* set background image settings, stops image distorting */
  background-position: center;
  background-size: cover;
  color: rgb(52, 209, 52);
  /* make button appear clickable */
  cursor: pointer;
}

/* set a minimum height for the play button */
.play-button {
  min-height: 80px;
}

/* set a minimum height for the skip buttons */
.skip-button {
  min-height: 40px;
}


/********************************** visualisations and vis buttons **********************************/
.visualisations-section {
  /* shorthand for flex-grow, flex-shrink and flex-basis combined */
  flex: 3 1 0;
  /* set no vertical margins but horizontal ones */
  margin: 0px 8px;
  /* set display settings */
  display: flex;
  flex-direction: column;
}

.visualisations-screen {
  /* shorthand for flex-grow, flex-shrink and flex-basis combined */
  flex: 12 1 0;
  /* ensures the visualisation screen is below the frame */
  z-index: 0;
  /* changes pos of element relative to parent */
  position: relative;
}

.visualisations-menu {
  /* shorthand for flex-grow, flex-shrink and flex-basis combined */
  flex: 1 1 0;
  /* set display settings */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.visualisations-menu-button {
  /* set font to goldman */
  font-family: 'Goldman';
  /* set font styles */
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  color: rgb(246, 67, 67);
  /* set width of button to fit text inside */
  width: fit-content;
  /* set a minimum width */
  min-width: 100px;
  /* set height to 80% of parent */
  height: 80%;
  /* round edges */
  border-radius: 5px;
  /* set background to an image */
  background-image: url('./assets/3M-2080-Brushed-Aluminum-BR120-Vinyl-Wrap-324x324.jpg');
  /* make button appear clickable */
  cursor: pointer;
}

/* styling for metal looking buttons */
.metal {
  /* no text outline */
  outline: none;
  text-shadow: hsla(0, 0%, 40%, .5) 0 -1px 0, hsla(0, 0%, 100%, .6) 0 1px 1px;
  background-color: hsl(0, 0%, 90%);
  /* give .2 seconds color set effect  */
  transition: color .2s;
}

/* button styling for selected visual */
.selected-vis {
  /* set text color */
  color: rgb(52, 209, 52);
  /* set text shadow */
  text-shadow: hsla(210, 100%, 20%, .3) 0 -1px 0, hsl#f7bfac 0 2px 1px, hsla#f9b39b 0 0 5px, hsla#FF5924 0 0 20px;
}

/* workaround for a border frame as the p5 draw function overwrites an inset box shadow */
/* this puts a div directly above the canvas and applies a border */
.border-pane {
  position: absolute;
  /* ensures the frame is above the visualisation screen */
  z-index: 1;
  /* fill height and width of parent */
  width: 100%;
  height: 100%;
  /* adds inset box shadow to give a 3d appearance, 
  should cover safari and mozilla too */
  box-shadow: inset 2px 4px 4px rgba(0, 0, 0, 0.33);
  -webkit-box-shadow: inset 2px 4px 4px rgba(0, 0, 0, 0.33);
  -moz-box-shadow: inset 2px 4px 4px rgba(0, 0, 0, 0.33);
  /* sets display settings */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/********************************** expressions **********************************/
.expessions-section {
  /* shorthand for flex-grow, flex-shrink and flex-basis combined */
  flex: 0.75 1 0;
  padding: 8px;
}

.expressions-toggle-section {
  /* sets display settings */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* css for first children div's of expressions-selection-section */
.expressions-selection-section>div {
  /* sets display settings */
  display: flex;
  flex-direction: column;
}

/* css for first children labels of div's of expressions-selection-section */
.expressions-selection-section>div>label {
  /* sets display settings */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 16px;
  font-size: 1.5em;
  color: #bbb;
  /* sets a text shadow on the label */
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);
}

/* below led css adapted from https://jsfiddle.net/XrHcA/ */
.led {
  margin: 20px auto;
  width: 10px;
  height: 10px;
  /* corners rounded to a circle */
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: #000 0 -1px 6px 1px;
}

/* red led styling */
.led-red {
  background-color: #F00;
  box-shadow: #000 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;
}

/* green led styling */
.led-green {
  background-color: #80FF00;
  box-shadow: #000 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
}

/* yellow led styling */
.led-yellow {
  background-color: #ff0;
  box-shadow: #000 0 -1px 6px 1px, inset #460 0 -1px 8px, #f8f049 0 3px 11px;
}

/* Radio */
/* below adapted from https://jsfiddle.net/Jtec5/25/ */

/* setting for radio type inputs */
input[type="radio"] {
  background-color: #ddd;
  /* set a linear gradient as the background image of the radio */
  background-image: -webkit-linear-gradient(0deg, transparent 20%, hsla(0, 0%, 100%, .7), transparent 80%),
    -webkit-linear-gradient(90deg, transparent 20%, hsla(0, 0%, 100%, .7), transparent 80%);
  /* round the corners */
  border-radius: 10px;
  box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .8),
    0 0 0 1px hsla(0, 0%, 0%, .6),
    0 2px 3px hsla(0, 0%, 0%, .6),
    0 4px 3px hsla(0, 0%, 0%, .4),
    0 6px 6px hsla(0, 0%, 0%, .2),
    0 10px 6px hsla(0, 0%, 0%, .2);
  /* make button appear clickable */
  cursor: pointer;
  display: inline-block;
  height: 15px;
  margin-right: 15px;
  position: relative;
  width: 15px;
  -webkit-appearance: none;
}

/* last child of input radio, adds a red circle above the input */
input[type="radio"]:after {
  background-color: rgb(246, 67, 67);
  ;
  border-radius: 25px;
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .4),
    0 1px 1px hsla(0, 0%, 100%, .8);
  /* adds no content */
  content: '';
  display: block;
  height: 7px;
  left: 4px;
  position: relative;
  top: 4px;
  width: 7px;
}

/* last child of input radio, adds a green circle above the input when checked */
input[type="radio"]:checked:after {
  background-color: rgb(52, 209, 52);
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .4),
    inset 0 2px 2px hsla(0, 0%, 100%, .4),
    0 1px 1px hsla(0, 0%, 100%, .8),
    0 0 2px 2px hsla(0, 70%, 70%, .4);
}


/********************************** modal **********************************/

/* styling for the box container for the modal */
#display-box-id {
  /* sets display settingd */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background and text color and size */
  background-color: #666;
  color: #ddd;
  font-size: 20px;
  /* padding inside box */
  padding: 32px;
  /* ensure it is above the canvas */
  z-index: 2;
  /* add a shadow behind to give a 3D illusion  */
  box-shadow: 10px 5px 5px #222;
}

.screen-button {
  /* more horizontal padding than vertical to increase width of button */
  padding: 8px 24px;
  background-color: #bbb;
  color: #444;
  font-size: 20px;
}