/*
 * Globals
 */

:root {
    --primary: #0066cc;
    --dark: #404040;
    
}


/* Custom default button */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    color: var(--primary);
    text-shadow: none; /* Prevent inheritance from `body` */
}

.btn-dark,
.btn-dark:hover,
.btn-dark:focus {
    color: var(--dark);
    text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Card Defaults
 */
.card {
    background: linear-gradient(to bottom, var(--primary) 0%, var(--dark) 100%);
}


/*
 * Base structure
 */



#cover {
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
    height: 100%;
}


.cover-container {
    max-width: 420em;
}


/*
 * Header
 */

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-weight: 700;
    color: white;
    background-color: transparent;
    border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    color: white;
    border-bottom-color: var(--primary);
}

.nav-masthead .nav-link + .nav-link {
    color: white;
    margin-left: 1rem;
}

.nav-masthead .active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}






@keyframes cover-ani {
    0%   {
	    background-image: url('https://techki.co.za/wp-content/uploads/2022/02/geometric200-e1647466246151.png');
    }
    50%  {
	    background-image: url('https://techki.co.za/wp-content/uploads/2022/02/geometric001-e1644703940764.png');
    }
    100%  {
	    background-image: url('https://techki.co.za/wp-content/uploads/2022/02/geometric200-e1647466246151.png');
    }
}

#cover {
    height: 100%;
    animation-name: cover-ani;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    left: 0;
    transition: left background-image 2s linear 1s;
    -webkit-transition: left background-image 2s linear 1s;
    -moz-transition: left background-image 2s linear 1s;
    -o-transition: left background-image 2s linear 1s;
} 







/* The animation code
@keyframes cover-ani {
    0%   {
	background-image: url(
	    'https://techki.co.za/wp-content/uploads/2022/01/gnome-wallpaper-burntblue-spherized-lilplanet-inverted-light.png');
    }
    10%  {
	background-image: url('https://techki.co.za/wp-content/uploads/2022/02/bglight3.png');
	
    }
    40%  {
	background-image: url('https://techki.co.za/wp-content/uploads/2022/01/gnome-wallpaper-burntblue-spherized-lilplanet-inverted-light.png');
	
    }
    60% {
	background-image: url('https://techki.co.za/wp-content/uploads/2022/02/bglight3.png');
    }
    70% {
	background-image: url('https://techki.co.za/wp-content/uploads/2022/02/privacy-policy-bg.jpg');
    }
    80% {
	background-image: url('https://techki.co.za/wp-content/uploads/2022/01/theme-bg-1-e1643239330968.jpg');
    }
    90% {
	background-image: url('https://techki.co.za/wp-content/uploads/2022/01/aron-visuals-bZZp1PmHI0E-unsplash-scaled-e1643239399443.jpg');
    }
    100% {
	background-image: url('https://techki.co.za/wp-content/uploads/2022/02/Windows-11-Bloom-Screensaver-Light.jpg');
    }
}

The element to apply the animation to

#cover {
    height: 100%;
    animation-name: cover-ani;
    animation-duration: 42s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    left: 0;
    transition: left background-image 2s linear 1s;
} 
*/