@import url('style.css');
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    text-align: center;
    font-family: 'Open Sans Condensed', Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

a {
    text-decoration: none;
    color: #ec01c5;
}

p {font-size: 1.4em;text-align: justify;}
p.quote{background-color:#47003d; font-style:italic;margin:0 0 0 20px;padding:5px 20px;border:10px;border-radius:10px}
ul{font-size: 1.4em;}

h1 {font-size: 2.6em;font-weight: normal;text-align:left; margin:0.1em;}
h2 {font-size: 1.8em;font-weight: normal; text-align:left; margin:0;}
h3 {font-size: 1.6em;font-weight: normal;margin:0.1em;}
hr {
  position:relative;float:left;width:100%;
  border: none;
  height: 1px;
  color: #6d005b;
  background-color: #6d005b;
}

.always-menu {
  position: fixed;
  top: 8px;
  right: 16px;
  font-size:1.5em;
  z-index:10;
}

.container{width:100%;max-width:1400px;margin:0 auto;}

.container .header{position:relative;float:left;width:80%;padding:0 10%}
.container .header img{width:100%;}

.container .header .centered {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:3.5em;
}
.container .header .centered .subtitle{display: block;font-size:0.7em;}

.container .description{position:relative;float:left;width:100%;text-align:justify;margin-bottom:10px;}
.container .subheading {position:relative;float:left;width:100%;font-size:2em;text-align:left; margin:0.2em 0;}

.container .audio{position:relative;float:left;width:100%;}
.container .audio p{padding-left:40px;}

.container .videos{position:relative;float:left;width:100%;}
.container .videos .video{position:relative;float:left;width:32%;padding:0.5%;}
.container .videointro {position:relative;float:left;width:49%;padding:0.5%}
.container .videos .videoholder {position:relative;float:left;width:100%;}

.container .videos .video .googledrive-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 65%;
    height: 0;
    overflow: hidden;
  }

.container .contact{position:relative;float:left;width:100%;text-align:center;margin-bottom: 20px;}
.container .contact .info{font-size: 1.4em;}

.audio-player {
  width:100%;
  margin: auto;
  padding: 20px;
}

.audio-player button {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

.controls {
  display: flex;
  align-items: center;
  gap: 15px;
}
button {
  background: #6d005b;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}
button:hover {
  background: #6d005b;
}
.time-display {
  font-size: 14px;
  color: #aaa;
}

@media screen and (max-width:800px)
    {
      .always-menu{width:100%;top:0;right:0;background-color: black;padding:0.2em;margin:0;text-align:right;}
      .container {padding-top:2.5em;}
      .container .header .centered {top: 30%;font-size:2.5em;}
      .container .videos .video{width:99%;}
    }