html, body {
  margin: 0 auto;
  font-family: Arial;
  background-color: black;
  color: white;
  padding: 0;
  width: 100%;
}

main {
  position: relative;
  width: 100vw;
  margin: 0 auto;
  padding: 0;
}  

  header, main > nav, main > div, main > article {
    width: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 0 auto;
  }

  header, main > nav, main > article {
    z-index: 1;
  }

    header > *, main > nav > *, main > article > * {
      z-index: 1;
    }

header {
  margin: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  background: rgba(255, 255, 255, 0.25);
}

  h1 {
    width: 100%;
    font-size: 2em;
  }

nav {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
}

  nav button {
    z-index: -1;
  }

  nav#reset {
  }

  nav#continue {
  }

#container {
	margin: 0px auto;
	width: 100vw;
  height: 100vh;
	border: none;
  margin: 0 auto;
  position: relative;
  background-color: none;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  clear: both;
}

  #container:hover {
    cursor: pointer;
  }

h1 {
  text-align: center;
}

#videoElement {
	width: calc(100vw - 6px);
  height: 100vh;
  background-color: rgba(175, 175, 175, 1);
  position: relative;
}

  #elementOne {
    height: 100%;
    width: auto;
    opacity: 0.99;
    position: absolute;
    right: 0;
    bottom: 0;
    object-fit: fill;
    filter: brightness(100%);
    transform: rotate(0deg);
    border-radius: 0;
  }

  #elementTwo {
    height: 100%;
    width: auto;
    opacity: 0.25;
    position: absolute;
    top: 0;
    left: 0;
    filter: brightness(100%);
    transform: rotate(0deg);
    border-radius: 0;
  }

  #elementThree {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    left: 0;
    object-fit: fill;
    filter: brightness(100%);
    transform: rotate(0deg);
    border-radius: 0;
  }



/* Button */

button {
  color: white;
  border: 0;
  margin: 0 auto;
  padding: 1em 0;
  font-size: 1em;
  background: none;
}

  button:hover {
    cursor: pointer;
    background-color: yellow;
    color: black;
  }

nav#top button {
}

  button.top {
    width: calc(100vw/2 - 3px);
  }

    #startButton {
      left: 0;
    }
    
    #stopButton {
      right: 0;
    }

  .random {
    width: calc(100vw/4 - 4px);
  }
  
    #opacityButton {
    }

    #brightnessButton {
    }

    #transformButton {
    }

    #sizeButton {
    }
  
  .change {
    width: calc(100vw/4 - 4px);
  }

    #resetButton {
    }

    #changeAllButton {
    }

    #continuousButton {
    }

    #stopContinuousButton {
    }


article {
  width: 100%;
  position: relative;
  background-color: black;
  z-index: 1;
  padding-top: 1em;
  padding-bottom: 1em;
}

  #disclaimer {
    display: none;
  }

  article p {
    padding: 0.5em 3em;
  }

  article p#iphone {
    display: none;
  }

  #articleButton {
    width: 100%;
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.25);
  }

  @supports (-webkit-touch-callout: none) {
    article p#iphone {
      display: block;
    }
  }

footer {
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, 0.25);
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 0;
  padding-right: 0;
  height: 1.5em;
  margin: 0 auto;
}

  footer a {
    text-decoration: none;
    color: white;
  }

  footer a:hover {
    text-decoration: underline;
    color: black;
  }

  footer span {
    display: inline-block;
    position: relative;
    height: 0;
    padding-top: 1em;
    padding-bottom: 1em;
    top: -1em;
    margin: 0;
  }

    span#portfolioLink {
      width: auto;
      text-align: left;
    }

    span#copyright {
      text-align: center;
      width: calc(60%);
    }

    span#nextPiece {
      width: auto:
      text-align: right;
    }