html, body {
    height: 100%;
}



#slideshow img:not(#image6) {
  display: none;
}
#slideshow {
    border: 18px groove goldenrod;
    height: 500px;
    width: 350px;
    margin: 10px auto;
}
body {
    background: radial-gradient(
        circle 1400px at center,
         white 3%,
         rgba(255,255,255,0.3) 5%,
         rgba(0,0,0,0.7) 20%,
         black 100%);
         background-position: center;
         background-size: cover;
}

#image1 {
    position: absolute;
    top: 27px;
    left: 582px;
    z-index: 1;
}
#image2 {
    position: absolute;
    top: 27px;
    left: 582px;
    z-index: 2;
}
#image3 {
    position: absolute;
    top: 27px;
    left: 582px;
    z-index: 3;
}
#image4 {
    position: absolute;
    top: 27px;
    left: 582px;
    z-index: 4;
}
#image5 {
    position: absolute;
    top: 27px;
    left: 582px;
    z-index: 5;
}
#image6 {
    position: absolute;
    top: 27px;
    left: 582px;
    z-index: 6;
    cursor: pointer;
    
}


a {
    display: block;
    color: #6b6b6b;
    text-decoration: none;
    font-size: 50px;
    padding: 10px;
    position: absolute;
}
a:hover {
    color: crimson;
}
#next {
    top:690px;
    left: 790px;
}
#prev {
    top:690px;
    left: 698px;
}
#thumb6, #thumb5, #thumb4, #thumb3, #thumb2, #thumb1 {
    cursor: pointer;
    width: 95px;
    height: 120px;
    position: absolute;
    top: 575px;
    box-sizing: border-box;
}
#thumb6 {left: 460px;}
#thumb5 {left: 560px;}
#thumb4 {left: 660px;}
#thumb3 {left: 760px;}
#thumb2 {left: 860px;}
#thumb1 {left: 960px;}

.thumbs {
    border: double 2px black;
}

.active {
    border: double 4px crimson;
}