@font-face {
  font-family: 'JF-Huninn';
  src: url('../fonts/jf-openhuninn-2.1.ttf');
}

@keyframes expand-shrink {
    0% {
        width: 150px;
    }
    50% {
        width: 50px;
    }
    100% {
        width: 150px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        -webkit-opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-opacity: 0;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        -webkit-opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        -webkit-opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        -webkit-opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        -webkit-opacity: 0;
        transform: translateY(100px);
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

:root {
    font-family: 'JF-Huninn', sans-serif;
    color: white;
    --max-index: 6;
    --card-width: 320px;
}

.header-bg {
    background-image: linear-gradient(135deg, #57c424 50%, #30b47d);
}

.nav-bg {
    background-image: linear-gradient(135deg, #17ebe154 50%, #48a74d60);
    backdrop-filter: blur(4px);
}

.nav-bg button {
    transition-duration: 500ms;
}

.nav-bg button:hover {
    box-shadow: 0px 0px 8px 8px rgba(0, 255, 149, 0.582);
}

.main-bg {
    background-image: linear-gradient(135deg, #124e0a 50%, #254b14);
}

.main-bg img {
    transition-duration: 500ms;
}

.main-bg img:hover {
    box-shadow: 0px 0px 8px 8px rgba(0, 255, 149, 0.582);
    cursor: pointer;
}

.evo-timeline-bg {
    background-image: linear-gradient(135deg, #66bb45 50%, #84d45f);
}

.cards-stock {
    display: flex;
    height: 600px;
    width: 100%;
    overflow-x: auto;
    align-items: center;
}

.cards-stock > .wrapper {
    display: flex;
    min-width: calc(var(--max-index) * (var(--card-width) - 40px));
    overflow-x: hidden;
    align-items: center;
    height: 100%;
}

.cards-stock > .wrapper .card {
    display: flex;
    flex-direction: column;
    width: var(--card-width);
    height: 400px;
    padding: 20px;
    background-image: linear-gradient(135deg, #073b12 50%, #305517);
    border-radius: 18px;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .2);
    gap: 20px;
    z-index: calc(var(--max-index) - var(--index));
    transform: translatex(calc(-120px * var(--index)));
    flex-shrink: 0;
    transition: 500ms ease-out;
    cursor: pointer;
}

.cards-stock > .wrapper .card:hover {
    box-shadow: 0px 0px 8px 8px rgba(0, 255, 149, 0.582);
}

.cards-stock > .wrapper .card:nth-child(2n) {
    background-image: linear-gradient(135deg, #207418 50%, #298326);
}

.cards-stock > .wrapper .card > img {
    border-radius: 10px;
}

.cards-stock > .wrapper .card:hover {
    transform: translatex(calc(-120px * var(--index) + var(--card-width) / 1.6)) scale(1.14) rotatez(5deg);
}

.cards-stock > .wrapper .card:hover ~ div.card {
    transform: translatex(calc(-120px * var(--index) + var(--card-width) / 1.6));
}

.cards-stock > .wrapper .card:nth-of-type(1) { --index: 0; }
.cards-stock > .wrapper .card:nth-of-type(2) { --index: 1; }
.cards-stock > .wrapper .card:nth-of-type(3) { --index: 2; }
.cards-stock > .wrapper .card:nth-of-type(4) { --index: 3; }
.cards-stock > .wrapper .card:nth-of-type(5) { --index: 4; }
.cards-stock > .wrapper .card:nth-of-type(6) { --index: 5; }
.cards-stock > .wrapper .card:nth-of-type(7) { --index: 6; }
.cards-stock > .wrapper .card:nth-of-type(8) { --index: 7; }
.cards-stock > .wrapper .card:nth-of-type(9) { --index: 8; }

.history-events-bg {
    background-image: linear-gradient(135deg, #124e0a 50%, #254b14);
}

.history-events-bg .timeline div.card {
    position: relative;
    transition-duration: 500ms;
}

.history-events-bg .timeline div.card:hover {
    box-shadow: 0px 0px 8px 8px rgba(0, 255, 149, 0.582);
}

.history-events-bg .timeline .col1 > div::after {
    z-index: 1;
    content: '';
    position: absolute;
    width: 250px;
    height: 55px;
    top: 50%;
    left: 100%;
    border-top: 4px dashed white;
    border-right: 4px dashed white;
}

.history-events-bg .timeline .col2 > div:not(:last-child)::after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 250px;
    height: 26px;
    top: 50%;
    right: 100%;
    border-top: 4px dashed white;
    border-left: 4px dashed white;
}

@media (max-width: 1024px) {
    .history-events-bg .timeline .col1 > div::after {
        width: 150px;
    }
    .history-events-bg .timeline .col2 > div:not(:last-child)::after {
        width: 150px;
    }
}

.history-events-bg .timeline .col1 .card:nth-child(2n) { background-image: linear-gradient(135deg, #428d17 50%, #58861b); }
.history-events-bg .timeline .col1 .card:nth-child(2n - 1) { border: 2px dashed #428d17; }

.history-events-bg .timeline .col2 .card:nth-child(2n - 1) { background-image: linear-gradient(135deg, #428d17 50%, #58861b); }
.history-events-bg .timeline .col2 .card:nth-child(2n) { border: 2px dashed #428d17; }

.evo-events-bg {
    background-image: linear-gradient(135deg, #66bb45 50%, #84d45f);
}

.evo-events-bg .timeline div.card {
    position: relative;
    transition-duration: 500ms;
}

.evo-events-bg .timeline div.card:hover {
    box-shadow: 0px 0px 8px 8px rgba(0, 255, 149, 0.582);
}

.evo-events-bg .timeline .col1 > div:not(:last-child)::after {
    z-index: 1;
    content: '';
    position: absolute;
    width: 250px;
    height: 55px;
    top: 50%;
    left: 100%;
    border-top: 4px dashed white;
    border-right: 4px dashed white;
}

.evo-events-bg .timeline .col2 > div::after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 250px;
    height: 26px;
    top: 50%;
    right: 100%;
    border-top: 4px dashed white;
    border-left: 4px dashed white;
}

@media (max-width: 1024px) {
    .evo-events-bg .timeline .col1 > div::after {
        width: 150px;
    }
    .evo-events-bg .timeline .col2 > div:not(:last-child)::after {
        width: 150px;
    }
}

.evo-events-bg .timeline .col1 .card:nth-child(2n - 1) { background-image: linear-gradient(135deg, #189b59 50%, #21cc7c); }
.evo-events-bg .timeline .col1 .card:nth-child(2n) { border: 2px dashed #189b59; }

.evo-events-bg .timeline .col2 .card:nth-child(2n) { background-image: linear-gradient(135deg, #189b59 50%, #21cc7c); }
.evo-events-bg .timeline .col2 .card:nth-child(2n - 1) { border: 2px dashed #189b59; }


.evo-reason-bg {
    background-image: linear-gradient(135deg, #073b12 50%, #305517);
}

.important-event-bg {
    background-image: linear-gradient(135deg, #66bb45 50%, #84d45f);
}

.important-event-bg table th:hover, .important-event-bg table td:hover {
    box-shadow: 0px 0px 4px 4px rgba(0, 255, 149, 0.582);
}

.data-analysis-bg {
    background-image: linear-gradient(135deg, #073b12 50%, #305517);
}

.data-analysis-bg img {
    transition-duration: 500ms;
}

.data-analysis-bg img:hover {
    box-shadow: 0px 0px 8px 8px rgba(0, 255, 149, 0.582);
    cursor: pointer;
}

.impact-bg {
    background-image: linear-gradient(135deg, #66bb45 50%, #84d45f);
}

.conclusion-bg {
    background-image: linear-gradient(135deg, #073b12 50%, #305517);
}

.people-opinions-bg {
    background-image: linear-gradient(135deg, #66bb45 50%, #84d45f);
}

.people-opinions-bg .msg-box {
    transition-duration: 500ms;
}

.people-opinions-bg .msg-box:hover {
    box-shadow: 0px 0px 8px 8px rgba(0, 255, 149, 0.582);
}

.people-opinions-bg .lines {
    --hovered: 0;
}

.people-opinions-bg .lines:has(.msg-box:hover) {
    --hovered: 1;
}

.footer-bg {
    background-image: linear-gradient(135deg, #073b12 50%, #305517);
}

.img-preview {
    transform: translate(-50%, -50%);
    opacity: 0;
    display: none;
}

.card-preview {
    transform: translate(-50%, -50%);
    opacity: 0;
    display: none;
}

.menu {
    transform: translate(-50%, -50%);
    opacity: 0;
    display: none;
}

.menu > button {
    transition-duration: 500ms;
}

.menu > button:hover {
    box-shadow: 0px 0px 8px 8px rgba(0, 255, 149, 0.582);
}

.img-preview * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.card-preview * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

span.highlight {
    display: inline-block;
    background-image: linear-gradient(135deg, #c2f288 50%, #d8eb8e);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1.4em;
    font-weight: bold;
}

@keyframes slideInPreview {
    from {
        transform: translate(-50%, 0);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes slideOutPreview {
    from {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 0;
    }
}

.slidein-preview {
    animation: slideInPreview 500ms ease-out forwards;
}

.slideout-preview {
    animation: slideOutPreview 500ms ease-out forwards;
}

.expand-shrink {
    width: 150px;
    animation: expand-shrink 5s infinite;
}

.fadein { opacity: 0; -webkit-opacity: 0; animation: fadeIn 500ms ease-out forwards; }
.fadeout { animation: fadeOut 500ms ease-out; }
.slidein { opacity: 0; -webkit-opacity: 0; animation: slideIn 500ms ease-out forwards; }
.slideout { animation: slideOut 500ms ease-out; }

.fadein-bounce {
    opacity: 0;
    -webkit-opacity: 0;
    animation: fadeIn 500ms ease-out forwards, bounce 1s ease-in-out infinite;
}

/* animation delay 1 - 50 */
.ani-delay-1 { animation-delay: 100ms; }
.ani-delay-2 { animation-delay: 200ms; }
.ani-delay-3 { animation-delay: 300ms; }
.ani-delay-4 { animation-delay: 400ms; }
.ani-delay-5 { animation-delay: 500ms; }
.ani-delay-6 { animation-delay: 600ms; }
.ani-delay-7 { animation-delay: 700ms; }
.ani-delay-8 { animation-delay: 800ms; }
.ani-delay-9 { animation-delay: 900ms; }
.ani-delay-10 { animation-delay: 1000ms; }
.ani-delay-11 { animation-delay: 1100ms; }
.ani-delay-12 { animation-delay: 1200ms; }
.ani-delay-13 { animation-delay: 1300ms; }
.ani-delay-14 { animation-delay: 1400ms; }
.ani-delay-15 { animation-delay: 1500ms; }
.ani-delay-16 { animation-delay: 1600ms; }
.ani-delay-17 { animation-delay: 1700ms; }
.ani-delay-18 { animation-delay: 1800ms; }
.ani-delay-19 { animation-delay: 1900ms; }
.ani-delay-20 { animation-delay: 2000ms; }
.ani-delay-21 { animation-delay: 2100ms; }
.ani-delay-22 { animation-delay: 2200ms; }
.ani-delay-23 { animation-delay: 2300ms; }
.ani-delay-24 { animation-delay: 2400ms; }
.ani-delay-25 { animation-delay: 2500ms; }
.ani-delay-26 { animation-delay: 2600ms; }
.ani-delay-27 { animation-delay: 2700ms; }
.ani-delay-28 { animation-delay: 2800ms; }
.ani-delay-29 { animation-delay: 2900ms; }
.ani-delay-30 { animation-delay: 3000ms; }
.ani-delay-31 { animation-delay: 3100ms; }
.ani-delay-32 { animation-delay: 3200ms; }
.ani-delay-33 { animation-delay: 3300ms; }
.ani-delay-34 { animation-delay: 3400ms; }
.ani-delay-35 { animation-delay: 3500ms; }
.ani-delay-36 { animation-delay: 3600ms; }
.ani-delay-37 { animation-delay: 3700ms; }
.ani-delay-38 { animation-delay: 3800ms; }
.ani-delay-39 { animation-delay: 3900ms; }
.ani-delay-40 { animation-delay: 4000ms; }
.ani-delay-41 { animation-delay: 4100ms; }
.ani-delay-42 { animation-delay: 4200ms; }
.ani-delay-43 { animation-delay: 4300ms; }
.ani-delay-44 { animation-delay: 4400ms; }
.ani-delay-45 { animation-delay: 4500ms; }
.ani-delay-46 { animation-delay: 4600ms; }
.ani-delay-47 { animation-delay: 4700ms; }
.ani-delay-48 { animation-delay: 4800ms; }
.ani-delay-49 { animation-delay: 4900ms; }
.ani-delay-50 { animation-delay: 5000ms; }