@keyframes loading {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}






.qr-code {
    align-items: flex-start;
    display: none;
    height: 100dvh;
    justify-content: center;
    overflow: auto;
    padding: 5px;
    scrollbar-width: none;
    width: 100%;
}


.qr-code .contain {
    align-items: center;
    display: flex;
    background-color: #2b2b2b;
    border-bottom:  #242424 solid 3px;
    border-left:  #333333 solid 3px;
    border-right:  #242424 solid 3px;
    border-top:  #333333 solid 3px;
    flex-direction: column;
    height: calc(100dvh - 10px);
    justify-content: flex-start;
    margin: auto;
    max-height: 742px;
    max-width: 499px;
    min-height: 490px;
    min-width: 294.5px;
    outline: #1a1919 solid 3px;
    padding: 20px;
    width: 100%;
}


.qr-code .contain .qr-preview {
    align-items: center;
    background-color: #2B2B2B;
    outline: #2B2B2B solid 5px;
    display: flex;
    height: calc(100% - 35%);
    justify-content: center;
    margin-bottom: auto;
    overflow: auto;
    position: relative;
    padding: 5px;
    width: 100%;
}

.qr-code .contain .qr-preview .loading-qr {
    align-items: center;
    display: flex;
    justify-content: center;
}

.qr-code .contain .qr-preview .loading-qr img {
    height: 50px;
    position: absolute;
    width: 50px;
}
.qr-code .contain .qr-preview .loading-qr img:first-child {
    animation: loading 2s infinite;
}

.qr-code .contain .qr-preview svg {
    position: absolute;
    z-index: 1;
}


.qr-code .contain .color {
    margin-bottom: 30px;
    width: 100%;
}

.qr-code .contain .options {
    align-items: stretch;
    background-color: #1a1a1a;
    border-top: #0d0d0d solid 5px;
    border-bottom: #262626 solid 5px;
    display: flex;
    height: 100px;
    justify-content: space-evenly;
    margin-top: 10px;
    width: 100%;
}

.qr-code .contain .options .option {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
    width: 50px;
}
.qr-code .contain .options .option.hide {
    display: none;
}

.qr-code .contain .options .option input[type="radio"] {
    display: none;
}
.qr-code .contain .options .option input[type="radio"]:checked + label::after {
    cursor: pointer;
}

/* colors */
/* green */
.qr-code .contain .options .option input#unselCol1[type="radio"]:checked + label::after {
    background-color: #02e5ad;
    border: #005641 solid 6px;
}
/* gray */
.qr-code .contain .options .option input#unselCol2[type="radio"]:checked + label::after {
    background-color: #ccc;
    border: #3E3E3E solid 6px;
}
/* brown */
.qr-code .contain .options .option input#unselCol3[type="radio"]:checked + label::after {
    background-color: #cdb8a3;
    border: #41372e solid 6px;
}
/* blue */
.qr-code .contain .options .option input#unselCol4[type="radio"]:checked + label::after {
    background-color: #9da2ff;
    border: #191993 solid 6px;
}
/* red */
.qr-code .contain .options .option input#unselCol5[type="radio"]:checked + label::after {
    background-color: #f0c1c1;
    border: #931919 solid 6px;
}

.qr-code .contain .options .option label {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
}
.qr-code .contain .options .option label::before {
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin-bottom: 15px;
    margin-top: 5px;
    outline: #1d1d1f solid 2px;
    transform: rotate(45deg);
    width: 20px;
}

/* colors */
/* green */
.qr-code .contain .options .option label.op-one::before {
    background-color: #005641;
    border: #019973 solid 1px;
}
/* gray */
.qr-code .contain .options .option label.op-two::before {
    background-color: #3E3E3E;
    border: #8e8e8e solid 1px;
}
/* brown */
.qr-code .contain .options .option label.op-three::before {
    background-color: #41372e;
    border: #776b5f solid 1px;
}
/* blue */
.qr-code .contain .options .option label.op-four::before {
    background-color: #191993;
    border: #7170ac solid 1px;
}
/* red */
.qr-code .contain .options .option label.op-five::before {
    background-color: #931919;
    border: #bc8c8c solid 1px;
}

.qr-code .contain .options .option label::after {
    display: inline-block;
    content: "";
    cursor: pointer;
    height: 10px;
    margin-top: -50.2px;
    transform: rotate(45deg);
    width: 10px;
}


.qr-code .contain .action {
    align-items: flex-end;
    display: flex;
    height: 60px;
    justify-content: center;
    width: 100%;
}

.qr-code .contain .action .close {
    margin-right: 10px;
}
.qr-code .contain .action a {
    margin: calc(var(--button-margin) / 2);
    width: 100%;
}
.qr-code .contain .action a:last-child { /* this is temporary until I fix the "prevent download bc of CORS" thing */
    /* margin-left: 10px; */
}

.qr-code .contain .action a .button {
    margin: calc(var(--button-margin) / 2);
}
.qr-code .contain .action a .button:last-child {
    margin-left: 0;
}

.qr-code .contain .action .button span.btn-con {
    align-items: center;
    display: flex;
    justify-content: center;
}

.qr-code .contain .action .button span.btn-con img {
    height: 20px;
    width: 20px;
}

.qr-code .contain .action a#qrCodeSVG { /* this is temporary until I fix the "prevent download bc of CORS" thing */
    display: none;
}






.embed-code {
    align-items: center;
    display: none;
    height: 100dvh;
    justify-content: center;
    overflow: auto;
    padding: 5px;
    scrollbar-width: none;
    width: 100%;
}


.embed-code .contain {
    align-items: center;
    display: flex;
    background-color: #2b2b2b;
    border-bottom:  #242424 solid 3px;
    border-left:  #333333 solid 3px;
    border-right:  #242424 solid 3px;
    border-top:  #333333 solid 3px;
    flex-direction: column;
    height: calc(100dvh - 10px);
    justify-content: flex-start;
    max-height: 1186px;
    max-width: 1175px;
    min-height: 490px;
    min-width: 294.5px;
    outline: #1a1919 solid 3px;
    padding: 20px;
    width: 100%;
}


.embed-code .contain .embed-preview {
    align-items: center;
    background-color: #1a1a1a;
    outline: #262626 solid 5px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    overflow: auto;
    padding: 5px;
    width: 100%;
}


.embed-code .contain .embed-preview iframe {
    margin: auto;
    transition: all .6s cubic-bezier(0.39, 0.26, 0, 0.91);
}


.embed-code .contain hr {
    background: #464646;
    margin: 15px 0px;
    width: 80%;
}


.embed-code .contain .size {
    margin-bottom: 30px;
    width: 100%;
}

.embed-code .contain .options {
    align-items: stretch;
    background-color: #1a1a1a;
    border-top: #0d0d0d solid 5px;
    border-bottom: #262626 solid 5px;
    display: flex;
    height: 100px;
    justify-content: space-evenly;
    margin-top: 10px;
    width: 100%;
}

.embed-code .contain .options .option {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
    width: 50px;
}

.embed-code .contain .options .option input[type="radio"] {
    display: none;
}
.embed-code .contain .options .option input[type="radio"]:checked + label::after {
    background-color: #ffffff;
    border: #3c8529 solid 6px;
    cursor: pointer;
}

.embed-code .contain .options .option label {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
}
.embed-code .contain .options .option label::before {
    background-color: #8c8d90;
    border: #949496 solid 1px;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin-bottom: 15px;
    margin-top: 5px;
    outline: #1d1d1f solid 2px;
    transform: rotate(45deg);
    width: 20px;
}
.embed-code .contain .options .option label::after {
    display: inline-block;
    content: "";
    cursor: pointer;
    height: 10px;
    margin-top: -50.2px;
    transform: rotate(45deg);
    width: 10px;
}


.embed-code .contain .action {
    align-items: flex-end;
    display: flex;
    height: 60px;
    justify-content: center;
    width: 100%;
}

.embed-code .contain .action .button:first-child {
    margin-right: 10px;
}
.embed-code .contain .action .button:last-child {
    margin-left: 10px;
}

.embed-code .contain .action .button span.btn-con {
    align-items: center;
    display: flex;
    justify-content: center;
}

.embed-code .contain .action .button span.btn-con img {
    height: 20px;
    width: 20px;
}






.tutorialPopUpImport {
    align-items: flex-start;
    display: none;
    display: flex;
    height: 100dvh;
    justify-content: center;
    overflow: auto;
    padding: 5px;
    scrollbar-width: none;
    width: 100%;
}


.tutorialPopUpImport .contain {
    align-items: center;
    background-color: #313233;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: auto;
    max-height: 99dvh;
    max-width: 600px;
    min-height: 490px;
    min-width: 298px;
    outline: #1e1e1f solid 3px;
}


.tutorialPopUpImport .contain .containHeader {
    align-items: center;
    background-color: #48494a;
    border-bottom: #5a5b5c solid 3px;
    border-left: #6d6d6e solid 3px;
    border-right: #5a5b5c solid 3px;
    border-top: #6d6d6e solid 3px;
    display: flex;
    min-height: 80px;
    justify-content: flex-end;
    width: 100%;
}

.tutorialPopUpImport .contain .containHeader h2 {
    text-align: center;
    width: 100%;
}

.tutorialPopUpImport .contain .containHeader .close {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 70px;
    justify-content: center;
    margin-right: 2.5px;
    min-width: 70px;
}
.tutorialPopUpImport .contain .containHeader .close:hover {
    background-color: #58585a;
}
.tutorialPopUpImport .contain .containHeader .close:active {
    background-color: #313233;
}

.tutorialPopUpImport .contain .containHeader .close img {
    height: 30px;
    width: 30px;
}


.tutorialPopUpImport .contain .content {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: auto;
    padding: 20px 10px;
    scrollbar-color: #48494a #313233;
    width: 100%;
}

.tutorialPopUpImport .contain .content .videoThumb {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    width: 98%;
}

.tutorialPopUpImport .contain .content .videoThumb a {
    align-items: center;
    display: flex;
    justify-content: center;
    outline: #000 solid 4px;
    position: relative;
    width: 100%;
}

.tutorialPopUpImport .contain .content .videoThumb a .depth-btn {
    align-items: center;
    background-color: #00000072;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    transition: 0.5s ease;
    width: 100%;
    z-index: 1;
}
.tutorialPopUpImport .contain .content .videoThumb a .depth-btn:hover {
    background-color: #00000087;
}

.tutorialPopUpImport .contain .content .videoThumb a .depth-btn .fore-btn {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    min-height: 66px;
    position: absolute;
}

.tutorialPopUpImport .contain .content .videoThumb a .depth-btn .fore-btn .button-outline .btn-sz-square span.btn-con {
    align-items: center;
    display: flex;
    justify-content: center;
}

.tutorialPopUpImport .contain .content .videoThumb a .depth-btn .fore-btn .button-outline .btn-sz-square span.btn-con img {
    height: 30px;
    width: 30px;
}

.tutorialPopUpImport .contain .content .videoThumb a img.thumb {
    width: 100%;
}

.tutorialPopUpImport .contain .content h3 {
    margin-bottom: 30px;
}


.tutorialPopUpImport .contain .actions {
    align-items: flex-end;
    background-color: #48494a;
    border-bottom: #333334 solid 3px;
    border-top: #5a5b5c solid 3px;
    display: flex;
    min-height: 100px;
    justify-content: center;
    margin-top: auto;
    width: 100%;
}

.tutorialPopUpImport .contain .actions .button-outline {
    margin-bottom: 15px;
    width: 90%;
}

.tutorialPopUpImport .contain .actions .button-outline .btn-sz-full {
    width: calc(100% - 6px);
}

.tutorialPopUpImport .contain .actions .button-outline .btn-sz-full span.btn-con {
    align-items: center;
    display: flex;
    justify-content: center;
}






body { /* temporary so a user won't scroll when it's loading */
    overflow: hidden;
}



.loading {
    align-items: center;
    display: flex;
    height: 200px;
    justify-content: center;
    position: fixed;
    width: 100%;
}


.loading img {
    height: 50px;
    margin-top: 100px;
    position: absolute;
    width: 50px;
}
.loading img:first-child {
    animation: loading 2s infinite;
}



.pack-isolate {
    align-items: center;
    /* display: flex; */
    display: none;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    min-width: 288px;
    opacity: 0;
    transform: translate(0px, 50px);
    transition: transform .2s cubic-bezier(0.16, 0.96, 1, 1.03), opacity .1s;
    width: 90%;
}



.pack-isolate .container {
    align-items: center;
    display: flex;
    background-color: #0d0d0d;
    border-bottom: 3px solid #262626;
    border-top: 3px solid #000;
    flex-direction: column;
    margin-bottom: 50px;
    padding: 20px;
    width: 288px;
}



/* 1st */
.pack-isolate .essential-info {
    justify-content: flex-start;
}


.pack-isolate .essential-info .pt-pn-pa-pi {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20px;
    width: 100%;
}


.pack-isolate .essential-info .pt-pn-pa-pi .pt {
    align-items: center;
    background-color: #0a0a0a;
    display: flex;
    height: 139.5px;
    justify-content: center;
    outline: #000 solid 4px;
    position: relative;
    width: 100%;
}
.pack-isolate .essential-info .pt-pn-pa-pi .pt::after {
    content: "";
    display: block;
    padding-bottom: 37.04%;
}

.pack-isolate .essential-info .pt-pn-pa-pi .pt img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
}


.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi h2 {
    text-align: center;
}

.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi a {
    margin-top: 7px;
}

.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi a h4 {
    margin: 3px;
    text-align: center;
}

.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi .pi {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 35px;
    margin-top: 20px;
    width: 100%;
}
.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi .pi .pack-type-info {
    align-items: center;
    background-color: #000000;
    display: flex;
    height: 35px;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}
.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi .pi .pack-type-info img {
    height: 20px;
    margin-right: 5px;
    width: 20px;
}

.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi .pia {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 65px;
    margin-top: 20px;
    width: 100%;
}
.pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi .pia .pack-download-count {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 15px;
}


.pack-isolate .essential-info .dl {
    align-items: flex-end;
    display: flex;
    height: 66px;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: auto;
    max-width: 500px;
    width: 100%;
}

.pack-isolate .essential-info .dl .dl-station {
    width: 100%;
}

.pack-isolate .essential-info .dl .dl-station .button, .pack-isolate .essential-info .dl .dl-station .button-disabled-pressed {
    width: calc(100% - 6px);
}

.pack-isolate .essential-info .dl .dl-station .button span.btn-con, .pack-isolate .essential-info .dl .dl-station .button-disabled-pressed span.btn-con {
    align-items: center;
    display: flex;
    justify-content: center;
}
.pack-isolate .essential-info .dl .dl-station .button span.btn-con h3, .pack-isolate .essential-info .dl .dl-station .button-disabled-pressed span.btn-con h3 {
    text-align: center;
}


.pack-isolate .essential-info .share {
    align-items: flex-end;
    display: flex;
    height: 66px;
    justify-content: flex-end;
    width: 100%;
}

.pack-isolate .essential-info .share .button-outline {
    margin-left: 2px;
}
.pack-isolate .essential-info .share .button-outline:first-child {
    margin-left: 0;
}

.pack-isolate .essential-info .share .button-outline .button span.btn-con {
    align-items: center;
    display: flex;
    justify-content: center;
}

.pack-isolate .essential-info .share .button-outline .button span.btn-con img {
    height: 30px;
    width: 30px;
}



/* 2nd */
.pack-isolate .preview-info {
    
}


.pack-isolate .preview-info h3 {
    text-align: left;
    width: 100%;
}



/* 3rd */
.pack-isolate .more-info {
    align-items: flex-start;
}


.pack-isolate .more-info h3.head {
    margin-bottom: 20px;
    text-align: left;
}


.pack-isolate .more-info .desc {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}


.pack-isolate .more-info .desc .expand {
    align-items: center;
    display: none;
    cursor: pointer;
    justify-content: center;
    margin-left: auto;
    margin-top: 10px;
    padding: 10px 20px;
}
.pack-isolate .more-info .desc .expand:hover {
    background-color: #8e8e8e2b;
}
.pack-isolate .more-info .desc .expand:active {
    background-color: #8e8e8e;
}

.pack-isolate .more-info .desc .expand h5 {
    text-align: center;
}
.pack-isolate .more-info .desc .expand:hover h5 {
    color: #fff;
}
.pack-isolate .more-info .desc .expand:active h5 {
    color: #000;
}

.pack-isolate .more-info .desc .expand h5.expnd-desc-less {
    display: none;
}


.pack-isolate .more-info .pre-info {
    align-items: flex-start;
    display: flex;
    /* display: none; */
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 30px;
    width: 100%;
}


.pack-isolate .more-info .pre-info .pi {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 30px;
}
.pack-isolate .more-info .pre-info .pi:first-child {
    margin-top: 0;
}
.pack-isolate .more-info .pre-info .pi.players {
    display: none;
}

.pack-isolate .more-info .pre-info .pi h3 {
    margin-bottom: 10px;
    text-align: left;
}

.pack-isolate .more-info .pre-info .pi .result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.pack-isolate .more-info .pre-info .pi .result h5 {
    margin-bottom: 5px;
    margin-right: 20px;
}
.pack-isolate .more-info .pre-info .pi.players .result h5 {
    display: none;
}



/* 4th */
.pack-isolate .update-info {
    align-items: flex-start;
}


.pack-isolate .update-info .logs {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 20px;
    width: 100%;
}


.pack-isolate .update-info .logs .expand {
    align-items: center;
    display: none;
    cursor: pointer;
    justify-content: center;
    margin-left: auto;
    margin-top: 10px;
    padding: 10px 20px;
}
.pack-isolate .update-info .logs .expand:hover {
    background-color: #8e8e8e2b;
}
.pack-isolate .update-info .logs .expand:active {
    background-color: #8e8e8e;
}

.pack-isolate .update-info .logs .expand h5 {
    text-align: center;
}
.pack-isolate .update-info .logs .expand:hover h5 {
    color: #fff;
}
.pack-isolate .update-info .logs .expand:active h5 {
    color: #000;
}

.pack-isolate .update-info .logs .expand h5.expnd-logs-less {
    display: none;
}



/* 5th */
.pack-isolate .internal-info {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}


.pack-isolate .internal-info .pi {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 30px;
    margin-right: 5px;
    width: 250px;
}
.pack-isolate .internal-info .pi:last-child {
    margin-bottom: 0;
}

.pack-isolate .internal-info .pi h3 {
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
}

.pack-isolate .internal-info .pi .result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.pack-isolate .internal-info .pi .result .i {
    margin-bottom: 5px;
    margin-right: 20px;
}

.pack-isolate .internal-info .pi .result .i#pack-type-includes-chain {
    display: none;
} 



.pack-isolate .pack-category {
    align-items: center;
    display: flex;
    height: 350px;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 100px;
    width: 100%;
}


.pack-isolate .pack-category .category {
    background-color: #0d0d0d;
    border-bottom: #262626 solid 3px;
    border-top: #000 solid 3px;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1550px;
    width: 100%;
}


.pack-isolate .pack-category .category h2 {
    margin-bottom: auto;
    margin-left: 15px;
    margin-top: 10px;
}



.pack-isolate .pack-category .packs-list {
    align-items: center;
    display: flex;
    height: 272px;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 15px;
    overflow-x: auto;
    padding-left: 15px;
    padding-right: 15px;
    scroll-snap-type: x;
    width: 100%;
}
/* no scrollbar */
.pack-isolate .pack-category .packs-list::-webkit-scrollbar { /* Chrome Edge Opera */
    display: none;
}
.pack-isolate .pack-category .packs-list { /* Firefox Tor Librewolf */
    scrollbar-width: none;
}
/**/


.pack-isolate .pack-category .packs-list a .pack { /* `.pack-list` and `.author-more` are using this */
    scroll-snap-align: center;
}


.pack-isolate .pack-category .packs-list a.author-more .pack {
    aspect-ratio: 1/1;
    background-color: #252422;
    height: 270px;
    transition: transform .1s ease-in-out;
}
.pack-isolate .pack-category .packs-list a.author-more .pack:focus-visible {
    outline: var(--pack-focus-outline);
}
.pack-isolate .pack-category .packs-list a.author-more .pack:hover, .pack-isolate .pack-category .packs-list a.author-more .pack:hover:focus-visible {
    background-color: var(--pack-hover);
}
.pack-isolate .pack-category .packs-list a.author-more .pack:active,.pack-isolate .pack-category .packs-list a.author-more .pack:active:focus-visible {
    background-color: var(--pack-hover);
    outline: var(--pack-active-outline);
    transform: scale(.95);
}

.pack-isolate .pack-category .packs-list a.author-more .pack .action {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

.pack-isolate .pack-category .packs-list a.author-more .pack .action img {
    height: 50px;
    width: 50px;
}



/* universal */
.preview {
    align-items: stretch;
    background-color: #0a0a0a;
    outline: #262626 solid 2px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 20px;
    min-height: 139.5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-marker-group: after;
    scroll-snap-type: x mandatory;
    width: 100%;
}
/* no scrollbar */
.preview {
    scrollbar-width: none;
}
/**/
.preview::scroll-marker-group {
    align-items: center;
    display: flex;
    margin: 20px auto 0 auto;
    min-height: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 5px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    width: 92px;
}

.preview.fewprev::scroll-marker-group { /* only for less than maximum */
    justify-content: center;
    overflow: visible;
    width: 0px;
}


.preview .wrap {
    align-items: center;
    display: flex;
    height: 100%;
    flex: 0 0 100%;
    justify-content: center;
    margin: auto;
    max-height: 300px;
    position: relative;
    scroll-snap-align: center;
    width: 100%;
}
.preview .wrap::scroll-marker {
    border: 1px solid #fff;
    content: "";
    display: block;
    height: 5px;
    margin: 0 2px;
    min-width: 5px;
    scroll-snap-align: center;
}
.preview .wrap:first-child::scroll-marker {
    margin-left: 5px;
}
.preview .wrap:last-child::scroll-marker {
    margin-right: 5px;
}
.preview .wrap::scroll-marker:target-current {
    background: #fff;
}
.preview .wrap::scroll-marker:focus-visible:target-current {
    transform: scale(1.2);
    outline: #fff solid 1px;
}



.preview .wrap.v a {
    align-items: center;
    display: flex;
    justify-content: center;
}


.preview .wrap.v a .depth-btn {
    align-items: center;
    background-color: #00000072;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 139.5px;
    position: absolute;
    transition: 0.5s ease;
    width: 100%;
    z-index: 1;
}
.preview .wrap.v a:hover .depth-btn {
    background-color: #00000087;
}



.preview .wrap.v a .depth-btn .fore-btn {
    align-items: flex-end;
    display: flex;
    height: 66px;
    justify-content: center;
    width: 66px;
}


.preview .wrap.v a .depth-btn .fore-btn .button-outline {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}


.preview .wrap.v a .depth-btn .fore-btn .button-outline .button-active .btn-con {
    align-items: center;
    color: #fff;
    display: flex;
    justify-content: center;
}


.preview .wrap.v a .depth-btn .fore-btn .button-outline .button-active .btn-con img {
    height: 30px;
    width: 30px;
}


.preview .wrap.v img#pack-thumbnail-trailer {
    color: #fff;
    min-height: 139.5px;
    object-fit: cover;
}



.preview .wrap img {
    max-height: 300px;
    max-width: 100%;
    object-fit: contain;
}



/* @media for pack embed container size */



@media screen and (max-height: 500px) {
    .embed-code .contain {
        margin-bottom: auto;
    }
}



/* @media for pack info size */



@media screen and (min-width: 356px) {
    .pack-isolate {
        width: 320.391px;
    }



    .pack-isolate .container {
        width: 320px;
    }



    .pack-isolate .essential-info .pt-pn-pa-pi .pt {
        height: 157.5px;
    }
}



@media screen and (min-width: 500px) {
    .pack-isolate, .pack-isolate .container {
        width: 440px;
    }



    .pack-isolate .essential-info .pt-pn-pa-pi .pt {
        height: 225px;
    }



    /* universal */
    .preview .wrap {
        max-height: 500px;
    }

    .preview .wrap img {
        max-height: 500px;
    }
}



@media screen and (min-width: 1000px) {
    .container h3.head, .container .pi h3.head {
        font-size: 1.5rem;
    }


    .pack-isolate, .pack-isolate .container {
        width: 900px;
    }



    .pack-isolate .essential-info {
        align-items: flex-end;
    }


    .pack-isolate .essential-info .pt-pn-pa-pi .pt {
        height: 270px;
    }


    .pack-isolate .essential-info .pt-pn-pa-pi {
        align-items: flex-start;
        flex-direction: row;
    }


    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi {
        align-items: flex-start;
        margin: 20px 40px;
        max-width: 300px;
    }


    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi h2 {
        text-align: left;
    }

    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi a {
        margin-top: 20px;
    }

    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi a h4 {
        text-align: left;
    }

    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi .pi {
        justify-content: flex-start;
    }

    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi .pia {
        justify-content: flex-start;
    }
    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi .pia .pack-download-count {
        margin-left: 0;
    }


    .pack-isolate .essential-info .dl {
        max-width: 400px;
    }
}



@media screen and (min-width: 1200px) {
    .pack-isolate, .pack-isolate .container {
        width: 1100px;
    }



    .pack-isolate .container {
        padding: 40px;
    }



    .pack-isolate .essential-info .pt-pn-pa-pi {
        margin-bottom: 40px;
    }


    .pack-isolate .essential-info .pt-pn-pa-pi .pt {
        height: 343.13px;
    }


    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi {
        max-width: 330px;
    }

    .pack-isolate .essential-info .pt-pn-pa-pi .pn-pa-pi h2 {
        font-size: 2rem;
    }



    /* universal */
    .preview .wrap {
        max-height: 600px;
    }

    .preview .wrap img {
        max-height: 600px;
    }
}