/* styles.css 
   Project: 
   Author: 
   Date: 
  
   Helpful links: 
    Web colors: 
      https://en.wikipedia.org/wiki/Web_colors#X11_color_names
  Color picker tool:
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
    http://colorpicker.com

*/

/*@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Roboto&display=swap');
*/
* {
  box-sizing: border-box;
}

img {
  width: 100%;
  display: block;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Tinos', sans-serif;
  font-size: 20px;
  color: red;
  letter-spacing: -.01em;

}

#showcase {
  background-image:url('../img/uptop.png');
  height: 100vh;
  background-size: cover;
  font-family: 'Dosis', sans-serif;
  text-transform: none;
  text-shadow: 1px 1px 8px black;
  background-position: center;
  display: flex;
  flex-direction: column;
  /*align-content: center;*/
  align-items: center;
  justify-content: center;
  padding: 0;
}

#showcase h1 {
  margin-top: 400px;
  font-size: 60px;
  line-height: 1.5px;
}

#showcase h2 {
  font-size: 40px;
  line-height: 2px;
}

#showcase p {
  font-size: 25px;
  margin-top: 50px;
}


h1 {
  font-family: 'Dosis', sans-serif; 
  font-weight: bolder;
  margin-top: 8px;

}

header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: -1;
  background-color: black;
  /*max-height: 600px;*/
}

header img {
  /* this opacity makes the header image dark so you can read the headline text more easily. remove the opacity if you do not have your headline on top of the image.*/
  opacity: 0.8;
}

h1, h2, h3 {
  text-align: center;
  text-transform: uppercase;
}

.title1 {
  position: absolute;
  width: 100%;
  top: 30%;
  color: white;
  text-align: center;
  padding: 1%;
}

/* mobile optimization */
.byline {
    font-size: 0.7em;
    color: #919191;
    font-family: Arial;
    font-weight: bolder;
    letter-spacing: .02em;
    line-height: normal;
}

.photocred {
    font-size: 0.5em;
    color: #D3D3D3;
    font-family: Arial;
    letter-spacing: .08em;
    line-height: normal;
}

.content {
  width: 100%;
  background-color: white;
  overflow-x: hidden;
}

.maintext {
  max-width: 700px;
  margin: auto;
  color: #4a4a4a;
  font-size: 20px;
  font-weight: 400;
  text-align: justify;
  line-height: 1.5;
  padding: 0%;
}

.button {
  background-color: red;
  border: 2px solid black;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  font-family: Dosis;
}

.button1:hover {
  background-color: white;
  color: red;
  border: 2px solid red;
}

.left {
  float: left;
  padding-right: 20px;
  margin-left: -40px;
}

.right {
  float: right;
  padding-left: 20px;
  margin-right: -40px;
}

.sectionhead {
  text-align: center;
  color: white;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
}

.bigphoto {
  margin: auto;
  position: relative;
  top: 40%;
  height: 560px;
}

.bigphoto img {
  object-fit: cover;
  height: 100%;
}

.youtube {
  max-width: 100%;
  margin: auto;
}

.videowrapper {
  position: relative;
  /* 16:9 */
  padding-top: 25px;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* HYPERLINKS */
/* unvisited link */
a:link {
  color: red;
  text-decoration: none;
  font-family: Arial Black;
  letter-spacing: -0.04em;
  font-size: 0.88em;
}

/* visited link */
a:visited {
  color: red;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: darkred;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: red;
}

/*footer*/
section.footer {
  background-color: black;
  color: red;
  font-family: Dosis;
  padding: 2px 2px;
  min-height: 20px;
  text-align: center;
  font-size: 0.6em;
  text-transform: uppercase;
}

/*audio*/
section.audio {
  background-color: black;
  color: white;
  padding: 5px;
  width: 100%;
  min-height: 30px;
  text-align: center;
  font-size: 1em;
}

.audiotext {
  max-width: 700px;
  margin: auto;
  color: white;
  font-size: 1.1em;
  line-height: 1.5em;
  text-align: justify;
/*  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em*/;
}

/*sources*/
.div1 {
  padding: 5px;
  width: 100%;
  min-height: 30px;
  text-align: center;
  font-size: 1em;
  margin-top: 10px;
}

.sources h1 {;
  color: red;
}

.sourcestext {
  margin-bottom: 20px;
  max-width: 80%;
  margin: auto;
  color: white;
  text-align: justify;
}

@media only screen and (max-width:  1300px) {

#showcase h1 {
  color: red;
  line-height: 60px;
  padding-top: 5px;
  font-size: 50px;
}

#showcase h2 {
  display: none;
}

#showcase p {
  margin-top: -20px;
  font-size: 15px;
  justify-content: center;
}
  .title1 {
    top: 10%;
  }

  .title1 h1 {
    font-size: 5em;

  }

  .title1 h2 {
    font-size: 2em;

  }
}

/* Responsive layout - when the screen is less than 600px wide */
@media only screen and (max-width:  500px) {

  #showcase h1 {
  color: red;
  line-height: 60px;
  padding-top: 5px;
  font-size: 50px;
}

#showcase h2 {
  display: none;
}

#showcase p{
  margin-top: -20px;
  font-size: 15px;
  justify-content: center;
}

  .column {
    width: 100%;
  }

  .title1 {
    top: 0%;
  }

  .title1 h1 {
    font-size: 3.5em;

  }

  .title1 h2 {
    font-size: 1.2em;
    padding: 4%;
  }

.maintext {
  font-size: 1em;
  width: 80%;
}