/** STATIC LOGO **/
.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: white;
}

.box--container {
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.box {
    width: 75px;
    height: 75px;
}

.box--1 .box--child {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #FFC75B 0%, #F377AB 50%);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.box--2 .box--child {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #F68F92 0%, #D354C7 50%);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.box--3 .box--child {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #F374AE 0%, #9633DB 50%);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.box--4 .box--child {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #B644D0 0%, #7824E5 30.46%, #69CBF4 72.7%);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
/** END STATIC LOGO **/

.loading #ll-container {
    visibility: visible;
    z-index: 900000;
    pointer-events: auto;
}
/* IF HAS FAILS, we don't want it to affect the block above. Otherwise it should do the exact same thing */
#ll-container:has(+#root .suspense) {
    visibility: visible;
    z-index: 900000;
    pointer-events: auto;
}
#ll-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    visibility: hidden;
    z-index: -900000;
    pointer-events: none;
}
#ll-svg-container {
    display: inline-block;
    position: fixed;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    width: 150px;
    height: 150px;
    overflow: hidden;
    max-width: 150px;
    max-height: 150px;
}