@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --radius: 24px;
  --shadow: 2px 4px 6px black;
}

* {
  margin: 0px;
  font-family: "Inter";
}

body {
  background: url("images/bg.jpg");
  background-color: black;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
}

h1, h2, h3, h4, h5, h6, p, a {
  color: white;
  text-shadow: var(--shadow);
}

a:hover {
  text-decoration: underline;
}

img {
  display: block;
  margin: 12px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

audio {
  border-radius: 0px;
  background-color: rgba(0,0,0,0.4);
}

.player {
  margin:  24px auto;
  width: 90%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.player.youtube {
  height: 200px;
  width: 100%;
}

/* HEADER */

div.titlebar {
  background: rgba(0,0,0,0.5);
  position: sticky;
  margin-left: 0px;
  top: 0;
  display: flex;
  flex-direction: row;
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

h1.titlebar {
  text-align: left;
  text-decoration: none;
  font-size: 32px;
  font-weight: bold;
  margin-top: 4px;
  margin-left: 10px;
  float: left;
  width: 100%;
}

nav {
  display: flex;
  justify-content: center;
  /* float: right; */
  margin-right: 10px;
}

nav a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size: 22px;
  padding: 14px;
}

/* INTRO */

div.intro {
  margin: auto;
  padding: 72px 0;
  position: relative;
}

img.intro {
  min-width: 10%;
  max-width: 300px;
}

div.intro.text {
  position: absolute;
  top: 30%;
  width: 100%;
  text-align: center;
}

h1.intro {
  font-size: 72px;
  text-align: center;
}

h2.intro {
  font-size: 36px;
  text-align: center;
}

/* CONTENT */

div.content.contrast {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(5px);
}

h2.content {
  text-align: center;
  font-size: 42px;
}

h3.content {
  text-align: center;
  font-size: 26px;
}

div.twopane {
  display: flex;
  flex-direction: row;
  margin: auto;
}

div.twopane.v {
  flex-direction: column;
  margin: auto;
}

p.content {
  margin: auto;
  font-size: 24px;
  max-width: 50%;
}

img.twopane {
  margin: auto;
  margin-bottom: 18px;
  max-width: 35%;
}

/* CONTENT (ALT) */

div.content.contrast.alt {
  background: rgba(0,0,0,0.65);
}

/* ALT SCREEN SIZES */

@media (max-width: 1100px) { /* SMALLER WINDOWS */
  div.twopane {
    flex-direction: column;
  }

  p.content {
    max-width: 80%;
    margin-bottom: 32px;
  }

  img.twopane {
    max-width: 60%;
  }
}

@media (max-width: 600px) { /* MOBILE DISPLAYS */
  div.titlebar {
    flex-direction: column;
  }

  h1.titlebar {
    margin-top: 6px;
    font-size: 48px;
    text-align: center;
    margin-left: 0;
    float: none;
  }

  nav {
    justify-content: center;
    float: unset;
    width: 100%;
  }

  nav a {
    float: unset;
    font-size: 16px;
    margin: 0 4%;
  }

  h1.intro {font-size: 42px;}
  h2.intro {font-size: 24px;}

  img.intro {min-width: 60%;}
  img.twopane {max-width: 80%;}
}