#bg {
    position: fixed;
    transform: translate(calc(var(--tx, 0) * var(--multiplier, 1)), calc(var(--ty, 0) * var(--multiplier, 1)));
    inset: -30px;
    background: rgb(31, 31, 31) var(--background) center/cover no-repeat;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body {
    font-family: 'Exo', sans-serif;
    background-color: #ffffff;
    color: #fff;
    height: 100%;
}

.container {
    display: grid;
    place-items: center;
    margin: 0; 
    padding: 0; 
    overflow: visible; 
    height: 100vh; 
    cursor: default;
    transition: transform 0.3s ease;
    position: relative; 
}

.card-main {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    grid-gap: 16px; 
    width: fit-content; 
}

.card1 {
    display: flex;
 
    .panel-1 {

        .panel-social-networks {
            display: flex;
            border-radius: 15px;
            width: 38px;
            height: 175px;
            backdrop-filter: blur(30px);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
            background: rgba(152, 152, 152, 0.1);

            .panel-sci {
                margin-left: 9px;
                display: flex;
                flex-direction: column;
                gap: 11px;
                justify-content: center;

                a {
                    display: block;
                    width: 20px; 
                    height: 20px;
                }
            }
        }

        .panel-other {
            display: flex; 
            flex-direction: column;
            border-radius: 15px;
            width: 38px;
            height: 38px;
            backdrop-filter: blur(30px);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
            background: rgba(152, 152, 152, 0.1);
            margin-top: 16px;

            .panel-avatar-rzx {
                margin-top: 4px;
                margin-left: 4px;
            }
        }
    }

    .card-akainly {
        border-radius: 15px;
        width: 434px;
        height: 304px;
        backdrop-filter: blur(30px);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        background: rgba(152, 152, 152, 0.1);
        margin-left: 16px;

        .card-name-akainly {
            font-family: "Joti One", serif;
            font-weight: 400;
            font-size: 23px;
            color: #ce8a99;
            margin-left: 169px;
            margin-top: 6px;
            position: absolute;
        }
    }

    .card-info-akainly {
        border: 3px solid rgba(206, 138, 153, 0.4);
        border-radius: 15px;
        width: 376px;
        height: 234px;
        background: rgba(217, 217, 217, 0);
        margin-top: 41px;  
        margin-left: 29px;

        .akainly-avatar {
            margin-top: 11px;
            margin-left: 143px;
        }

        .stick-1 {
            border: 1.5px solid rgba(206, 138, 153, 0.4);
            width: 350px;
            height: 0px;   
            margin-top: 9px;
            margin-left: 11px;         
        }

        .info-akainly {
            margin-top: 5px;
            margin-left: 28px;

            p {
                font-family: "Aoboshi One", serif;
                font-weight: 400;
                font-size: 17px;
                color: #000; 
                text-align: center;
                width: 319px;
            }

            .gradient-text-akainly {
                background: linear-gradient(90deg, #ce8a99 0%, #70557e 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-size: 200% 100%;
                animation: gradient-swap 3s ease infinite;
            }
            
            @keyframes gradient-swap {
                0% {
                    background-position: 0% 50%;
                }
                25% {
                    background-position: 50% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                75% {
                    background-position: 150% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }
        }
    }
}

.card2 {

    .card-time-date {
        display: flex;
        gap: 16px;

        .card-time {
            border-radius: 15px;
            width: 209px;
            height: 144px;  
            backdrop-filter: blur(30px);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
            background: rgba(152, 152, 152, 0.1);

            .card-name-time {
                font-family: "Joti One", serif;
                font-weight: 400;
                font-size: 23px;
                color: #ce8a99;
                margin-top: 6px;
                margin-left: 70px;
                position: absolute;
            }

            .info-time {
                border: 3px solid rgba(206, 138, 153, 0.4);
                border-radius: 15px;
                width: 167px;
                height: 82px;
                background: rgba(217, 217, 217, 0);
                margin-top: 40px;
                margin-left: 21px;

                .time {
                    font-weight: 400;
                    font-size: 20px;
                    color: #000;
                    font-family: "Joti One", serif;
                    margin-top: 13px;
                    margin-left: 41px;
                }

                .time-utc {
                    font-weight: 400;
                    font-size: 15px;
                    color: #4e4d4d;
                    font-family: "Joti One", serif;
                    margin-left: 59px;
                }
            }
        }

        .card-date {
            border-radius: 15px;
            width: 209px;
            height: 144px;  
            backdrop-filter: blur(30px);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
            background: rgba(152, 152, 152, 0.1);

            .card-name-date {
                font-family: "Joti One", serif;
                font-weight: 400;
                font-size: 23px;
                color: #ce8a99;
                margin-top: 6px;
                margin-left: 70px;
                position: absolute;
            }

            .info-date {
                border: 3px solid rgba(206, 138, 153, 0.4);
                border-radius: 15px;
                width: 167px;
                height: 82px;
                background: rgba(217, 217, 217, 0);
                margin-top: 40px;
                margin-left: 21px;

                .date {
                    font-family: "Joti One", serif;                 
                    font-weight: 400;
                    font-size: 20px;
                    color: #000;
                    margin-top: 23px;
                    margin-left: 28px;
                }
            }
        }
    }

    .card-activity {
        border-radius: 15px;
        width: 434px;
        height: 144px;
        backdrop-filter: blur(30px);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        background: rgba(152, 152, 152, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        position: relative;
        margin-top: 16px;
    }
    
    .name-activity {
        font-weight: 400;
        font-size: 20px;
        color: #ce8a99;
        font-family: "Joti One", serif;
        margin-top: 6px;
        margin-left: 168px; 
        align-self: flex-start; 
    }
    
    .info-activity {
        border: 3px solid rgba(206, 138, 153, 0.4);
        border-radius: 15px;
        width: 404px;
        height: 88px;
        background: rgba(217, 217, 217, 0);
        margin-top: 5px;
        margin-left: 15px;

        p {
            display: grid;
            flex-direction: column;
            align-items: center;
            margin: 0 auto;
            justify-content: center;
            font-family: "Joti One", serif;                 
            font-weight: 400;
            font-size: 20px;
            color: #000;
            margin-top: 25px;
        }
    }    
}

.card3 {
    display: flex;
    flex-direction: row;
    gap: 16px;

    .panel-project {
        display: flex; 
        flex-direction: column;
        border-radius: 15px;
        width: 38px;
        height: 76px;
        backdrop-filter: blur(30px);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        background: rgba(152, 152, 152, 0.1);
        
        .panel-project-avatar {
            margin-top: 4px;
            margin-left: 4px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
    }

    .card-project {
        border-radius: 15px;
        width: 434px;
        height: 304px;
        backdrop-filter: blur(30px);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        background: rgba(152, 152, 152, 0.1);
        flex-direction: column;
        position: relative;

        .card-name-project {
            font-family: "Joti One", serif;
            font-weight: 400;
            font-size: 23px;
            color: #70557e;
            margin-left: 159px;
            margin-top: 6px;
            position: absolute;
        }

        .card-info-project {
            border: 3px solid rgba(112, 85, 126, 0.4);
            border-radius: 15px;
            width: 376px;
            height: 234px;
            background: rgba(217, 217, 217, 0);
            margin-top: 41px;  
            margin-left: 29px;
            position: relative;
            overflow-y: auto;
            scrollbar-width: none;

            .main-info {
                display: flex;

                .project-avatar {
                    margin-top: 11px;
                    margin-left: 11px;
                }
    
                .name-project {
                    font-family: "Joti One", serif;
                    font-weight: 400;
                    font-size: 20px;
                    color: #000;
                    margin-left: 24px;
                    margin-top: 16px;
                    width: 200px;

                    .create {
                        font-family: "Joti One", serif;
                        font-weight: 400;
                        font-size: 16px;
                        color: #3a3a3a;                     
                    }

                    .create-akainly {
                        background: linear-gradient(93deg, #ce8a99 0%, #70557e 100%);
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent; 
                                              
                    }
                }

                .button-invite {
                    border: 3px solid rgba(112, 85, 126, 0.4);
                    border-radius: 15px;
                    width: 38px;
                    height: 38px;
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                    background: rgba(152, 152, 152, 0.01); 
                    flex-direction: column;
                    margin-top: 37px;
                    margin-left: 320px;
                    position: absolute;
                    cursor: pointer;
                    transition: transform 0.3s ease, border-color 0.3s ease; 
                    
                    .sci-invite {
                        margin-top: 2px;
                        margin-left: 1px;
                        position: relative;
                    }
                }
            }

            .stick-2 {
                border: 1.5px solid rgba(112, 85, 126, 0.4);
                width: 350px;
                height: 0px;   
                margin-top: 9px;
                margin-left: 11px;   
            }

            .info-project {
                margin-top: 5px;
                margin-left: 28px;
    
                p {
                    font-family: "Aoboshi One", serif;
                    font-weight: 400;
                    font-size: 17px;
                    color: #000; 
                    width: 319px;
                }

                .color {
                    color: #70557E;
                }
            }
        }

        .card-info-profect-xikass {
            border: 3px solid rgba(112, 85, 126, 0.4);
            border-radius: 15px;
            width: 376px;
            height: 234px;
            background: rgba(217, 217, 217, 0);
            margin-top: 41px;  
            margin-left: 29px;
            position: relative;
            overflow-y: auto;
            scrollbar-width: none;

            .main-info {
                display: flex;

                .project-avatar {
                    margin-top: 11px;
                    margin-left: 11px;
                }
    
                .name-project {
                    font-family: "Joti One", serif;
                    font-weight: 400;
                    font-size: 20px;
                    color: #000;
                    margin-left: 24px;
                    margin-top: 16px;
                    width: 200px;

                    .create {
                        font-family: "Joti One", serif;
                        font-weight: 400;
                        font-size: 16px;
                        color: #3a3a3a;                     
                    }

                    .create-akainly {
                        background: linear-gradient(93deg, #ce8a99 0%, #70557e 100%);
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;                       
                    }
                }

                .button-invite {
                    border: 3px solid rgba(112, 85, 126, 0.4);
                    border-radius: 15px;
                    width: 38px;
                    height: 38px;
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                    background: rgba(152, 152, 152, 0.01); 
                    flex-direction: column;
                    margin-top: 37px;
                    margin-left: 320px;
                    position: absolute;
                    cursor: pointer;
                    transition: transform 0.3s ease, border-color 0.3s ease; 
                    
                    .sci-invite {
                        margin-top: 2px;
                        margin-left: 1px;
                        position: relative;
                    }
                }
            }

            .stick-2 {
                border: 1.5px solid rgba(112, 85, 126, 0.4);
                width: 350px;
                height: 0px;   
                margin-top: 9px;
                margin-left: 11px;   
            }

            .info-project {
                margin-top: 5px;
                margin-left: 28px;
    
                p {
                    font-family: "Aoboshi One", serif;
                    font-weight: 400;
                    font-size: 17px;
                    color: #000; 
                    width: 319px;
                }

                .color {
                    color: #70557E;
                }
            }
        }
    }

}

.card4 {
    display: flex;
    flex-direction: row;
    gap: 16px;

    .card-advertising {
        border-radius: 15px;
        width: 434px;
        height: 304px;
        backdrop-filter: blur(30px);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        background: rgba(152, 152, 152, 0.1);
        flex-direction: column;
        position: relative;

        .card-name-advertising {
            font-family: "Joti One", serif;
            font-weight: 400;
            font-size: 23px;
            color: #70557e;
            margin-left: 130px;
            margin-top: 6px;
            position: absolute;
        }

        .card-info-advertising {
            border: 3px solid rgba(112, 85, 126, 0.4);
            border-radius: 15px;
            width: 376px;
            height: 234px;
            background: rgba(217, 217, 217, 0);
            margin-top: 41px;  
            margin-left: 29px;
            position: relative;
            overflow-y: auto;
            scrollbar-width: none;
    
            .main-info {
                display: flex;
    
                .advertising-avatar {
                    margin-top: 11px;
                    margin-left: 11px;
                }
    
                .name-advertising {
                    font-family: "Joti One", serif;
                    font-weight: 400;
                    font-size: 20px;
                    color: #000;
                    margin-left: 24px;
                    margin-top: 16px;
                    width: 180px;
    
                    .create {
                        font-family: "Joti One", serif;
                        font-weight: 400;
                        font-size: 16px;
                        color: #3a3a3a;                     
                    }
    
                    .create-rzx {
                        background: linear-gradient(93deg, #0b0047 0%, #728eff 100%);
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
    
                .button-invite {
                    border: 3px solid rgba(112, 85, 126, 0.4);
                    border-radius: 15px;
                    width: 38px;
                    height: 38px;
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                    background: rgba(152, 152, 152, 0.01); 
                    flex-direction: column;
                    margin-top: 37px;
                    margin-left: 320px;
                    position: absolute;
                    cursor: pointer;
                    transition: transform 0.3s ease, border-color 0.3s ease; 
                    
                    .sci-invite {
                        margin-top: 2px;
                        margin-left: 1px;
                        position: relative;
                    }
                }
            }
    
            .stick-2 {
                border: 1.5px solid rgba(112, 85, 126, 0.4);
                width: 350px;
                height: 0px;   
                margin-top: 9px;
                margin-left: 11px;   
            }
    
            .info-advertising {
                margin-top: 5px;
                margin-left: 28px;
    
                p {
                    font-family: "Aoboshi One", serif;
                    font-weight: 400;
                    font-size: 17px;
                    color: #000; 
                    width: 319px;
                }
    
                .color {
                    color: #70557E;
                }
            }
        }
    
        .card-info-advertising-jungle {
            border: 3px solid rgba(112, 85, 126, 0.4);
            border-radius: 15px;
            width: 376px;
            height: 234px;
            background: rgba(217, 217, 217, 0);
            margin-top: 41px;  
            margin-left: 29px;
            position: relative;
            overflow-y: auto;
            scrollbar-width: none;
    
            .main-info {
                display: flex;
    
                .advertising-avatar {
                    margin-top: 11px;
                    margin-left: 11px;
                }
    
                .name-advertising {
                    font-family: "Joti One", serif;
                    font-weight: 400;
                    font-size: 20px;
                    color: #000;
                    margin-left: 24px;
                    margin-top: 16px;
                    width: 200px;
    
                    .create {
                        font-family: "Joti One", serif;
                        font-weight: 400;
                        font-size: 16px;
                        color: #3a3a3a;                     
                    }
    
                    .create-dadjungle {
                        background: linear-gradient(93deg, #60a801 0%, #80ff00 100%);
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
    
                .button-invite {
                    border: 3px solid rgba(112, 85, 126, 0.4);
                    border-radius: 15px;
                    width: 38px;
                    height: 38px;
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                    background: rgba(152, 152, 152, 0.01); 
                    flex-direction: column;
                    margin-top: 37px;
                    margin-left: 320px;
                    position: absolute;
                    cursor: pointer;
                    transition: transform 0.3s ease, border-color 0.3s ease; 

                    
                    .sci-invite {
                        margin-top: 2px;
                        margin-left: 1px;
                        position: relative;
                    }
                }
            }
    
            .stick-2 {
                border: 1.5px solid rgba(112, 85, 126, 0.4);
                width: 350px;
                height: 0px;   
                margin-top: 9px;
                margin-left: 11px;   
            }
    
            .info-advertising {
                margin-top: 5px;
                margin-left: 28px;
    
                p {
                    font-family: "Aoboshi One", serif;
                    font-weight: 400;
                    font-size: 17px;
                    color: #000; 
                    width: 319px;
                }
    
                .color {
                    color: #70557E;
                }
            }
        }
    }

    .panel-advertising {
        display: flex; 
        flex-direction: column;
        border-radius: 15px;
        width: 38px;
        height: 76px;
        backdrop-filter: blur(30px);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        background: rgba(152, 152, 152, 0.1);
        
        .panel-advertising-avatar {
            margin-top: 4px;
            margin-left: 4px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
    }    
}

@media (max-width: 1200px) {
    .container {
        transform: scale(0.8);
        height: 90vh; 
    }
}

@media (max-width: 1100px) {
    .container {
        transform: scale(0.7);
        height: 37vh; 
    }
}

@media (max-width: 1000px) {
    .card-main {
        grid-template-columns: 1fr; 
    }

    .card1 {   
        flex-direction: column; 
        gap: 16px;

        .panel-1 {
            display: flex;
            flex-direction: row;

            .panel-social-networks {
                flex-direction: row;
                width: 175px;
                height: 38px;

                .panel-sci {
                    flex-direction: row;
                    align-items: center;
                    margin-left: 16px;
                }
            }

            .panel-other {
                margin-top: 0px;
                margin-left: 16px;
            }
        }

        .card-akainly {
            margin-left: 0px;
        }
    }

    .card2 {
        .card-activity {
            margin-top: 16px;
        }
    }

    .card3 {
        flex-direction: column;
        margin-top: 10px;

        .panel-project {
            width: 76px;
            height: 38px;

            .panel-project-avatar {
                flex-direction: row;
            }
        }
    }

    .card4 {
        flex-direction: column-reverse;
        margin-top: 10px;

        .panel-advertising {
            width: 76px;
            height: 38px;

            .panel-advertising-avatar {
                flex-direction: row;
            }
        }
    }
}

@media (max-width: 400px) {
    .container {
        transform: scale(0.7);
        height: 10vh; 
        justify-content: center;
    }
}

.button-invite:hover {
    border: 3px solid #022273;
    transform: scale(0.9);
}

.card-activity, .card-advertising, .card-project, .card-akainly, .panel-social-networks, .panel-other, .panel-advertising, .panel-project, .card-time, .card-date {
    opacity: 0; 
    animation: fadeInElement 1s ease-in forwards;
    backdrop-filter: blur(30px);
}

.card-akainly, .panel-other, .panel-social-networks {
    animation-delay: 0.3s; 
}

.card-time, .card-date, .card-activity {
    animation-delay: 0.5s; 
}

.card-project, .panel-project {
    animation-delay: 0.5s; 
}

.card-advertising, .panel-advertising {
    animation-delay: 0.7s; 
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeInElement {
    to {
        opacity: 1; 
    }
}