:root {

  --yellow: hsl(61, 100%, 50%);

  --banner-height: 9rem;
  /* --marquee-height: 3.5rem;  */
  --marquee-height: 0;
  --header-height: calc( var(--banner-height) + var(--marquee-height) );
  --main-height: calc( 100% - var(--header-height ) );

  --font-serif: 'Times', 'Times New Roman', serif;
  --font-sans: 'Arial', sans-serif;
  --font-mono: 'NotCourierSans', monospace;

  --theme-purple: mediumpurple;

}


@media (prefers-reduced-motion) {
  * {
    animation      : none !important;
    transform      : none !important;
    opacity        : unset !important;
  }
}



html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-mono);
  background-color: var(--yellow);
}
h1,
h1 > a,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--font-header);
}
p {
}

body {
  display: flex;
  flex-direction: column;
}


/*--------------------------------- images */

img.inline {
  display: inline;
  height: 1.3em;
  vertical-align: middle;
  margin-inline: 0.5rem;
}

/*--------------------------------- links */
a {
  font-family: var(--font-serif);
  font-style: italic;
  color: black;
}
a.nav_link {
  font-family: var(--font-link);
  font-size: 5rem;
}

/*--------------------------------- buttons */

input[type=button],
input[type=submit],
#recordButton,
#stopButton,
#discardButton,
#uploadButton{
  border: none;
  background-color: black;
  color: white;
  padding: 1rem 1.2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 2.3rem;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.7);
}
input[type=text]:focus {
        color: pink;
      }



/*--------------------------------- radio buttons and checkboxes */
input[type=radio] {
  appearance: none;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  background-color: white;
  border: 2px solid var(--theme-purple);
  transition: 0.2s all linear;
}

input[type=radio]:checked {
  appearance: none;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  background-color: var(--theme-purple);
  border: 2px solid white;
  transition: 0.2s all linear;
}

ul {
  list-style: none;
  padding-inline-start: 0;
}
li > label {
  font-family: var(--font-body);
}

#archive input ~ div {
  display: none;
}
#archive input:checked ~ div {
  display: block;
}

/*--------------------------------- main layout */

main {
  height: var(--main-height);
  font-size: 2rem;
  padding: 5rem;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px 3px;
  z-index: 1;
  border-top: 2px solid black;
  flex-grow: 1;
}

main p {
  max-width: 40em;
}

header {
  max-height: var(--header-height);
  background-color: white;
  font-family: var(--font-sans);
  width: 100%;
  z-index: 0;
  overflow: hidden  ;
  /* box-shadow: inset 0 0 30px black; */
}

header h1 {
  margin: 0;
}

header .banner {
  display        : block;
  margin         : auto;
  overflow       : hidden;
  z-index: 0;
  position: relative;
}

header .banner.mobile {
  display: none;
}

header .marquee {
  position         : relative;
  white-space      : nowrap;
  overflow         : hidden;
  display          : flex;
  font-size        : 2rem;
  align-items      : center;
  height           : var(--marquee-height);
  transform        : translateY(0rem);
  z-index          : 1;
  background-color: var(--yellow);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px 3px;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
}

header .marquee p {
  margin           : 0;
  padding          : 0 0.25rem;
  animation        : marquee 60s linear infinite;
}

@keyframes marquee {
  from { transform : translate(0, 0); }
  to   { transform : translate(-100%, 0); }
}


/*--------------------------------- archive layout */
form#archive li{
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-shadow: 0 0 1rem blue;
  border-radius: 2rem;
  padding: 1rem;
  margin: 1rem 1rem 1rem 0;
  width: 280px;
}
article.exhibition {
  padding-bottom: 2rem;
}
li > input {
  padding: 2rem;
}
li > label {
  margin-top: -1rem;
  padding-left: 1rem;
  font-size: 2rem;
}
div.cover img {
  padding-top: 1rem;
  width: 250px;
}
div.time p.start{
  margin-bottom: 1rem;
}

/*--------------------------------- prompt layout */

section form ul li label {
  padding-left: 0;
}

/*--------------------------------- listening gallery */

section#listening.gallery {
}

div.listen-item {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: 20rem;
  box-shadow: 0 0 1rem blue;
  border-radius: 2rem;
  margin: 1rem 1rem 1rem 0;
  overflow: hidden;
}

div.listen-item p {
  margin: 0;
  padding: 0;
  text-align: center;
  height: 100%;
  vertical-align: bottom;
  font-size: 1rem;
}

div.listen-item p audio {
  width: 100%;
  margin-bottom: -0.4rem;
}

/*--------------------------------- recording area */

div#controls {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

/*--------------------------------- welcome page */

section.about-mumories{
/*  display: inline-block;*/
  padding: 1rem;
}

summary::marker{
  display: inline-block;
  color: white;
}

h2.h2-summary{
  margin-top: 0;
}



@media (max-width: 700px) {
  main {
    padding: 1rem;
    font-size: 1rem;
  }
  header .banner {
    display: none;
    width: 95%
  }
  header .banner.mobile {
    display: block;
  }
}