html {
    height: 100%;
    overflow: hidden;
}

body {
    color: #fff;
    margin: 0;
    padding: 0;
    -webkit-perspective: 1px;
    perspective: 1px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

header {
    box-sizing: border-box;
    min-height: 40vw;
    padding: 30vw 0 5vw;
    position: relative;
    -webkit-transform-style: inherit;
    transform-style: inherit;
    width: 100vw;
}

header,
header:before {
    background: 50% 50% / cover;
}

header::before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    background-image: url('../assets/img/1__1216x811x2_opt.jpg');
    background-size: cover;
    -webkit-transform-origin: center center 0;
    -webkit-transform: translateZ(-1px) scale(2);
    transform-origin: center center 0;
    transform: translateZ(-1px) scale(2);
    z-index: -1;
    min-height: 100vh;
}

header.pic1::before {
    background-image: url('../assets/img/1__1216x811x2_opt.jpg');
}

header.pic3::before {
    background-image: url('../assets/img/3__1216x811x2_opt.jpg');
}

header.pic4::before {
    background-image: url('../assets/img/4__1216x811x2_opt.jpg');
}

header.pic6::before {
    background-image: url('../assets/img/6_1216x811x2_opt.jpg');
}

header.pic7::before {
    background-image: url('../assets/img/7_1216x811x2_opt.jpg');
}

header.pic8::before {
    background-image: url('../assets/img/8_1216x811x2_opt.jpg');
}

header.pic9::before {
    background-image: url('../assets/img/9_1216x811x2_opt.jpg');
}

header.pic10::before {
    background-image: url('../assets/img/10_1216x811x2_opt.jpg');
}

header.pic11::before {
    background-image: url('../assets/img/11_1216x811x2_opt.jpg');
}

header.pic12::before {
    background-image: url('../assets/img/12_1216x811x2_opt.jpg');
}

header.pic13::before {
    background-image: url('../assets/img/13_1216x811x2_opt.jpg');
}

header.pic14::before {
    background-image: url('../assets/img/14_1216x811x2_opt.jpg');
}

header.pic15::before {
    background-image: url('../assets/img/15_1216x811x2_opt.jpg');
}

header.pic16::before {
    background-image: url('../assets/img/16_1216x811x2_opt.jpg');
}

header.pic17::before {
    background-image: url('../assets/img/17_1216x811x2_opt.jpg');
}

header.pic18::before {
    background-image: url('../assets/img/18_min.jpg');
}

header.pic19::before {
    background-image: url('../assets/img/19_min.jpg');
}

header.pic20::before {
    background-image: url('../assets/img/20_min.jpg');
}

header.pic21::before {
    background-image: url('../assets/img/21_min.jpg');
}

header.pic22::before {
    background-image: url('../assets/img/22_min.jpg');
}

header.pic23::before {
    background-image: url('../assets/img/23_min.jpg');
}

header.pic24::before {
    background-image: url('../assets/img/24_min.jpg');
}

header.pic25::before {
    background-image: url('../assets/img/25_min.jpg');
}

header * {
    font-weight: normal;
    letter-spacing: 0.2em;
    text-align: center;
    margin: 0;
    padding: 1em 0;
}

header p {
    background-color: hsla(0, 0%, 100%, 0.1);
}

main {
    background-color: hsl(0, 0%, 87.8%);
    line-height: 1.7;
    max-width: 32em;
    padding: 5% calc(50% - 16em) 35%;
    position: relative;
    z-index: 2;
}

a {
    text-decoration: none;
    color: #625b5b;
}

a:hover {
    color: #333;
}

a:focus {
    color: #333;
}

a:visited {
    color: #333;
}

.controls-container a,
.controls-container label {
    display: block;
    width: 100%;
    cursor: pointer;
}

ul.controls {
    list-style: none;
    padding: 0;
}

ul.controls li {
    display: block;
    color: #625b5b;
    cursor: pointer;
}

.status-container {
    font-size: smaller;
    color: #625b5b;
    padding-top: 10px;
    padding-bottom: 10px;
}

.status-container .time-container .time {
    color: #333;
}

.status-container .time-container .duration {
    color: #625b5b;
}

.status-container .listeners-container {
    padding-top: 10px;
    padding-bottom: 2.5px;
}

.status-container .listeners-container .listeners {
    color: #333;
}

.status-container .listeners-container .listeners::before {
    color: #625b5b;
    content: 'Listeners: ';
}

.status-container .listeners-container .listener-peak {
    color: #625b5b;
}

.status-container .track-container {
    padding-top: 2.5px;
    padding-bottom: 10px;
}

.status-container .track-container .track {
    color: #333;
}

.status-container .track-container .track::before {
    color: #625b5b;
    content: 'Track: ';
}

.status-container progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    height: 3px;
    background-color: #d3d3d3;
    border-radius: 5px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
    vertical-align: middle;
}

.status-container progress::-webkit-progress-bar,
.status-container progress::-moz-progress-bar {
    background-color: #625b5b;
    border-radius: 5px;
}

.status-container progress::-webkit-progress-value {
    background-color: #d3d3d3 !important;
    border-radius: 5px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

.volumecontainer {
    width: 100%;
}

.volume {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #625b5b;
    cursor: pointer;
}

.volume::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #625b5b;
    cursor: pointer;
}

@media screen and (max-width:800px) {
    .left, .main, .right {
        width: 100%;
        /* The width is 100%, when the viewport is 800px or smaller */
    }
}