body {
    margin    : 0;
    padding   : 0;
    background: rgb(20, 20, 20);
    background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(6, 6, 6, 1) 100%);
}

body:hover {
    filter: grayscale(0%);
}

*::selection {
    background: transparent;
}

.main {
    position           : absolute;
    top                : 10vh;
    left               : 10vw;
    width              : 80vw;
    height             : 80vh;
    background-color   : black;
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: center;
    z-index            : 1;
    animation          : reveal 1s;
}

.logo {
    position: absolute;
    top     : 4vh;
    right   : 7vw;
    z-index: 2;
    width : 10vw;
    /* Filter drop shadow and greyscale */
    filter: drop-shadow(0px 0px 10px rgb(124, 119, 42));
}

/* Reveal animation */
@keyframes reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.image {
    display            : block;
    width              : 100%;
    height             : 100%;
    background-position: center;
    background-size    : cover;
    background-repeat  : no-repeat;
    z-index            : -1;
}

/* Next & previous buttons */
.prev,
.next {
    cursor       : pointer;
    position     : absolute;
    top          : 50%;
    width        : auto;
    margin-top   : -22px;
    padding      : 16px;
    color        : white;
    font-weight  : bold;
    font-size    : 18px;
    transition   : 0.3s ease;
    border-radius: 0 3px 3px 0;
    user-select  : none;
    opacity      : 0.4;
}

/* Position the "next button" to the right */
.next {
    right        : 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    opacity: 1;
}

/* Caption text */
.text {
    color     : #f2f2f2;
    font-size : 15px;
    padding   : 8px 12px;
    position  : absolute;
    bottom    : 8px;
    width     : 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color      : #f2f2f2;
    font-size  : 1vw;
    padding    : 8px 12px;
    position   : absolute;
    top        : 0;
    /* sans serif */
    font-family: 'Roboto', sans-serif;
}

/* Fading animation */
.fade {
    animation-name    : fade;
    animation-duration: .5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}