style.css

@import "./material/dark-hc.css";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body{
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
    margin : 0;
    min-height: 100vh;
    --md-icon-font: 'Material Symbols Rounded';
}

#drop-shadow{
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: none;
  z-index: 5;
  pointer-events: none;

  transition: background-color 0.5s;
}

p, h3{
  margin-top: 0;
}

header{
  background-color: var(--md-sys-color-surface-container);
  display: flex;
  align-items: center;
  padding: 1.5em 2em;
  overflow: hidden;
}

#header-content{
  width: 100%;
  display: flex;
  align-items: center;
}

#header-content img{
  height: 30px;
  vertical-align: middle;
  margin-right: 1em;
}

#header-right{
  margin-left: auto;
  order: 2;
}

#home{
  padding: 0;
  color: var(--md-sys-color-primary);
  font-size: 1.5em;
}

.content{
  padding: 1.5em;
  display: grid;
  grid-gap: 1em;
}

.card{
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-radius: 1.25em;
  padding: 1.5em;
}

.output-cards{
  padding: 0;
  margin: 0;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 30fr 70fr;
}

.spectrogram-box{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.spectrogram-box img{
  margin-bottom: 1em;
}

.break{
  flex-basis: 100%;
  margin: 0;
}

md-circular-progress-color {
  --md-circular-progress-color: var(--md-sys-color-secondary-container);
}

@media screen and (orientation : portrait) {
  :root{
    font-size: calc(0.7em + 1vw);
  }
  body {
    --md-filled-tonal-button-label-text-size: 1em;
    --md-filled-tonal-button-label-text-line-height: 1em;
    --md-filled-tonal-button-icon-size: 1.2em;
    --md-filled-tonal-button-container-height: 2.5em;
  }
  .content{ display: grid; grid-gap: 1em; }
  .output-cards{ grid-gap: 1em; display: grid; grid-template-columns: inherit; }
  .card{ overflow: hidden; }
}