*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

html {
    background-color: black;
}

.container {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}

.boxes {
    position: relative;
    width: 1000px;
    height: 720px;
    margin: 0 auto;
}

.box {
    width: 1000px;
    height: 720px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.box.alpha {
    background-color: black;
}

.box.beta {
    background-color: gray;
}

.box.charlie {
    background-color: purple;
}

.box.delta {
    background-color: blue;
}

.box.echo {
    background-color: green;
}

.alpha:checked ~ .boxes > .alpha,
.beta:checked ~ .boxes > .beta,
.charlie:checked ~ .boxes > .charlie,
.delta:checked ~ .boxes > .delta,
.echo:checked ~ .boxes > .echo {
    opacity: 1;
}

.alpha:checked ~ .labels > .a-label,
.beta:checked ~ .labels > .b-label,
.charlie:checked ~ .labels > .c-label,
.delta:checked~ .labels > .d-label,
.echo:checked ~ .labels > .e-label {
    background-color: #4fdd39;
}

.labels {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.input {
    display: none;
}

.nav.index {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    display: inline-block;
    margin-right: 6px;
    cursor: pointer;
    border: 1px solid;
}

.img.boxes
{
    width: 1000px;
    height: 720px;
}