* {box-sizing: border-box;}

body {
    background-color: black;
}

ul {
    list-style-type: none;
    background-color: black;
}

li a {
    float: left;
    display: block;
    font-family: 'Courier New', Courier, monospace;
    color: whitesmoke;
    text-decoration: none;
    margin: auto;
    padding: 10px;
}

.active {
    color: yellow;
}

li a:hover {
    background-color: whitesmoke;
    color: black;

}

.header {
    font-family: 'Courier New', Courier, monospace;
    color: whitesmoke;
    text-align: center;
    padding: 20px;
}

.mySlides {
    display: none;
}

img {
    width: auto;
}

/* Slideshow container */
#slideshow-container {
    width: 50%;
    max-width: 700px;
    height: auto;
    position: relative;
    margin: auto;
    padding-top: 25px;
}

/* The dots */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}

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

/* Animation keyframes */
@keyframes fade {
    from {opacity: .4;}
    to {opacity: 1;}
}

@keyframes huerot {
    from {filter: none;}
    to {filter: hue-rotate(90deg);}
}

@keyframes invert {
    from {filter: none;}
    to {filter: invert(100%);}
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}

@keyframes radar-spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}

@keyframes pos-y {
    from {transform: translateY(5px);}
    to {transform: translateY(calc(var(--imageHeight) * -1));}
}

@keyframes x-shift {
    0% {background-position: 0;}
    100% {background-position: -1800px;}
}

@keyframes grow {
    0% {    -webkit-mask-size: 0%;
                    mask-size: 0%;}

    90% {   -webkit-mask-size: 100%;
                    mask-size: 100%;}

    100% {  -webkit-mask-size: 100%;
                    mask-size: 100%;}
}

@keyframes grow-change {
    0% {    -webkit-mask-size: 0%;
                    mask-size: 0%;
                filter: invert(0%);
                    opacity: 1;}

    50% {   -webkit-mask-size: 100%;
                    mask-size: 100%;
                filter: invert(0%);
                    opacity: 1;}

    80% {   -webkit-mask-size: 100%;
                    mask-size: 100%;
                filter: invert(100%);
                    opacity: 1;}

    100% {  -webkit-mask-size: 100%;
                    mask-size: 100%;
                filter: invert(100%);
                    opacity: 0;}
}

@keyframes colorspin {
    from {transform: rotate(0deg);
            filter: hue-rotate(0deg);}
    to {transform: rotate(359deg);
            filter: hue-rotate(360deg);}
}