*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html
{
    font-size: 1vw;
    font-family: "Funnel Sans", sans-serif;
    scroll-behavior: smooth;
}
body
{
    width: 100%;
    min-height: 100vh;
    color: white;
    background-image: url('../media/1.jpg');
    background-position: center center;
    background-size:cover;
    background-attachment: fixed;
}
.main
{
    backdrop-filter: brightness(0.6) grayscale(0.2);
    display: flex;
    cursor: default;
    position: fixed;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    flex-wrap: wrap;
}
.main::selection
{
    background: none;
}
.mainNav
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:3rem;
    left:0;
    transition: opacity .5s ease;
    animation-name: opacityAnimation;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    z-index: 2;
}
.mainNav>ul
{
    display: flex;
    gap:6rem;
    list-style-type: none;
}
.mainNav>ul>li
{
    font-size: 1.3rem;
    font-weight: 900;
    color: rgba(202, 202, 202, 0.478);
    cursor: pointer;
    text-align: center;
}
.header
{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1rem;
    transition: opacity .5s ease;
    animation: scaleAnimation .5s ease forwards;
}
.logo
{
    max-width: 80%;
    margin-bottom: .5rem;
}
.headerArticle
{
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap:2rem;
    justify-content: center;
    align-items: center;
    padding: 9rem 2rem;
    animation: opacityAnimation 1s ease backwards;
    transition: opacity .5s ease;
}
.elementHidden
{
    opacity: 0 !important;
}
.selectFiles
{
    font-size: 2rem;
    font-weight: 900;
    background: #A61F2B;
    color: white;
    outline: none;
    border:.5rem solid #f22e3e;
    border-radius: 1rem;
    padding: .8rem 4rem;
    position: absolute;
    top:50%;
    left:50%;
    translate: -50% -50%;
    font-family: "Funnel Sans", sans-serif;
    z-index: 1;
    cursor: pointer;
    transition: background .3s ease;
}
.filesContainer
{
    width: 100%;
    height: 100%;
    background-color: rgb(58, 58, 58);
    border:.5rem solid rgb(38, 38, 38);
    border-radius: 1rem;
    position: relative;
    overflow: auto;
    padding: 1.5rem 1.5rem;
}
.filesContainer::-webkit-scrollbar
{
    width: .5rem;
    height: 0;
}
.filesContainer::-webkit-scrollbar-thumb
{
    background-color: #A61F2B;
    border-radius: 10px;
}
.filesContainer::-webkit-scrollbar-button
{
    width: 1.5rem;
    height: 1.5rem;
}
.h1
{
    font-size: 1.8rem;
    font-weight: 900;
    font-family: "TikTok Sans", sans-serif;
    color: rgb(196, 196, 196);
}
.h2
{
    font-size: 1.5rem;
    font-weight: 900;
    color: #f22e3e;
}
.dropOverlay
{
    position: absolute;
    top:0rem;
    left: 0rem;
    right: 0rem;
    bottom: 0rem;
    background-color: #3a3a3a6b;
    backdrop-filter: blur(10px);
    border:.5rem dashed #a8a8a8;
    z-index: 2;
    border-radius: 1rem;
    display: none;
    justify-content: center;
    align-items: center;
}
.dragDropIcon
{
    width: 8rem;
    height: 8rem;
    fill: white;
}
.dropOverlay>h3
{
    font-size: 2rem;
    font-weight: 700;
    font-family: "Funnel Sans", sans-serif;
}
.fileInput
{
    z-index: -1;
    position: absolute;
    top:1rem;
    left:1rem;
    opacity: 0;
}
.filesMenu
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: none;
    position: relative;
}
.convertBlockingLabel
{
    padding: .5rem 1rem;
    border-radius: 1rem;
    width: max-content;
    background-color: rgb(70, 70, 70);
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Funnel Sans", sans-serif;
    display: none;
}
.selectMore
{
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    outline: none;
    border:.4rem solid #A61F2B;
    background: #59121F;
    padding: .5rem .8rem;
    border-radius: .8rem;
    cursor: pointer;
    font-family: "TikTok Sans", sans-serif;
    transition: background .3s ease;
}
.line
{
    width: .3rem;
    height:70%;
    background-color: rgb(93, 93, 93);
    border-radius: 10px;
}
.compression,
.format
{
    display: flex;
    align-items: center;
    gap:.5rem;
}
.compression>h2,
.format>h2
{
    font-size: 1.2rem;
    font-weight: 600;
    font-family: "Funnel Sans", sans-serif;
}
.compressionBox,
.formatBox
{
    padding: .3rem .8rem;
    font-size: 1.2rem;
    font-weight: 900;
    border-radius: .8rem;
    border:.4rem solid #A61F2B;
    background: #59121F;
    font-family: "TikTok Sans", sans-serif;
    cursor: pointer;
    position: relative;
    width:7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:.2rem;
}
.formatMenu
{
    position: absolute;
    left:50%;
    translate: -50% 0;
    bottom: 4rem;
    display: grid;
    grid-template-columns: 5rem 5rem;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    border-radius: 1.2rem;
    background-color: #59121F;
    gap:.5rem;
    padding: .8rem;
    cursor: default;
    transform: scale(0);
    opacity: 0;
    transform-origin: bottom;
    transition: all .3s ease-in-out;
}
.displayFormatMenu
{
    opacity: 1;
    transform: scale(1);
}
.formatMenuItem
{
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    padding: .8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Funnel Sans", sans-serif;
}
.formatMenuSelected
{
    background-color: #A61F2B;
}
.compressionInput
{
    width: 55%;
    height: 100%;
    font-size: 1.2rem;
    outline: none;
    border:0;
    background: none;
    color: white;
    font-weight: 700;
    text-align: end;
    font-family: "TikTok Sans", sans-serif;
}
.compressionInput::-webkit-inner-spin-button
{
    display: none;
}
.percent
{
    font-size: 1.2rem;
    width: 45%;
    font-family: "TikTok Sans", sans-serif;
}
.go
{
    font-size: 1.4rem;
    font-weight: 900;
    color: white;
    outline: none;
    background: #A61F2B;
    border:.3rem solid #F22E3E;
    border-radius:1rem;
    padding: .4rem 1.2rem;
    cursor: pointer;
    font-family: "TikTok Sans", sans-serif;
    transition: all .3s ease;
}
.downloadZip
{
    outline: none;
    background: none;
    border: 0;
    cursor: pointer;
    display: none;
}
.downloadZipSvg
{
    width: 2.5rem;
    height: 2.5rem;
    fill: rgb(159, 159, 159);
    transition: fill .3s ease;
}
.submitBlocked:hover,
.submitBlocked
{
    background: rgb(56, 56, 56);
    border:.3rem solid rgb(84, 84, 84);
    cursor: default;
}
.fileList
{
    list-style-type: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:2rem;
}
.fileList>li
{
    width: 100%;
    display: grid;
    align-items: center;
    gap:1rem;
    grid-template-columns: max-content 1fr .3rem 2.5rem;
}
.liDone
{
    grid-template-columns: max-content 1fr .3rem 2.5rem 2.5rem !important;
}
.actionBtn
{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
}
.downloadLabel
{
    position: absolute;
    top: 0rem;
    right:115%;
    width: max-content;
    bottom: 0;
    background-color: #A61F2B;
    border-radius: .8rem;
    transform: scale(0);
    transition: transform .3s ease;
    transform-origin: right;
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0 .8rem;
    font-family: "TikTok Sans", sans-serif;
}
.actionBtnError
{
    cursor: default;
}
.downloadSvg
{
    width: 100%;
    height: 100%;
    fill: grey;
}
.fileList>li>img
{
    height: 4rem;
    min-width: 2rem;
    border-radius: .2rem;
}
.fileList>li>h2
{
    font-size: 1.5rem;
    font-weight: 700;
    font-family: "Funnel Sans", sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ulLine
{
    height: 2.5rem;
    width: .3rem;
    background-color: grey;
    border-radius: 10px;
}
.close
{
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
}
.closeSVG
{
    width: 100%;
    height: 100%;
    fill: grey;
    transform: scale(1.2);
}
.closeLoading
{
    cursor: default;
}
.loadingSvg
{
    width: 100%;
    height: 100%;
    fill: #F22E3E;
}
.loading,
.loading:hover
{
    background: rgb(61, 61, 61);
    border:.3rem solid rgb(90, 90, 90);
    cursor: default;
}
.loading>input
{
    cursor: default;
}
.nav
{
    position: fixed;
    top:0;
    left:0;
    right: 0;
    z-index: 3;
    transform: translate(0%,-110%);
    transition: transform .3s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    background:rgba(0, 0, 0, 0.507);
    backdrop-filter: blur(10px);
    padding: .8rem 1rem;
    gap:3rem;
}
.nav>ul
{
    list-style-type: none;
    display: flex;
    gap:3rem;
}
.nav>ul>li
{
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    color: rgba(216, 216, 216, 0.654);
}
.navColor
{
    transition: color .3s ease;
    color: #ffffff !important;
}
.navLogo
{
    height: 2rem;
    cursor: pointer;
}
.navDisplay
{
    transform: translate(0,0);
}
.descriptions
{
    position: absolute;
    top:100vh;
    width: 100%;
    z-index: 2;
}
.howItWorks
{
    width: 100%;
    background-color: #59121F;
    background: linear-gradient(215deg,#59121F,#A61F2B);
    padding: 5rem;
    display: flex;
    flex-direction: column;
    gap:6rem;
    overflow: hidden;
}
.articleHeader
{
    width: 100%;
    text-align: center;
    font-size: 3rem;
    font-family: "TikTok Sans", sans-serif;
}
.howItWorks>section
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:5rem;
    align-items: center;
    justify-items: center;
    margin:4rem 0;
}
.videoBox
{
    overflow: hidden;
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 1s ease-in;
}
.videoBox>video
{
    width: 100%;
    transform: scaleY(1.1) scaleX(1.02);
}
.desc
{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap:1rem;
    transition: all .8s ease-out;
    opacity: 0;
}
.descRight
{
    transform: translate(150%,0);
}
.descLeft
{
    transform: translate(-150%,0);
    
}
.desc>h3
{
    font-size: 2rem;
}
.desc>p
{
    font-size: 1.2rem;
    text-align: center;
    color: rgb(207, 207, 207);
}
.formatContainer
{
    background-color: #59121F;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:1.5rem;
    padding: 1.5rem;
    cursor: default;
    border-radius: 1.5rem;
    position: relative;
    transform: scale(0);
    transition: transform .8s ease;
}
.formatAnimationPreview
{
    overflow: hidden;
    border-radius: 1rem;
    width: 10rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.formatAnimationPreview>h4
{
    z-index: 2;
    font-size: 2rem;
}
.formatBackground
{
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #A61F2B;
    opacity: 0;
    transition: opacity .5s ease;
}
.backgroundDisplay
{
    opacity: 1;
}
.bottomArrow
{
    position: absolute;
    top:100%;
    left:50%;
    translate: -50% 0;
    border-left: 2.5rem solid transparent;
    border-right: 2.5rem solid transparent;
    border-top: 1.5rem solid #59121F;
}
.compressionPreview
{
    width: 90%;
    display: flex;
    flex-direction: column;
    gap:2.5rem;
    align-items: center;
    cursor: default;
    opacity: 0;
    transition: opacity .8s ease-in;
}
.compressionPreview>h4
{
    font-size: 2rem;
}
.compressionBar
{
    width: 100%;
    background-color: #676666;
    height: .8rem;
    border-radius: 1rem;
    position: relative;
}
.compressionBarFill
{
    will-change: width;
    height: 100%;
    width: 20%;
    background-color: #F22E3E;
    border-radius: 1rem;
    transition: width 1s ease;
}
.compressionBarBall
{
    position: absolute;
    top:50%;
    translate: -50% -50%;
    left: 20%;
    background-color: #f00909;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    will-change: left;
    transition: left 1s ease;
}
.sendButtonPreview
{
    font-size: 3rem;
    font-weight: 900;
    background: #A61F2B;
    border:.6rem solid #F22E3E;
    border-radius:2rem;
    padding: 1rem 3rem;
    cursor: default;
    font-family: "TikTok Sans", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20rem;
    position: relative;
    transform: scale(0);
    transition: transform .8s ease;
}
.sendButtonPreviewOverlay
{
    position: absolute;
    top:-.6rem;
    left:-.6rem;
    bottom: -.6rem;
    right: -.6rem;
    background: #59121F;
    border-radius:2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .3s ease;
}
.sendButtonPreviewOverlayDisplay
{
    opacity: 1;
}
.loadingSvg2
{
    width: 4rem;
    height: 4rem;
}
.downloadIcon
{
    transform: scale(0);
    transition: transform .8s ease;
}
.formatsArticle
{
    width: 100%;
    padding: 5rem 5rem 2rem 5rem;
    display: flex;
    flex-direction: column;
    gap:6rem;
}
.formats
{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:6rem;
    align-items: flex-start;
}
.formatItem
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:2rem;
    cursor: default;
    opacity: 0;
    transition: opacity 1s ease;
}
.formatItem>img
{
    width: 50%;
    filter: brightness(0.5);
    transition: all .5s ease-out;
}
.formatItem>p
{
    text-align: center;
    color: rgb(154, 154, 154);
    transition: color .5s ease-out;
    font-size: 1rem;
}
.resultsArticle
{
    width: 100%;
    padding:5rem;
    display: flex;
    flex-direction: column;
    gap:8rem;
}
.resultSection
{
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 2fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap:1rem 2rem;
    margin: 2rem 0;
}
.resultSection>h3
{
    align-self: flex-end;
    font-size: 1.6rem;
    grid-column: 3/4;
    grid-row: 1/2;
    font-weight: 900;
    opacity: 0;
    transition: opacity 1.5s ease;
}
.resultLine
{
    background: linear-gradient(90deg,#A61F2B,#F21313);
    width: 100%;
    height: .5rem;
    align-self: flex-start;
    grid-row: 2/3;
    grid-column: 2/5;
    border-radius: 1rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.5s ease;
}
.resultSection>img
{
    grid-row: 1/3;
    width: 100%;
    border-radius: 1rem;
    opacity: 0;
    transform: scale(0);
    transition: all 1s ease;
}
.resultSection>h4
{
    grid-row: 1/2;
    align-self: flex-end;
    justify-self: flex-start;
    padding: 0 .5rem;
    font-size: .9rem;
    color: rgb(168, 168, 168);
    font-weight: 700;
    opacity: 0;
    transition: opacity 1.5s ease;
}
.rightH4
{
    justify-self: flex-end !important;
}
.aboutUs
{
    display: flex;
    flex-direction: column;
    gap:6rem;
    padding: 5rem;
    overflow: hidden;
}
.aboutUs>section
{
    display: grid;
    grid-template-columns: 6fr 7fr;
    gap:2rem 6rem;
    align-items: center;
    justify-items: center;
    padding-bottom: 3rem;
    
}
.aboutSVGIconContainer
{
    grid-column: 1/2;
    grid-row: 1/5;
    width: 100%;
    position: relative;
}
.aboutLogo
{
    position: absolute;
    top:-7rem;
    left:48%;
    translate: -50% 0;
    width: 50%;
    padding: 1rem 2rem;
    border-radius: 2rem;
    transform: scale(0);
    transition: transform .5s ease .5s;
}
.aboutSVGIcon
{
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1s ease;
}
.aboutUsDescription
{
    text-align: center;
    font-size: 1.2rem;
    color: rgb(195, 195, 195);
    transform: translate(120%,0);
    transition: transform 1s ease;
}
.aboutUs>section>p>strong
{
    font-weight: 900;
    color: white;
    font-family: "TikTok Sans", sans-serif;
}
footer
{
    background-color: #260101;
    padding: 3rem 3rem 3rem 3rem;
    display: grid;
    grid-template-columns: 1.5fr 5fr 1fr;
    gap: 3rem 6rem;
    align-items: center;
    justify-items: center;
}
.footerLogo
{
    width: 100%;
}
footer>ul
{
    width: 100%;
    list-style-type:none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: center;
    height: 100%;
    gap:1.2rem;
}
footer>ul>li
{
    font-size: 1.3rem;
    text-align: center;
    font-weight: 700;
    color: rgb(171, 171, 171);
    cursor: pointer;
}
.socials
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:3rem;
}
.socials>a>img
{
    width: 4rem;
    height: 4rem;
    filter: brightness(0.6);
    cursor: pointer;
    transition: all .3s ease-out;
}
.copyrights
{
    grid-column: 1/5;
    text-align: center;
    font-size: 2rem;
    cursor: default;
    width: 100%;
    font-weight: 700;
    color: rgb(171, 171, 171);
    font-family: "TikTok Sans", sans-serif;
    margin-top: 1rem;
}
.copyrights>mark
{
    background:none;
    color: #F22E3E;
    font-weight: 900;
}
.copyrights>mark>sup
{
    font-size: 1.2rem;
}
.creator
{
    grid-column: 1/5;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.creator>a
{
    display: flex;
    gap:1rem;
    text-decoration: none;
    align-items: center;
}
.creator>a>p
{
    color: rgb(174, 174, 174);
    font-size: 1.5rem;
    font-weight: 700;
    transition: color .3s ease;
    height:auto;
}
.orCodeLogo
{
    width: 10rem;
    transition: transform .3s ease;
    height: auto;
}
@keyframes opacityAnimation {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes scaleAnimation {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
.scaleAnimation
{
    transform: scale(1) !important;
}
.opacityAnimation
{
    opacity: 1 !important;
}
.translateAnimation{
    transform: translate(0,0);
}
.resultLineAnimation
{
    transform: scaleX(1);
}
@media(max-width: 445px)
{
    body
    {
        background-position: 45%;
        background-size:cover;
        background-color: #35010a;
        background-image: url('../media/2.webp');
    }
    html
    {
        font-size: 2vw;
    }
    .main
    {
        width: 100%;
        display: grid;
        grid-template-rows: 15svh 70svh;
        gap:5vh;
        padding: 3rem 2rem 4rem 2rem;
    }
    .mainNav
    {
        display: none;
    }
    .mainNav>ul
    {
        gap:3rem;
    }
    .mainNav>ul>li
    {
        font-size: 1.8rem;
    }
    .header
    {
        width: 100%;
        height: max-content;
        gap:.5rem;
        height: 100%;
    }
    .h1
    {
        font-size: 2.5rem;
    }
    .h2
    {
        font-size: 2rem;
    }
    .logo
    {
        width: 50%;
    }
    .headerArticle
    {
        width: 100%;
        height:100%;
        padding:0;
        gap:4rem;
    }
    .selectFiles
    {
        font-size: 3rem;
        width: max-content;
        border:.7rem solid #f22e3e;
        padding: 1.2rem 5rem;
        border-radius: 2rem;
    }
    .filesContainer
    {
        border-radius: 1.8rem;
        background-color: rgba(58, 58, 58, 0.322);
        border:.7rem solid rgb(67, 67, 67);
        padding: 2rem;
        order: 1;
    }
    .filesMenu
    {
        flex-wrap: wrap;
        justify-content: center;
        gap:3rem;
        order: 3;
    }
    .line
    {
        display: none;
    }
    .selectMore
    {
        font-size: 1.8rem;
        border-radius: 1.5rem;
        padding: .8rem;
        order:3;
        width: 38%;
        border:.5rem solid #A61F2B;
        background: #59121F;
    }
    .compression,
    .format
    {
        width: max-content;
        max-width: 45%;
        justify-content: center;
        gap:1rem;
    }
    .compression>h2,
    .format>h2
    {
        font-size: 2rem;
    }
    .compressionBox,
    .formatBox
    {
        font-size: 1.8rem;
        width: 10rem;
        padding: .4rem 1rem;
        border-radius: 1.5rem;
        border:.5rem solid #891a23;
    }
    .compressionInput
    {
        width: 60%;
        font-size: 2rem;
    }
    .percent
    {
        font-size: 2rem;
        width: 40%;
    }
    .format
    {
        order: 1;
    }
    .formatMenu
    {
        bottom: 5.5rem;
        grid-template-columns: 10rem 10rem;
        padding: 1.5rem;
        gap:1rem;
        border-radius: 2rem;
    }
    .formatMenuItem
    {
        border-radius: 1.5rem;
        font-size: 2rem;
        padding: 1.2rem;
    }
    .compression
    {
        order:2;
    }
    .go
    {
        order:4;
        font-size: 1.8rem;
        width: 38%;
        border-radius: 1.5rem;
        padding: .8rem;
        border:.5rem solid #F22E3E;
        background: #A61F2B;
    }
    .downloadZip
    {
        order: 5;
    }
    .downloadZipSvg
    {
        width: 3.5rem;
        height: 3.5rem;
    }
    .convertBlockingLabel
    {
        font-size: 1.8rem;
        padding: .8rem 2rem;
        text-align: center;
        border-radius: 2rem;
        order: 2;
    }
    .submitBlocked:hover,
    .submitBlocked
    {
        background: rgb(56, 56, 56);
        border:.6rem solid rgb(84, 84, 84);
        cursor: default;
    }
    .fileList
    {
        gap:3rem;
    }
    .fileList>li
    {
        gap:1.2rem;
        grid-template-columns: max-content 1fr .4rem 3rem;
    }
    .fileList>li>img
    {
        height: 6rem;
        min-width: 3rem;
        border-radius: .5rem;
    }
    .fileList>li>h2
    {
        font-size: 2.2rem;
    }
    .ulLine
    {
        height: 3rem;
        width: .4rem;
        background-color: rgb(67, 67, 67);
    }
    .actionBtn,
    .close
    {
        width: 3rem;
        height: 3rem;
    }
    .downloadSvg,
    .closeSVG
    {
        fill: rgb(105, 105, 105);
    }
    .liDone
    {
        grid-template-columns: max-content 1fr .6rem 3rem 3rem !important;
    }
    .loading,
    .loading:hover
    {
        background: rgb(61, 61, 61);
        border:.5rem solid rgb(90, 90, 90);
        cursor: default;
    }
    .nav
    {
        flex-direction: column;
        gap:1rem;
        padding: 1.5rem 2rem 2rem 2rem;
        background:rgba(0, 0, 0, 0.603);
    }
    .nav>ul
    {
        justify-content: space-between;
        width: 100%;
        gap:0;
    }
    .nav>ul>li
    {
        font-size: 2rem;
        text-align: center;
        width: min-content;
    }
    .navLogo
    {
        height: 3.5rem;
    }
    .howItWorks
    {
        padding: 8rem 2rem;
        gap:4rem;
    }
    .articleHeader
    {
        font-size: 4.5rem;
    }
    .howItWorks>section
    {
        display: flex;
        flex-direction: column;
        margin: 0;
        gap:6rem;
        margin: 4rem 0;
    }
    .formatContainer,
    .videoBox,
    .compressionPreview,
    .sendButtonPreview,
    .downloadIcon
    {
        order: 1;
    }
    .desc
    {
        order:2;
    }
    .desc>h3
    {
        font-size: 3rem;
    }
    .desc>p
    {
        font-size: 2.2rem;
        padding: 0 1rem;
    }
    .formatContainer
    {
        padding: 2rem;
        border-radius: 2rem;
    }
    .formatAnimationPreview
    {
        width: 12rem;
        padding: 1.5rem;
        border-radius: 1.6rem;
    }
    .formatAnimationPreview>h4
    {
        font-size: 2.5rem;
    }
    .bottomArrow
    {
        border-left: 4rem solid transparent;
        border-right: 4rem solid transparent;
        border-top: 2.5rem solid #59121F;
    }
    .compressionPreview
    {
        width: 85%;
        gap:3.5rem;
    }
    .compressionPreview>h4
    {
        font-size: 3.5rem;
    }
    .compressionBar
    {
        height: 1.2rem;
    }
    .compressionBarBall
    {
        width: 2.5rem;
        height: 2.5rem;
    }
    .sendButtonPreview
    {
        border:.8rem solid #F22E3E;
        font-size:  3.6rem;
        width: 28rem;
        border-radius:2.5rem;
    }
    .sendButtonPreviewOverlay
    {
        top:-.8rem;
        left:-.8rem;
        bottom: -.8rem;
        right: -.8rem;
        border-radius:2.5rem;
    }
    .loadingSvg2
    {
        width: 5rem;
        height: 5rem;
    }
    .formatsArticle
    {
        padding: 8rem 4rem 6rem 4rem;
        gap:8rem;
    }
    .formats
    {
        display: flex;
        flex-direction: column;
        gap:10rem;
    }
    .formatItem
    {
        gap:3rem;
    }
    .formatItem>img
    {
        width: 40%;
    }
    .formatItem>p
    {
        font-size: 2.2rem;
    }
    .formatItemFocusEffect>img
    {
        filter: brightness(0.85);
        transform: scale(1.05);
    }
    .formatItemFocusEffect>p
    {
        color: rgb(230, 230, 230);
    }
    .resultsArticle
    {
        padding: 3rem 3rem;
        gap:6rem;
    }
    .resultSection
    {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-rows: 1fr auto auto;
        gap:1rem;
        margin: 4rem 0;
    }
    .resultSection>h3
    {
        grid-column: 2/3;
        grid-row: 2/3;
        font-size: 3.5rem;
        margin-top: 2rem;
    }
    .resultLine
    {
        grid-row: 3/4;
        grid-column: 2/3;
        align-self: center;
        height: .8rem;
        background: #F21313;
    }
    .resultSection>img
    {
        grid-column: 1/4;
        grid-row: 1/2;
        border-radius: 1.5rem;
    }
    .resultSection>h4
    {
        grid-column: 1/2;
        grid-row: 3/4;
        justify-self: flex-end;
        align-self: center;
        font-size: 1.6rem;
        text-align: center;
    }
    .rightH4
    {
        grid-column: 3/4 !important;
        grid-row: 3/4 !important;
        justify-self: flex-start !important;
    }
    .resultSection>:first-child
    {
        display: none !important;
    }
    .aboutUs
    {
        padding: 2rem 4rem 9rem 4rem;
    }
    .aboutUs>section
    {
        display: flex;
        flex-direction: column;
        padding-top: 8rem;
        padding-bottom: 0rem;
        gap:6rem;
    }
    .aboutLogo
    {
        width: 70%;
        top:-10rem;
    }
    .aboutUsDescription
    {
        font-size: 2.2rem;
    }
    footer
    {
        width: 100%;
        overflow: hidden;
        padding: 4rem 3rem 5rem 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:3rem;
    }
    .footerLogo
    {
        width: 60%;
    }
    footer>ul
    {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap:2rem 3rem;
        grid-auto-flow: column;
    }
    footer>ul>li
    {
        font-size: 2.2rem;
    }
    .socials
    {
        margin: 2rem 0 0rem 0;
        gap:5rem;
    }
    .socials>a>img
    {
        width: 6rem;
        height: 6rem;
        filter: brightness(.8);
    }
    .copyrights
    {
        font-size: 2.8rem;
        margin-bottom: .5rem;
    }
    .copyrights>mark>sup
    {
        font-size: 1.8rem;
    }
    .creator>a>p
    {
        font-size: 1.8rem; 
    }
    .orCodeLogo
    {
        width: 12rem;
        margin-top: .3rem;
    }
}
@media(hover:hover) and (pointer: fine)
{
    .mainNav>ul>li:hover
    {
        color:#df851f;
    }
    .selectFiles:hover
    {
        background: #f22e3e;
    }
    .selectMore:hover
    {
        background: #A61F2B;
    }
    .formatMenuItem:hover
    {
        background-color: #A61F2B;
    }
    .go:hover
    {
        background: #df851f;
        border:.3rem solid #df851f;
    }
    .downloadZipSvg:hover
    {
        fill: #F21313;
    }
    .actionBtn:hover>.downloadLabel
    {
        transform: scale(1);
    }
    .actionBtn:hover>.downloadSvg
    {
        fill: #ffffff;
    }
    .close:hover>.closeSVG
    {
        fill: #F21313;
    }
    .nav>ul>li:hover
    {
        color: #df851f;
    }
    .formatItem:hover>img
    {
        filter: brightness(0.8);
        transform: scale(1.05);
    }
    .formatItem:hover>p
    {
        color: rgb(213, 213, 213);
    }
    .navLogo:hover
    {
        transform: scale(1.05) rotate(-2deg) translate(0,0);
    }
    footer>ul>li:hover
    {
        color:#df851f;
    }
    .socials>a>img:hover
    {
        filter: brightness(0.9);
        transform: scale(1.05);
    }
    .creator>a:hover>p
    {
        color: #2CBF04;
    }
    .creator>a:hover>.orCodeLogo
    {
        transform: scale(1.05);
    }
}