body {
    background-color: white;
    color: black;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

.avalonia-splash {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #00aa0c;
    justify-content: center;
    align-items: center;
    display: flex;
    pointer-events: none;
    flex-direction: column;
}

.avalonia-splash.splash-close {
    transition: opacity 200ms, display 200ms;
    display: none;
    opacity: 0;
}

.avalonia-splash-logo {
    max-width: 30vw; 
    max-height: 30vh; 
    object-fit: contain;
}

.activity-indicator {
    display: inline-block;
    width: 50px;
    height: 50px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
    animation-delay: 1s;
}

.activity-indicator svg {
    width: 100%;
    height: 100%;
    animation: rotate 2s linear infinite;
}

.activity-indicator .path {
    stroke: white;
    stroke-linecap: butt;
    stroke-width: 10%;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: activity-indicator-animation 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes activity-indicator-animation {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -125;
    }
}

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