/* Font */

@font-face {
    font-family: AkzidenzGrotesk-ExtraBoldAlt;
    src: url(./fonts/AkzidenzGrotesk-ExtraBoldAlt.otf);
}

@font-face {
    font-family: MonumentGrotesk-Regular;
    src: url(./fonts/MonumentGrotesk-Regular.otf);
}

/* General */

body {
    margin: 0;
    background-color: beige;
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

h1 {
    font-size: 10vw;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-family: AkzidenzGrotesk-ExtraBoldAlt;
}

.displayNone {
    display: none;
}

#body {
    font-family: MonumentGrotesk-Regular;
}

.chapterSpace {
    margin-top: 10vh;
}

.border-black {
    border: 1px solid black;
}

.border-black-bottom {
    border-bottom: 1px solid black;
}

.border-black-right {
    border-right: 1px solid black;
}

.border-black-top {
    border-top: 1px solid black;
}

.container {
    display: flex; /* or inline-flex */
    flex-direction: row;
    flex-wrap: wrap;
}

.p-lr {
    padding-left: 50px;
    padding-right: 50px;
}

.step-div {
    width: 73%;
    transition: width 0.2s ease-out 100ms;
}

.step-div:hover {
    width: 78%;
}

/* Image */

img {
    /* vertical-align: bottom; */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.img-stretch {
    width: 100%;
    height: auto;
}

.img-rounded {
    border-radius: 50%;
}

.rotate {
    animation: rotation 80s infinite linear;
}

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

.move-size {
    animation: scale 5s infinite linear;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

/* Ingredients */

.ingrWrapper {
    display: table-cell;
}

.ingr {
    width: 100%;
    height: auto;
    text-align: center;
    vertical-align: middle;
    line-height: 100%;       /* The same as your div height */
    position: relative;
}

.trait {
    position: absolute;
    top: 0;
    left: 0;
}

.avocadoBelt {
    width: 350%;
    height: 100%;
    padding-top: 5vh;
    padding-bottom: 5vh;
    display: table;
}

#avocadoBelt {
    animation: avocadoBeltMoves 48s infinite linear;
}

#avocadoBelt.paused {
    animation-play-state: paused;
}

@keyframes avocadoBeltMoves {
    from {
        margin-left: -234%;
    }
    to {
        margin-left: 0%;
    }
}

.onionBelt {
    width: 265%;
    height: 100%;
    padding-top: 5vh;
    padding-bottom: 5vh;
    display: table;
}

#onionBelt {
    animation: onionBeltMoves 12s infinite linear;
}

#onionBelt.paused {
    animation-play-state: paused;
}

@keyframes onionBeltMoves {
    from {
        margin-left: -88%;
    }
    to {
        margin-left: 0%;
    }
}

.garlicBelt {
    width: 200%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    display: table;
}

#garlicBelt {
    animation: garlicBeltMoves 12s infinite linear;
}

#garlicBelt.paused {
    animation-play-state: paused;
}

@keyframes garlicBeltMoves {
    from {
        margin-left: 0%;
    }
    to {
        margin-left: -80%;
    }
}

.gingerBelt {
    width: 320%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    display: table;
}

#gingerBelt {
    animation: gingerBeltMoves 20s infinite linear;
}

#gingerBelt.paused {
    animation-play-state: paused;
}

@keyframes gingerBeltMoves {
    from {
        margin-left: -80%;
    }
    to {
        margin-left: 0%;
    }
}

.shitakeBelt {
    width: 420%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    display: table;
}

#shitakeBelt {
    animation: shitakeBeltMoves 12s infinite linear;
}

#shitakeBelt.paused {
    animation-play-state: paused;
}

@keyframes shitakeBeltMoves {
    from {
        margin-left: -140%;
    }
    to {
        margin-left: 0%;
    }
}

.vegeBelt {
    width: 400%;
    height: 100%;
    padding-top: 5vh;
    padding-bottom: 5vh;
    display: table;
}

#vegeBelt {
    animation: vegeBeltMoves 12s infinite linear;
}

#vegeBelt.paused {
    animation-play-state: paused;
}

@keyframes vegeBeltMoves {
    from {
        margin-left: -133%;
    }
    to {
        margin-left: 0%;
    }
}

.soyBelt {
    width: 280%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    display: table;
}

#soyBelt {
    animation: soyBeltMoves 16s infinite linear;
}

#soyBelt.paused {
    animation-play-state: paused;
}

@keyframes soyBeltMoves {
    from {
        margin-left: 0%;
    }
    to {
        margin-left: -70%;
    }
}

/* Plate & Belt */

.plateWrapper {
    display: table-cell;
}

.plate {
    width: 30vh;
    height: 30vh;
    background-color: white;
    border-radius: 50%;
    color: black;
    text-align: center;
    vertical-align: middle;
    line-height: 30vh;       /* The same as your div height */
}

#firstBelt {
    width: 480vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: black;
    display: table;
    animation: firstBeltMoves 45s infinite linear;
}

#firstBelt.paused {
    animation-play-state: paused;
}

@keyframes firstBeltMoves {
    from {
        margin-left: -280vw;
    }
    to {
        margin-left: -40vw;
    }
}

#secondBelt {
    width: 400vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: black;
    display: table;
    animation: secondBeltMoves 45s infinite linear;
}

#secondBelt.paused {
    animation-play-state: paused;
}

@keyframes secondBeltMoves {
    from {
        margin-left: 0vw;
    }
    to {
        margin-left: -240vw;
    }
}