/* ELEMENTS */

/*img
{
  object-fit: contain;
  vertical-align: center;
} */

/* FLEXBOXES */
.articles
{
  display: block;
  justify-self: center;
  width: clamp(600px, 70vw, 55vw);
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 75px;
}

@media (width <= 1023px) 
{
  .articles { width: clamp(200px, 90vw, 600px) }
}

/* ARTICLES 

.article
{
  justify-self: center;
  display: flex; 
  border: solid 2px;
  margin: 5px;
  width: 100%
}
*/

@media (width <= 600px) {
  .article 
  {
    display: block; 
  }
  .text
  {
    border-bottom: solid 2px;
  }
}
@media (width >= 601px) {
  .article 
  {
    display: flex; 
  }
  .text
  {
    border-right: solid 2px;
    margin: 5px;
    flex: 5;
  }
}

.article
{
  justify-self: center;
  border: solid 2px;
  margin: 10px;
  width: 100%; 
  background-color: var(--alternate-background-color);
}

.sound-div
{
  margin: 5px;
  flex: 4;
  /*height: 200px;*/
}

/* TEXT */
.title
{
  margin: 0px;
  margin-right: 5px;
  margin-left: 5px;
  text-align: center;
  font-weight: var(--title-weight);
  text-transform: var(--title-capitalize);
  color: var(--alternate-text-color);
}

.sound-element
{
  align-self: center;
  margin: 5px;
  width: 97%;
}


audio::-webkit-media-controls-enclosure
{
  border-radius: 0%;
  border: solid 2px var(--text-color);
}

audio::-webkit-media-controls-play-button
{
  background-color: #DDDDDD;
  border-radius: 0px;
}

audio::-webkit-media-controls-mute-button
{
  background-color: #DDDDDD;
  border-radius: 0px;
}  

audio::-webkit-media-controls-timeline
{
  background-color: #DDDDDD;
  border-radius: 0px;
}

audio::-webkit-media-controls-current-time-display
{
  text-shadow: none;
  color: #111111;
} 

audio::-webkit-media-controls-time-remaining-display
{
  text-shadow: none;
  color: #111111;
}

audio::-webkit-media-controls-panel
{
  background-color: #DDDDDD;
}