html {
    --color-primary: #313131;
    --color-grey: #c5c5c4;
    --color-grey-light: #e4e4e4;
    --color-secondary: #d7b44c;
}

.bg-primary {
    background: var(--color-primary);
}
.bg-grey {
    background: var(--color-grey);
}
.bg-grey-light {
    background: var(--color-grey-light);
}
.bg-secondary {
    background: var(--color-secondary);
}

.text-primary {
    color: var(--color-primary);
}
.text-grey {
    color: var(--color-grey);
}
.text-grey-light {
    color: var(--color-grey-light);
}
.text-secondary {
    color: var(--color-secondary);
}

.transition {
    transition: all 0.25s;
}

.btn {
    transition: all 0.25s;
    border: 2px solid var(--color-secondary);
    background: var(--color-secondary);
    color: var(--color-primary);
}
.btn:hover {
    background: var(--color-primary);
    color: var(--color-secondary);
}
.btn.subscribed {
    transition: none;
    margin-left: 0;
    width: 100% !important;
    padding-top: 5px !important;
}
.btn.subscribed:hover {
    cursor: default;
    background: var(--color-secondary);
    color: var(--color-primary);
}

.slide-leave-active,
.slide-enter-active {
    transition: 0.25s;
}
.slide-enter {
    transform: translate(100%, 0);
}
.slide-leave-to {
    transform: translate(-100%, 0);
}

.bg-animation {
    background-image: url("/assets/images/landing-bg.png");
    height: 800%;
    width: 200%;
    margin-top: -10%;
    margin-right: -100%;
    object-fit: cover;
    background-size: 500px auto;
    animation: scrollBackground 30s infinite linear;
}
@media screen and (min-width: 768px) {
    .bg-animation {
        height: 200%;
        background-size: 1200px auto;
        animation: scrollBackground 35s infinite linear;
    }
}
@keyframes scrollBackground {
    0% {
        transform: rotate(-10deg) translateY(0);
    }
    100% {
        transform: rotate(-10deg) translateY(-600px);
    }
}