:root {
    /* Primary colors */
    --color-red: 255, 69, 58;
    --color-pink: 255, 55, 95;
    --color-yellow: 255, 159, 10;
    --color-blue: 10, 132, 255;
    --color-green: 50, 215, 75;
    --color-aqua: 41, 184, 255;
    --color-indigo: 94, 92, 230;
    --color-purple: 191, 90, 242;
    --color-mint: 102, 212, 207;

    /*Pastel colors*/
    --color-mint-pastel: 210, 219, 204;     /* #D2DBCC */
    --color-yellow-pastel: 242, 230, 177;   /* #F2E6B1 */
    --color-pink-pastel: 242, 178, 212;     /* #F2B2D4 */
    --color-green-pastel: 180, 214, 213;    /* #B4D6D5 */
    --color-blue-pastel: 178, 198, 230;     /* #B2C6E6 */
    --color-red-pastel: 255, 159, 153;      /* #FF9F99 */

    /* Neutral colors */
    --color-light: 255, 255, 255;
    --color-dark: 0, 0, 0;
    --color-grey: 217, 217, 217; /* #D9D9D9 */
    --color-light-grey: 225, 225, 225;


    /* Other variables */

    --transition-speed: 0.2s;
}
/* element colors*/
.white {
    background: rgba(var(--color-light), 0.8);
}
.red {
    background: rgba(var(--color-red), 0.8);
}
.pink {
    background: rgba(var(--color-pink), 0.6);

}
.yellow {
    background: rgba(var(--color-yellow), 0.8);
}
.blue {
    background: rgba(var(--color-blue), 0.8);
}
.pastel-blue {
    background: rgba(var(--color-aqua), 0.8);
}
.green {
    background: rgba(var(--color-green), 0.8);
}
.indigo {
    background: rgba(var(--color-indigo), 0.8);
}
.purple {
    background: rgba(var(--color-purple), 0.8);
}

.pastel-yellow {
    background: rgba(var(--color-yellow-pastel), 0.8);
}
.pastel-mint {
    background: rgba(var(--color-mint-pastel), 0.8);
}
.pastel-pink {
    background: rgba(var(--color-pink-pastel), 0.8);
}
.pastel-green {
    background: rgba(var(--color-green-pastel), 0.8);
}
.pastel-blue {
    background: rgba(var(--color-blue-pastel), 0.8);
}
.pastel-red {
    background: rgba(var(--color-red-pastel), 0.8);
}

.frosted-glass {
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-window {
    border-radius: 100px;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid rgba(255, 255, 255, 0.40);
    background: rgba(128, 128, 128, 0.30);
    background-blend-mode: luminosity;

    /* Blur */
    backdrop-filter: blur(50px);
}

/* typical button */

.default-button-background {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10%;
    padding: 0;
    border-radius: 50px;
    height: 70px;
    transition: all 0.2s ease-in-out;
}

/*.default-button {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    margin: 0;*/
/*    padding: 0 20px;*/
/*    border-radius: 50px;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: rgba(var(--color-grey), 0.2);*/
/*    color: rgba(var(--color-light), 1);*/
/*    transition: all 0.2s ease-in-out;*/
/*    cursor: pointer;*/
/*}*/

/*.default-button-background:hover .default-button {*/
/*    background: rgba(var(--color-grey), 0.01);*/
/*    box-shadow: 0 0 10px rgba(var(--color-light), 0.5);*/
/*    transform: scale(1.2);*/
/*}*/

/*.default-button-background:hover {*/
/*    transform: scale(0.90);*/
/*}*/

/*.default-button {*/
/*    border-radius: 40px;*/
/*    border: 1px solid #FFF;*/
/*    background: rgba(241, 241, 241, 0.70);*/
/*    background-blend-mode: luminosity;*/
/*    backdrop-filter: blur(10px);*/
/*    width: 80%;*/
/*    max-width: 200px;*/
/*    min-height: 80px;*/
/*    max-height: 100px;*/
/*    padding: 5px;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    transition: all 0.3s ease;*/
/*    margin: 0;*/
/*}*/

/*.default-button p {*/
/*    width: calc(100% - 10px);*/
/*    height: calc(100% - 10px);*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    border-radius: 35px;*/
/*    flex: 1;*/
/*    transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;*/
/*    max-height: none;*/

/*    font-weight: 500;*/
/*    font-size: 30px;*/
/*    color: rgba(var(--color-light), 1);*/
/*    text-align: center;*/
/*    margin: auto;*/
/*}*/

/*.default-button:hover {*/
/*    background: rgba(241, 241, 241, 0.90);*/
/*    transform: translateY(-2px);*/
/*    padding: 0;*/
/*    margin: 5px;*/
/*    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);*/
/*    border: 0 solid #FFF;*/

/*}*/

/*.default-button:hover .default-button-container {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    border-radius: 40px;*/
/*    transform: scale(1.05);*/
/*}*/

/*.default-button:hover a {*/
/*   transform: scale(1.05);*/
/*}*/
.default-button {
    display: block;
    width: 100%;
    max-width: 300px;
    border-radius: 30px;
    text-decoration: none;
    background: rgba(241, 241, 241, 0.70);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px;
    transition: all 0.3s ease;
    margin: 10px auto;
}

.default-button-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 70px;
    border-radius: 25px;
    font-size: 24px;
    font-weight: 500;
    color: rgba(var(--color-light), 1);
    transition: all 0.3s ease;
}

.default-button:hover {
    background: rgba(241, 241, 241, 0.90);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    padding: 0;
    margin: 15px auto;
}
.default-button:hover [data-i18n] {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .default-button {
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    .default-button-content {
        min-height: 60px;
        font-size: 20px;
    }
}

/* body */
body {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}


body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-light), 0.5);
    background-image: url('../media/background-10.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* footer */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:50px auto 0 auto;
    padding: 4px;
    height: 30px;
    width:80%;
    gap: 10px;
    border-radius: 19px !important;
    background: rgba(var(--color-grey), 0.2);
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

footer a {
    background: rgba(var(--color-light), 0.5);
    color: rgba(var(--color-dark), 0.8);
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0 10px;
    height: 100%;
    border-radius: 15px;
    transition: all 0.2s ease-in-out;
}

footer .footer-connect-icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 100%;
    gap: 10px;
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
}

.trident {
    padding: 0 0 0 5px;
    width: 0;
    height: 0;
    transition: all 0.2s ease-in-out;
}

@media(max-width: 620px) {
    footer {
        flex-direction: column;
        align-items: center;
        height: auto;
        width: auto;
        background: rgba(var(--color-light), 0.2);
    }
    footer a {
        width: 100%;
        height: 100%;
        padding: 8px;
        color: rgba(var(--color-dark), 1);
        background: rgba(241,241,241, 0.3);

    }
    footer .footer-connect-icons {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        gap: 30px;
        flex: 1;
    }

    footer .footer-link-text {
        padding: 5px 0;
    }
}
@media(min-width: 620px) {
    footer a:not(.ukraine-link):hover {
        color: rgba(var(--color-dark), 1);
        padding: 0 15px;
        background: rgba(var(--color-light), 1);
    }

    footer .ukraine-link:hover {
        background: linear-gradient(to right, rgba(0, 87, 183, 1), rgba(255, 215, 0, 1));
        color: rgba(var(--color-light), 1);
        padding: 0 15px;
    }
}



/* STATUS BAR */
.status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: auto;
    margin: 0;
    padding: 5px 10px 5px 5px;
    gap: 10px;
    border-radius: 20px;
    background: rgba(var(--color-light), 0.8);

    transition: background var(--transition-speed) ease-in-out;
}
.status-container:hover {
    background: rgba(var(--color-light), 0.5);
}
.status-container .status-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.status-container p {
    font-size: 20px;
    padding: 0;
    margin: 0;
    color: rgba(var(--color-dark), 0.7);
    transition: color var(--transition-speed) ease-in-out;
}
.status-container:hover p {
    color: rgba(var(--color-dark), 1);
}


/* TIMELINE BLOCKS */

/* overlapping block elements */

.default-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin: 50px auto;
    min-height: 100vh;
}

.overlap-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    height: auto;
    /* Optional minimum height to ensure visibility */
    min-height: 300px;
}

.background-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: rgba(var(--color-grey), 0.3);
    transform: translateX(-50%);
    z-index: 0;
}

.content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 2;
    gap: 30px;
}
.clickable {
    cursor: pointer;
}

/* Dot Marker */
.dot-marker-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    padding: 10px 0;
    align-content: center;
}

.big-dot {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2;
}

.small-dot {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: rgba(var(--color-light), 0.5);
}

.dot-marker-container .dot-marker-text {
    font-size: 30px;
    font-weight: 600;
    line-height: 40px;
    padding: 0;
    margin: 0;
}


/* Blur effect */
.progressive-blur-container {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 50%;
    z-index: 1;
    overflow: hidden;
    border-radius: 0 0 40px 40px;
}

.higher {
    top: 20%;
    height: 80%;
}

.blur-filter {
    position: absolute;
    width: 100%;
    height: 20%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.blur-filter:nth-of-type(1) {
    bottom: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0 0 40px 40px;
}

.blur-filter:nth-of-type(2) {
    bottom: 12%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 0 40px 40px;

}

.blur-filter:nth-of-type(3) {
    bottom: 24%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.blur-filter:nth-of-type(4) {
    bottom: 36%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.blur-filter:nth-of-type(5) {
    bottom: 48%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.blur-filter:nth-of-type(6) {
    bottom: 60%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.blur-filter:nth-of-type(7) {
    bottom: 72%;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.gradient {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            to bottom,
            rgba(var(--color-light), 0) 0%,
            rgba(var(--color-light), 0.3) 5%,
            rgba(var(--color-light), 0.6) 50%,
            rgba(var(--color-light), 0.7) 85%,
            rgba(var(--color-light), 0.8) 100%
    );
    z-index: 4;
    pointer-events: none;
}

.light-gradient {
    background: linear-gradient(
            to bottom,
            rgba(var(--color-light), 0) 0%,
            rgba(var(--color-light), 0.10) 5%,
            rgba(var(--color-light), 0.20) 20%,
            rgba(var(--color-light), 0.3) 50%,
            rgba(var(--color-light), 0.5) 70%,
            rgba(var(--color-light), 0.7) 85%,
            rgba(var(--color-light), 0.8) 100%
    );
}

.important-block {
    box-shadow: 0 0 14px 7px rgba(191, 0, 255, 0.15) !important;
}