@font-face {
  font-family: 'Oranienbaum-Regular';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(fonts/Oranienbaum-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'PTSerif';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(fonts/PTSerif.ttf) format('truetype');
}

@font-face {
  font-family: 'PTSerifCaption';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(fonts/PTSerifCaption.ttf) format('truetype');
}

body {
	font-family: 'PTSerif', "sans-serif";
	font-weight: 300;
	background-image: url('background.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	/* background-attachment: fixed; */
	margin: 0;
	padding: 0;
}

.title {
  display: block;
  margin: auto;
  background-color: #0b0b0b;
  width: 100%;
}

.titleimage {
  display: block;
  margin: auto;
}

.aligned {
  display: block;
  margin: auto;
  text-align: center;
  width: 80%;
}

.example {
  font-family: 'Oranienbaum-Regular';
  font-weight: 100;
  font-size: large;
}

h1.emph {
  font-family: 'PTSerif';
  font-weight: bold;
  font-style: italic;
}

h2.emph {
  font-family: 'PTSerif';
  font-weight: normal;
  font-style: normal;
}

h2.performances {
  font-family: 'PTSerif';
  font-weight: bold;
  font-style: italic;
}

.contact {
  font-size: x-large;
}

.fat {
  font-family: 'PTSerif';
  font-weight: bold;
  font-style: italic;
}

hr {
  width: 100%;
}

figcaption {
  font-family: 'PTSerif';
  font-weight: bold;
  font-style: italic;
}

.songname {
  font-weight: bold;
  text-transform: uppercase;
}

figure {
  display: inline-block;
}

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: none;
}

a:active {
  color: black;
  text-decoration: none;
}

/* laptop, pc, tablet */
@media only screen and (min-width: 951px) {
  .titleimage {
    height: 80vh;
  }

  h2.performances {
    text-align: left;
    width: 60%;
  }

  iframe {
    width: 560px;
    height: 315px;
  }
}

/* smartphone */
@media only screen and (min-width: 1px) and (max-width: 950px) {

  .titleimage {
    width: 100%;
  }

  h2.performances {
    text-align: left;
    width: 100%;
  }
  
  figure {
    width: 70vw;
    /*height: 40vw;*/
    aspect-ratio: auto;
  }

  .figure {
    width: 70vw;
    /*height: 40vw;*/
    aspect-ratio: auto;
  }

}