/*
 * Copyright 2015-2025 the Mimu Authors (Dan Bornstein et alia).
 * SPDX-License-Identifier: Apache-2.0
 */

@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Nobile:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&family=Redressed&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --font-family-body:       Aleo, serif;
  --font-family-body-serif: Aleo, serif;
  --font-family-body-sans:  Raleway, sans-serif;
  --font-family-heading:    Nobile, sans-serif;
  --font-family-cursive:    Redressed, sans-serif;
  --font-family-mono:       Roboto Mono, monospace;
}

body {
  background-color: #ddeeff;
  color:            #222244;
  font-family:      var(--font-family-body);
  font-weight:      300;
  font-size:        14pt;
  line-height:      110%;

  margin-top:   2em;
  margin-left:  5em;
  margin-right: 5em;
}

:link, :visited {
  color:                   #22b;
  text-decoration-color:   #aae;
  text-decoration-line:    underline;
  text-decoration-style:   dotted;
  text-underline-position: under;
}

code, tt, pre {
  font-family: var(--font-family-mono);
  font-size:   95%;
}

h1, h2, h3, h4, h5, h6 {
  font-family:   var(--font-family-heading);
  text-align:    center;
  line-height:   120%;
  margin-top:    0;
  margin-bottom: 0.35em;
}

h1 {
  font-size: 36pt;
}

h2 {
  font-size: 28pt;
}

h3 {
  font-size: 24pt;
}

p.header {
  text-align: center;
}

.demoList li {
  font-size:      18pt;
  font-weight:    normal;
  padding-left:   1em;
  padding-top:    5pt;
  padding-bottom: 5pt;
}

table.footer {
  font-family:      var(--font-family-body-sans);
  font-size:        12pt;
  line-height:      100%;
  border-top-style: solid;
  border-top-color: #888;
  margin-top:       3em;
  padding-left:     1em;
  padding-right:    1em;
  width:            100%;
}

.footer td:nth-child(2) {
  text-align:     right;
  vertical-align: top;
}

@media only screen and (pointer: coarse) and (hover: none) {
  body {
    margin-top:   0.2em;
    margin-left:  0.4em;
    margin-right: 0.4em;
    font-weight:  normal;
  }

  h1, h2, h3, h4, h5, h6 {
    line-height:   110%;
    margin-bottom: 0.25em;
  }

  h1 {
    font-size: 18pt;
  }

  h2 {
    font-size: 14pt;
  }

  h3 {
    font-size: 12pt;
  }
}

/*
 * The following are all used on the demo pages but not the main index.
 */

button.playPause {
  font-family:   var(--font-family-body-sans);
  font-weight:   bold;
  font-size:     30pt;
  padding:       2pt 15pt 6pt 15pt;
  border-radius: 10pt;
}

button.playPause:active {
  background-color: #555;
}

/* Nodes of this class are generated programmatically. */
.soundDisplay {
  background-color: black;
  color:            #00ff00;
  font-family:      var(--font-family-body-sans);
  font-weight:      bold;
}

table.oscilloscope {
  margin-top:       1em;
  margin-bottom:    1em;
  margin-left:      auto;
  margin-right:     auto;
  width:            95%;
  border-style:     solid;
  border-color:     #555555;
  border-width:     5pt;
  border-radius:    20pt;
  padding:          5pt;
  background-color: black;
}

table.oscilloscope td {
  height: 40vw;
}

table.harmonics {
  margin-top:       1em;
  margin-bottom:    1em;
  margin-left:      auto;
  margin-right:     auto;
  width:            95%;
  border-style:     solid;
  border-color:     #555555;
  border-width:     5pt;
  border-radius:    20pt;
  padding:          5pt;
  background-color: black;
}

table.harmonics td {
  height: 20vw;
}

table.control {
  margin-top:    2em;
  margin-bottom: 2em;
  width:         100%;
}

table.control td {
  font-size:     12pt;
  font-family:   var(--font-family-body-sans);
  line-height:   90%;
  margin-bottom: 0.5em;
}

table.control tr td:nth-child(1) {
  width:      20%;
  text-align: right;
}

table.control tr td:nth-child(2) {
  width:         60%;
  padding-left:  1em;
  padding-right: 1em;
  text-align:    center;
  line-height:   150%;
}

table.control tr td:nth-child(3) {
  width:      20%;
  text-align: left;
}

table.control input[type="radio"] {
  margin-left:  3em;
  margin-right: 0.5em;
}

.sliderCell {
  width:  100%;
  height: 28pt;
}

.slider {
  width:            100%;
  height:           28pt;
  background-color: #eeeeee;
  color:            black;
  font-size:        10pt;
  font-family:      var(--font-family-body-sans);
  font-weight:      bold;
}

@media only screen and (pointer: coarse) and (hover: none) {
  button.playPause {
    font-size: 20pt;
  }

  table.control {
    margin-top:    0.5em;
    margin-bottom: 0.5em;
  }

  table.control td {
    font-size:     10pt;
    margin-bottom: 0.25em;
  }

  table.control td:first-child + td {
    padding-left:  0.3em;
    padding-right: 0.3em;
  }

  table.control input[type="radio"] {
    margin-left:  1em;
    margin-right: 0.25em;
  }
}