/* _content/DrVideoLibrary.Razor/Components/ImageProtector.razor.rz.scp.css */
.image-container[b-s6sxhlzcst] {
    position: relative;
    display: inline-block;
    width: 100%;
    height: inherit;
}

.image-content[b-s6sxhlzcst] {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* _content/DrVideoLibrary.Razor/Components/ListCardComponent.razor.rz.scp.css */

.card-wrapper[b-kgsrdrcf6s] {
    background-color: white;
    box-shadow: rgb(0 0 0 / 21%) 0px 0px 8px 1px;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.card-content[b-kgsrdrcf6s] {
    display: flex;
    height: 100%;
    padding: 0;
    flex: 1;
}

.columns.is-mobile[b-kgsrdrcf6s] {
    display: flex;
    flex-wrap: nowrap; 
    height: 100%;
}

.column.is-one-quarter[b-kgsrdrcf6s] {
    padding-left: 2px;
    padding-right: 2px;
    flex: 0 0 120px; 
    max-width: 120px; 
    display: flex;
    align-items: center;
}

.cover-image[b-kgsrdrcf6s] {
    border-radius: 0.25rem;
    object-fit: cover;
    width: 100%;
    height: 100%;
    background-color: #ccc; 
}

figure.image[b-kgsrdrcf6s] {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-column[b-kgsrdrcf6s] {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
}

.content-top[b-kgsrdrcf6s] {
    flex-grow: 1;
}

.content-bottom[b-kgsrdrcf6s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    margin-top: auto; 
}

.title.is-4[b-kgsrdrcf6s] {
    margin-bottom: 0.5rem;
    color: #333;
    font-weight: bold;
    text-align: justify;
}

.subtitle.is-6[b-kgsrdrcf6s] {
    margin-bottom: 0.5rem;
    color: #666;
}

.tags[b-kgsrdrcf6s] {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

    .tags .tag[b-kgsrdrcf6s] {
        background-color: #f5f5f5; 
        color: #333; 
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }

.buttons[b-kgsrdrcf6s] {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.button.is-primary[b-kgsrdrcf6s], .button.is-success[b-kgsrdrcf6s] {
    margin-top: 0.5rem;
    border-radius: 2rem;
}
.button.is-primary[b-kgsrdrcf6s] {
    background-color: #6a0ae4;
    border-color: transparent;
    color: white;
}

    .button.is-primary:hover[b-kgsrdrcf6s] {
        background-color: #6a1b9a; 
    }

/* _content/DrVideoLibrary.Razor/Components/MovieDetailComponent.razor.rz.scp.css */
.header[b-ufibb8umcw] {
    position: relative;
    text-align: center;
    margin-bottom: 2rem;
}

[b-ufibb8umcw] .header-image {
    width: 100%;
    height: 500px;
    border-radius: 0.5rem;
}

.header-title[b-ufibb8umcw] {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.info-section[b-ufibb8umcw] {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2rem;
}

.info-item[b-ufibb8umcw] {
    text-align: center;
}

.tags-section[b-ufibb8umcw] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

    .tags-section .tag[b-ufibb8umcw] {
        background-color: #4caf50 !important; /* Verde */
        color: white;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }

.additional-info[b-ufibb8umcw] {
    margin-bottom: 2rem;
}

    .additional-info p[b-ufibb8umcw] {
        font-weight: normal;
        text-align: justify;
        margin-bottom: 1rem;
    }

    .additional-info strong[b-ufibb8umcw] {
        font-weight: bold;
    }
/* _content/DrVideoLibrary.Razor/Components/NotificationsRequestSubscription.razor.rz.scp.css */
.bell-container[b-o1huoibsrx] {
    position: fixed;
    bottom: 4.5rem;
    left: 2rem;
    z-index: 1000;
    cursor: pointer;
}

.body[b-o1huoibsrx] {
    height: 100%;
    overflow-x: hidden;
    margin: 0 auto;
    background: #f6f7fc;
}


.bell[b-o1huoibsrx], .bell-border[b-o1huoibsrx], .btn-bell[b-o1huoibsrx] {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bell[b-o1huoibsrx] {
    height: 60px;
    width: 60px;
    box-shadow: -1px 2px 10px #999;
    background: #7844E8;
    animation-name: col-b-o1huoibsrx;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.bell-border[b-o1huoibsrx] {
    height: 59px;
    width: 59px;
    border: 1px solid #7844E8 !important;
    animation-name: bord-pop-b-o1huoibsrx;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;
}

.btn-bell[b-o1huoibsrx] {
    color: white;
    font-size: 20px;
    animation-name: bell-ring-b-o1huoibsrx;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes bord-pop-b-o1huoibsrx {

    0% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0.1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0;
    }
}

@keyframes col-b-o1huoibsrx {

    0% {
        transform: scale(1) translate(0,0);
    }

    10% {
        transform: scale(1.1) translate(0,0);
    }

    75% {
        transform: scale(1) translate(0,0);
    }

    100% {
        transform: scale(1) translate(0,0);
    }
}

@keyframes bell-ring-b-o1huoibsrx {

    0% {
        transform: translate(-50%, -50%);
    }

    5%, 15% {
        transform: translate(-50%, -50%) rotate(25deg);
    }

    10%, 20% {
        transform: translate(-50%, -50%) rotate(-25deg);
    }

    25% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
/* _content/DrVideoLibrary.Razor/Components/Paginator.razor.rz.scp.css */
ul[b-qs7jllgbw3], li[b-qs7jllgbw3] {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.pagination-list[b-qs7jllgbw3] {
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 1rem 0;
    }

        ul.pagination-list li button[b-qs7jllgbw3] {
            border: 1px solid #dbdbdb;
            background-color: #fff;
            color: #363636;
            cursor: pointer;
            padding: 0.5rem 0.75rem;
            border-radius: 0.25rem;
            transition: background-color 0.3s, color 0.3s;
        }

            ul.pagination-list li button:hover[b-qs7jllgbw3] {
                background-color: #3273dc;
                color: #fff;
            }

            ul.pagination-list li button.is-current[b-qs7jllgbw3] {
                background-color: #3273dc;
                color: #fff;
                border-color: #3273dc;
                cursor: default;
            }

            ul.pagination-list li button:disabled[b-qs7jllgbw3] {
                background-color: #f5f5f5;
                color: #b5b5b5;
                border-color: #b5b5b5;
                cursor: not-allowed;
            }
/* _content/DrVideoLibrary.Razor/Components/PersonInfoComponent.razor.rz.scp.css */
.modal-card[b-enq9cjdffj] {
    z-index: 50;
    max-height: 70vh;
}

.biography-text[b-enq9cjdffj] {
    line-height: 1.5;
    text-align: justify;
}

    .biography-text .info-and-image[b-enq9cjdffj] {
        float: left;
        overflow: hidden;
        margin-right: 1rem;
    }

        .biography-text .info-and-image .image[b-enq9cjdffj] {
            margin: 0;
        }

        .biography-text .info-and-image .actor-image[b-enq9cjdffj] {
            width: 150px;
            height: auto;
        }

    .biography-text .info[b-enq9cjdffj] {
        margin-bottom: 1rem;
    }

        .biography-text .info .title[b-enq9cjdffj], .biography-text p[b-enq9cjdffj] {
            margin-bottom: 0.25rem;
        }
/* _content/DrVideoLibrary.Razor/Components/ProgressBarComponent.razor.rz.scp.css */

.progress-wrapper[b-kjn85yjh12] {
    margin: 1rem 0;
}

.progress-background[b-kjn85yjh12] {
    background-color: #f5f5f5;
    border-radius: 4px;
    position: relative;
    width: 100%;
    height: 1rem;
}

.progress-foreground[b-kjn85yjh12] {
    background-color: #ff9800;
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
/* _content/DrVideoLibrary.Razor/Components/RateStarComponent.razor.rz.scp.css */
.rating-container .star[b-p05vmlib47] {
    font-size: 24px;
    color: #ffc107;
}

/* _content/DrVideoLibrary.Razor/Components/RelativeMoviesComponent.razor.rz.scp.css */
.relatives-section[b-7m2xpq3ir1] {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-top: 1rem;
    position: relative;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.relative-item[b-7m2xpq3ir1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    text-align: center;
    position: relative;
}

    .relative-item .match-results[b-7m2xpq3ir1] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.5rem;
        box-sizing: border-box;
    }

    .relative-item:hover .match-results[b-7m2xpq3ir1] {
        display: flex;
    }

    .relative-item[b-7m2xpq3ir1]  .relative-image {
        width: 100px;
        height: 150px;
        object-fit: cover;
        border-radius: 0.25rem;
    }

    .relative-item .relative-title[b-7m2xpq3ir1] {
        margin-top: 0.5rem;
        font-size: 0.875rem;
        color: #4a4a4a;
    }
/* _content/DrVideoLibrary.Razor/Components/SearchMovieResultsComponent.razor.rz.scp.css */

/* Contenedor principal para la selección de películas */
.movie-select[b-bg9dwrdifp] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Espacio entre las opciones */
    justify-content: center;
}

/* Cada opción de película */
.movie-option[b-bg9dwrdifp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px; /* Ancho fijo para cada opción */
    padding: 0.5rem;
    border: 1px solid #ddd; /* Borde para cada opción */
    border-radius: 8px; /* Esquinas redondeadas */
    transition: transform 0.3s, box-shadow 0.3s; /* Transiciones para efectos */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
}

    .movie-option:hover[b-bg9dwrdifp] {
        transform: translateY(-5px); /* Levantar un poco la tarjeta al pasar por encima */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra al pasar por encima */
    }

/* Imagen de la portada */
[b-bg9dwrdifp] .movie-cover {
    width: 100%;
    height: 200px;
    border-radius: 4px; /* Esquinas redondeadas para la imagen */
}

/* Información de la película */
.movie-info[b-bg9dwrdifp] {
    text-align: center;
    margin-top: 0.5rem;
}

.movie-title[b-bg9dwrdifp] {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.movie-year[b-bg9dwrdifp] {
    color: #777; /* Color más claro para el año */
    font-size: 0.9rem;
}
/* _content/DrVideoLibrary.Razor/Components/SelectLangComponent.razor.rz.scp.css */
.modal[b-hfhygqmdrd]{
    z-index: 9999;
}
.select-container[b-hfhygqmdrd] {
    position: relative;
    display: inline-block;
}

.custom-select[b-hfhygqmdrd] {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar la imagen vertical y horizontalmente */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    cursor: pointer;
    width: 30px; /* Ancho suficiente para la bandera */
    height: 30px; /* Alto suficiente para la bandera */
}

    .custom-select img[b-hfhygqmdrd] {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Ajustar la imagen a la caja sin distorsionar */
        border-radius: 4px;
    }

.modal-content[b-hfhygqmdrd]{
    display: flex;
    justify-content: center
}

.custom-options[b-hfhygqmdrd] {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    width: 50%;
}

    .custom-options div[b-hfhygqmdrd] {
        display: flex;
        padding: 10px;
        cursor: pointer;
        justify-content: space-between;
        
    }

        .custom-options div:hover[b-hfhygqmdrd] {
            background: #f0f0f0;
        }

    .custom-options img[b-hfhygqmdrd] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
/* _content/DrVideoLibrary.Razor/Components/WatchedCardComponent.razor.rz.scp.css */
.card-wrapper[b-vj1w2oms6c] {
    border-bottom: 3px solid whitesmoke;
    margin: 1rem;
    padding: 1rem 1rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
}

    .card-wrapper[b-vj1w2oms6c]  .image-container {
        height: 250px;
    }
/* _content/DrVideoLibrary.Razor/Pages/AddMovie.razor.rz.scp.css */
/* Custom CSS */
.field[b-gkrp1t7xpb] {
    margin-bottom: 1rem;
}

.box[b-gkrp1t7xpb] {
    padding: 1rem;
    border-radius: 8px;
    background-color: #f8f8f8;
}

.control[b-gkrp1t7xpb] {
    margin-bottom: 0.5rem;
}

.tag.is-light[b-gkrp1t7xpb] {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.button.is-primary[b-gkrp1t7xpb] {
    background-color: #6a0ae4;
    border-color: transparent;
    color: white;
}

    .button.is-primary:hover[b-gkrp1t7xpb] {
        background-color: #6a1b9a;
    }

.image img[b-gkrp1t7xpb] {
    max-width: 100px;
    border-radius: 8px;
}
/* _content/DrVideoLibrary.Razor/Pages/Index.razor.rz.scp.css */
.wrapper[b-59uffi53fh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

@media (max-width: 767px) {
    .wrapper[b-59uffi53fh] {
        grid-template-columns: 1fr;
    }
}

.title-wrapper .columns[b-59uffi53fh] {
    margin: 1rem;
    display: flex;
    justify-content: space-between;
}

.search[b-59uffi53fh]{
    padding: 1rem;
}

/* _content/DrVideoLibrary.Razor/Pages/Relations.razor.rz.scp.css */
.container[b-dsq35n9g92] {
    padding: 1rem;
}

.relatives-section[b-dsq35n9g92] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    position: relative;
}

    .relatives-section .relative-item[b-dsq35n9g92] {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 120px; /* Ancho fijo */
        height: 250px; /* Alto total fijo para el contenedor del ítem */
        text-align: center;
        position: relative;
        border: 1px solid #ccc; /* Borde del contenedor */
        border-radius: 0.25rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra alrededor del contenedor */
        background-color: #f5fdf5; /* Color de fondo verde clarito */
        overflow: hidden; /* Asegura que no haya desbordamiento */
    }

    .relatives-section[b-dsq35n9g92]  .image-container {
        height: 175px;
    }

    .relatives-section .relative-item[b-dsq35n9g92]  .image-content {
        background-position: top;
    }

    .relatives-section .relative-title[b-dsq35n9g92] {
        font-size: 0.875rem;
        color: #4a4a4a;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* Limitar a 3 líneas */
        overflow: hidden;
        text-overflow: ellipsis; /* Mostrar "..." si es necesario */
        max-width: 100%;
        height: 3rem; /* Espacio fijo para el texto, ajustado para 3 líneas */
        background-color: #f5fdf5; /* Color de fondo verde clarito para el texto */
        padding: 0.25rem; /* Añadir padding al texto */
        margin-top: 0.5rem; /* Espacio entre la imagen y el texto */
        flex-grow: 1; /* Ocupa todo el espacio disponible, alineando el texto correctamente */
    }

.field.is-grouped[b-dsq35n9g92] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/*
::deep ul.pagination-list {
    margin: unset;
}

    ::deep ul.pagination-list li button {
        font-size: small;
    }*/
.top-menu[b-dsq35n9g92], .bottom-menu[b-dsq35n9g92] {
    width: 100%;
    background: white;
    padding-bottom: 0.2rem;
}
.top-menu[b-dsq35n9g92] {
    position: sticky;
    top: 0;
    z-index: 1;
}
.bottom-menu[b-dsq35n9g92] {
    position: fixed;
    bottom: 0;
    z-index: 10;
}
/* _content/DrVideoLibrary.Razor/Pages/Watching.razor.rz.scp.css */
.container[b-9giktqx6an] {
    padding: 1rem;
}
/* _content/DrVideoLibrary.Razor/Pages/Watchlist.razor.rz.scp.css */
.wrapper[b-pf3jr8k9hv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.list-wrapper[b-pf3jr8k9hv] {
    background-color: ghostwhite;
    box-shadow: rgb(0 0 0 / 21%) 0px 0px 8px 1px;
    border-radius: 2rem;
    margin: 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
}

    .list-wrapper .subtitle[b-pf3jr8k9hv] {
        display: flex;
        margin: 2rem;
        justify-content: space-between;
    }

    .list-wrapper .list-card-wrapper[b-pf3jr8k9hv] {
        background-color: #decdf3;
        border-radius: 2rem;
        margin: 0;
        padding: 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
    }

    .list-wrapper .title-wrapper .columns[b-pf3jr8k9hv] {
        margin: 1rem;
        display: flex;
        justify-content: space-between;
    }
    .list-wrapper .title-wrapper .subtitle[b-pf3jr8k9hv] {
        margin: 0;
    }

    .list-wrapper .search[b-pf3jr8k9hv] {
        padding: 1rem;
    }
/* _content/DrVideoLibrary.Razor/Shared/FooterMenu.razor.rz.scp.css */
ul[b-eocn7inz6e], li[b-eocn7inz6e] {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul[b-eocn7inz6e] {
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    background-color: #f8f8f8; 
    border-top: 1px solid #ddd; 
}

    ul li[b-eocn7inz6e] {
        flex: 1;
        text-align: center;
    }

.custom-menu[b-eocn7inz6e] {
    display: flex;
    justify-content: center; 
    width: 100%;
    padding: 0;
    margin: 0;
}

.custom-nav-link[b-eocn7inz6e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    color: #4a4a4a; 
    text-decoration: none;
    transition: background-color 0.3s ease;
}

    .custom-nav-link:hover[b-eocn7inz6e] {
        background-color: #f5f5f5;
    }

    .custom-nav-link.is-active[b-eocn7inz6e] {
        background-color: #3273dc; 
        color: white;
    }

    .custom-nav-link .icon[b-eocn7inz6e] {
        margin-bottom: 0.25rem;
        font-size: 1.25rem; 
    }

    .custom-nav-link span[b-eocn7inz6e] {
        display: block; 
    }


.menu-list[b-eocn7inz6e]  a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

ul li[b-eocn7inz6e]  a {
    color: #4a90e2;
}

    ul li[b-eocn7inz6e]  a.is-active {
        background-color: #e0f7fa; 
        color: #00796b; 
    }
/* _content/DrVideoLibrary.Razor/Shared/MainLayout.razor.rz.scp.css */
.layout-container[b-ebho2q3jej] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    z-index: 0;
}

main[b-ebho2q3jej] {
    position: relative;
    flex: 1;
    margin-bottom: 7rem;
    z-index: 1;
}

footer[b-ebho2q3jej] {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

/* _content/DrVideoLibrary.Razor/Shared/NavMenu.razor.rz.scp.css */
.navbar-item[b-9k5u2vgyz9]  .image-container {
    height: 4rem;
    width: 4rem;
}

.navbar-item[b-9k5u2vgyz9]  .image-container.user-avatar {
    width: 2rem;
    height: 2rem;
}

    .navbar-item[b-9k5u2vgyz9]  .image-container.user-avatar .image-content {
        border-radius: 50%;
    }


.navbar-burger[b-9k5u2vgyz9] {
    margin-left: auto;
}

.navbar-end[b-9k5u2vgyz9] {
    display: flex;
    align-items: center;
}
/* _content/DrVideoLibrary.Razor/Shared/WaitingLoader.razor.rz.scp.css */
.loader-wrapper[b-2s87kzpmkv] {
    --fg: #17181c;
    --shade1: #727274;
    --shade2: #cccdd1;
    --shade3: #f3f4f8;
    --shade4: #ffffff;
    --dur1: 1s;
    --dur2: 6s;
    font-size: calc(16px + (32 - 16)*(100vw - 320px)/(2560 - 320));
    color: var(--fg);
    display: flex;
    font: 1em/1.5 Hind, sans-serif;
    flex-direction: column;
    height: 100vh;
}

main[b-2s87kzpmkv] {
    margin: auto;
}

.preloader[b-2s87kzpmkv] {
    animation: largePopOut-b-2s87kzpmkv var(--dur1) linear;
    border-radius: 50%;
    box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 1em 1em 2em var(--shade1), -1em -1em 2em var(--shade4);
    margin-bottom: 3em;
    position: relative;
    width: 12em;
    height: 12em;
}

.preloader__square[b-2s87kzpmkv] {
    animation: smallPopOut1-b-2s87kzpmkv var(--dur1) linear, popInOut-b-2s87kzpmkv var(--dur2) var(--dur1) linear infinite;
    border-radius: 0.5em;
    box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
    position: absolute;
    top: 2.5em;
    left: 2.5em;
    width: 3em;
    height: 3em;
}

    .preloader__square:nth-child(n + 2):nth-child(-n + 3)[b-2s87kzpmkv] {
        left: 6.5em;
    }

    .preloader__square:nth-child(n + 3)[b-2s87kzpmkv] {
        top: 6.5em;
    }

    .preloader__square:nth-child(2)[b-2s87kzpmkv] {
        animation: smallPopOut2-b-2s87kzpmkv var(--dur1) linear, move2-b-2s87kzpmkv var(--dur2) var(--dur1) linear infinite;
    }

    .preloader__square:nth-child(3)[b-2s87kzpmkv] {
        animation: smallPopOut3-b-2s87kzpmkv var(--dur1) linear, move3-b-2s87kzpmkv var(--dur2) var(--dur1) linear infinite;
    }

    .preloader__square:nth-child(4)[b-2s87kzpmkv] {
        animation: smallPopOut4-b-2s87kzpmkv var(--dur1) linear, move4-b-2s87kzpmkv var(--dur2) var(--dur1) linear infinite;
    }


/* Animations */
@keyframes largePopOut-b-2s87kzpmkv {
    from, 20% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
    }

    40% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 2em 2em 2em var(--shade1), -2em -2em 4em var(--shade4);
    }

    60%, to {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 1em 1em 2em var(--shade1), -1em -1em 2em var(--shade4);
    }
}

@keyframes smallPopOut1-b-2s87kzpmkv {
    from, 40% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
    }

    60% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
    }

    80%, to {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
    }
}

@keyframes smallPopOut2-b-2s87kzpmkv {
    from, 45% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
    }

    65% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
    }

    85%, to {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
    }
}

@keyframes smallPopOut3-b-2s87kzpmkv {
    from, 50% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
    }

    70% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
    }

    90%, to {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
    }
}

@keyframes smallPopOut4-b-2s87kzpmkv {
    from, 55% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
    }

    75% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
    }

    95%, to {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
    }
}

@keyframes popInOut-b-2s87kzpmkv {
    from {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
        transform: translate(0,0);
    }

    4% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
        transform: translate(0,0);
    }

    8% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
        transform: translate(0,0);
    }

    12%, 16% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
        transform: translate(4em,0);
    }

    20% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
        transform: translate(4em,0);
    }

    24%, 25% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
        transform: translate(4em,0);
    }

    29% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
        transform: translate(4em,0);
    }

    33% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
        transform: translate(4em,0);
    }

    37%, 41% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
        transform: translate(4em,4em);
    }

    45% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
        transform: translate(4em,4em);
    }

    49%, 50% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
        transform: translate(4em,4em);
    }

    54% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
        transform: translate(4em,4em);
    }

    58% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
        transform: translate(4em,4em);
    }

    62%, 66% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
        transform: translate(0,4em);
    }

    70% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
        transform: translate(0,4em);
    }

    74%, 75% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
        transform: translate(0,4em);
    }

    79% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
        transform: translate(0,4em);
    }

    83% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
        transform: translate(0,4em);
    }

    87%, 91% {
        box-shadow: 0 0 0 var(--shade4) inset, 0 0 0 var(--shade1) inset, 0 0 0 var(--shade1), 0 0 0 var(--shade4);
        transform: translate(0,0);
    }

    95% {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.5em 0.5em 0.5em var(--shade1), -0.5em -0.5em 1em var(--shade4);
        transform: translate(0,0);
    }

    99%, to {
        box-shadow: 0.15em 0.15em 0.15em var(--shade4) inset, -0.15em -0.15em 0.15em var(--shade1) inset, 0.25em 0.25em 0.5em var(--shade1), -0.25em -0.25em 0.5em var(--shade4);
        transform: translate(0,0);
    }
}

@keyframes move2-b-2s87kzpmkv {
    from, 8% {
        transform: translate(0,0);
        width: 3em;
        height: 3em;
    }

    12% {
        transform: translate(-4em,0);
        width: 7em;
        height: 3em;
    }

    16%, 83% {
        transform: translate(-4em,0);
        width: 3em;
        height: 3em;
    }

    87% {
        transform: translate(-4em,0);
        width: 3em;
        height: 7em;
    }

    91%, to {
        transform: translate(-4em,4em);
        width: 3em;
        height: 3em;
    }
}

@keyframes move3-b-2s87kzpmkv {
    from, 33% {
        transform: translate(0,0);
        height: 3em;
    }

    37% {
        transform: translate(0,-4em);
        height: 7em;
    }

    41%, to {
        transform: translate(0,-4em);
        height: 3em;
    }
}

@keyframes move4-b-2s87kzpmkv {
    from, 58% {
        transform: translate(0,0);
        width: 3em;
    }

    62% {
        transform: translate(0,0);
        width: 7em;
    }

    66%, to {
        transform: translate(4em,0);
        width: 3em;
    }
}

@keyframes fadeIn-b-2s87kzpmkv {
    from, 67% {
        opacity: 0;
    }

    83.3%, to {
        opacity: 1;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root[b-2s87kzpmkv] {
        --fg: #e3e4e8;
        --shade1: #23252a;
        --shade2: #3e424c;
        --shade3: #4a4e5a;
        --shade4: #686e7e;
    }
}