html {
    box-sizing: border-box;
    font-family: Tahoma, sans-serif;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html {
    font-size: 20px;
    background: #7100bd;
}

.photobooth {
    background: rgb(255, 255, 255);
    max-width: 150rem;
    margin: 2rem auto;
    border-radius: 2px;
}

/*clearfix*/
.photobooth:after {
    content: '';
    display: block;
    clear: both;
}

.photo {
    width: 100%;
    float: left;
}

.player {
    position: absolute;
    top: 20px;
    right: 20px;
    width:200px;
}

.effects{
    font-family: '';
}

/*
    Strip!
*/

.strip {
    padding: 2rem;
}

.strip img {
    width: 150px;
    overflow-x: scroll;
    padding: 0.8rem 0.8rem 2.0rem 0.8rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    background: rgb(223, 42, 240);
}

button{
    background-color: hotpink;
    font-family: cursive;
    font-style: italic;
    font-weight: bold;
    font-size: 14px;
    width: 100px;
    height: 40px;
}

h4{
    font-family: cursive;

}

.strip a:nth-child(5n+1) img { transform: rotate(10deg); }
.strip a:nth-child(5n+2) img { transform: rotate(-2deg); }
.strip a:nth-child(5n+3) img { transform: rotate(8deg); }
.strip a:nth-child(5n+4) img { transform: rotate(-11deg); }
.strip a:nth-child(5n+5) img { transform: rotate(12deg); }

input[type=range] {
    -webkit-appearance: none;
    width: 31%;
    margin: 4.8px 0;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #8571a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 1.6px 1.6px 4.1px rgba(149, 144, 152, 0.61), 0px 0px 1.6px rgba(162, 157, 164, 0.61);
    border: 0px solid rgba(144, 189, 175, 0.68);
    height: 18px;
    width: 14px;
    border-radius: 35px;
    background: #f75ccf;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #9381b3;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #8571a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 1.6px 1.6px 4.1px rgba(149, 144, 152, 0.61), 0px 0px 1.6px rgba(162, 157, 164, 0.61);
    border: 0px solid rgba(144, 189, 175, 0.68);
    height: 18px;
    width: 14px;
    border-radius: 35px;
    background: #f75ccf;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #77619f;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
    background: #8571a9;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
    box-shadow: 1.6px 1.6px 4.1px rgba(149, 144, 152, 0.61), 0px 0px 1.6px rgba(162, 157, 164, 0.61);
    border: 0px solid rgba(144, 189, 175, 0.68);
    height: 18px;
    width: 14px;
    border-radius: 35px;
    background: #f75ccf;
    cursor: pointer;
    height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
    background: #8571a9;
}
input[type=range]:focus::-ms-fill-upper {
    background: #9381b3;
}