html {
  box-sizing: border-box;
  margin: 0;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 10%;
  font-family: Helvetica, sans-serif;
  background: #111;
  background: -webkit-linear-gradient(150deg, #FFEA61, #FFFFB7, #FFF192); 
  background: linear-gradient(150deg, #FFEA61, #FFFFB7, #FFF192); 
}

button {
  font-size: 54px;
  background-color: #fffbd2;
  border: 1px solid black;
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 20px;
  transform: translateY(2px);
}
button:hover {
  background-color: #ffce51;
}
button:active {
  transform: translateY(10px);
}

.photobooth {
  max-width: 800px;
  margin: 5px auto;
  /* background: white; */
  /* border: 1px black solid; */
}
/*clearfix*/
.photobooth:after {
  content: '';
  display: block;
  clear: both;
}

.photo {
  width: 90%;
  margin-left: 10px;
  margin-bottom: 15px;
  border: 1px black solid;
}

.player {
  position: absolute;
  top: 28px;
  right: 23px;
  width: 180px;
  height: 125px;
}

label:nth-of-type(1), label:nth-of-type(2){
  color: red;
}
label:nth-of-type(3), label:nth-of-type(4){
  color: green;
}
label:nth-of-type(5), label:nth-of-type(6){
  color: blue;
}

.strip {
  padding: 20px;
}
.strip img {
  width: 100px;
  overflow-x: scroll;
  padding: 5px 5px 25px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  background: #fff3b2;
}

.strip a:nth-child(3n+1) img { transform: rotate(-8deg); }
.strip a:nth-child(3n+2) img { transform: rotate(0deg); }
.strip a:nth-child(3n+3) img { transform: rotate(8deg); }