@font-face {font-family: 'VCR OSD MONO';
    src: url('fonts/VCR OSD MONO.ttf') format('truetype'),
    url('https://github.com/Natalius-dev/vigilant-engine/raw/main/VCROSDMono.woff') format('woff');
}

/* dosis-700 - latin */
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 700;
src: url('fonts/Dosis/dosis-v19-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
 url('fonts/Dosis/dosis-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('fonts/Dosis/dosis-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
 url('fonts/Dosis/dosis-v19-latin-700.woff') format('woff'), /* Modern Browsers */
 url('fonts/Dosis/dosis-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
 url('fonts/Dosis/dosis-v19-latin-700.svg#Dosis') format('svg'); /* Legacy iOS */
}

p {
font-family: 'Dosis';
font-weight: bold;
text-align: center;
margin-left: 30px;
margin-right: 30px;
color: rgb(0, 0, 0);
}

.stand {
    font-family: 'VCR OSD MONO';
    font-weight: bold;
    text-align: center;
}

h1 {
font-family: 'VCR OSD MONO';
font-weight: bold;
text-align: center;
margin-left: 30px;
margin-right: 30px;
padding-top: 1vw;
}

.header {
margin: -10px;
margin-top: -16px;
position: sticky;
top: 0;
background-color: rgb(255, 222, 179);
}
.header ul {
list-style-type: none;
padding: 0;
overflow: hidden;
}
.header li {
float: left;
background-color: rgb(255, 222, 179);
}
.header li a {
display: block;
color: black;
text-align: center;
padding: 1.3vw;
text-decoration: none;
font-family: 'Dosis';
font-weight: bold;
transition-duration: 250ms;
}
.header li a:hover {
background-color: rgb(255, 230, 197);
}

@media (min-width: 64em) {
.row {
display: flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
}
.col { flex-grow: 1; }
}
.grid {
border-collapse: collapse;
}
.col {
border: 6px double rgb(167, 144, 14);
background-color: antiquewhite;
padding: 1em;
}

.horizontal {
width: fit-content;
margin: auto;
list-style-type: none;
padding: 0;
overflow: hidden;
}
.horizontal li {
float: left;
background-color: antiquewhite;
}
.horizontal li img {
max-width: 20vw;
min-width: 4vw;
height: auto;
margin: auto;
}

@media screen and (max-width: 1000px) {
h1 {
padding: 3vw;
}
.grid p {
font-size: 1.4vw;
}
.horizontal li img {
max-width: 25vw;
min-width: 18.5vw;
height: auto;
}
.header li {
font-size: 4vw;
}
.header li a {
padding: 3vw;
}
}

.img-scroll {
    width: 100%;
    height: auto;
    animation: scroll 20s infinite;
    animation-timing-function: ease-in;
    position: static;
}

@keyframes scroll { /* product images */
    0% {
        content:url("https://picsum.photos/id/1/1920/350");
    }
    25% {
        content:url("https://picsum.photos/id/2/1920/350");
    }
    50% {
        content:url("https://picsum.photos/id/3/1920/350");
    }
    75% {
        content:url("https://picsum.photos/id/4/1920/350");
    }
    100% {
        content:url("https://picsum.photos/id/5/1920/350");
    }
}