/**
 * Pure CSS slider/carousel with rollback when the animation is finished.
 *
 * It is strongly suggested not to use more than 25 slides.
 * To keep a smooth transition between images use 30 seconds as animation duration and a max of
 * 10 slides in total.
 * 
 * If you feel you need to speed up the slider, try to reduce the `$animation-duration` variable.
 */
$slides-number: 10;
$percentage: 100 / $slides-number;

/**
 * The last transition between the slides is rolling back to the beginning creating a roll back effect.
 * 
 * If you prefer an effect that is continuosly looping through the slides check the following CodePen:
 * https://codepen.io/riccardo-andreatta/full/rNxyYOM
 */
@keyframes slide {
    @for $i from 0 through $slides-number {
        @if $i > 0 and $i <= $slides-number {
            #{($i * $percentage * 1%) - 2%} {
                left: (-100 * ($i - 1) * 1%);
            }
        }
        #{$i * $percentage * 1%} {
            @if $i == $slides-number {
                left: 0%;
            } @else {
                left: (-100 * $i * 1%);
            }
        }
    }
}

.slider {
    font-family: Verdana, Geneva, sans-serif;
    overflow: hidden;
    width: 100%;

    &__container {
        position: relative;
        animation: 30s slide infinite;
        font-size: 0;
        width: 1000%;

        figure {
            display: inline-block;
            width: 10%;
        }

        figcaption { 
            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.1);
            font-size: 32px;
            color: #fff;
            padding: 10px 16px;
            text-shadow: 2px 2px 6px #222;
            width: 100%;
        }
    }
}



/* General styles */
body {
    font-family: Verdana, Geneva, sans-serif;
}

/* Navigation Menu */
.navigation {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0);
    width: 100%;
    z-index: 2;
    margin-right: 32px;
    text-align: right;
    height: 80px;
    width: auto;

    &__link {
        font-size: 24px;
        color: #fff;
        margin-left: 20px;
        text-decoration: none;
        text-shadow: 0 0 6px #222222;

        &:hover {
            color: #ededed;
            text-shadow: 1px 1px 2px #222222;
        }
    }
}