
:root {
    --main-bg-color: #17171d;
    --main-color: #892aa8;
    --main-gradient: linear-gradient(90deg, rgb(246, 244, 247) 0%, rgba(130,0,253,1) 100%);
    --swiper-navigation-size: 44px;
    --swiper-theme-color: #007aff;
    view-transition-name: root;
}
html {
    height: 100%;
    display: block;
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 1.2em;
    line-height: 160%;
    background-color: var(--main-bg-color);
    color: #fff;
    display: block;

}

.home-banner {
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.home-banner:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    background: #17171dcf;
}

.home-banner-content {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    transition: all 300ms;
}


.home-banner-content h1 {
    font-size: 100px;
    text-transform: uppercase;
    line-height: 100px;
    text-align: center;
    font-weight: 700;
    margin: 0 0 30px 0px;
    transition: all 300ms;
}
.gradient {
    animation: flow 4s ease-in-out infinite;
    background: var(--main-gradient);
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
h1 {
    font-weight: 400;
    font-size: 46px;
    line-height: 130%;
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
@keyframes flow {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0 50%;
    }
}

.home-banner-content p {
    margin: 0 0 30px 0;
    font-size: 30px;
    text-align: center;
}
p {
    font-size: 18px;
    line-height: 130%;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
form {
    display: block;
    margin-top: 0em;
    margin-block-end: 1em;
}

.compare-files {
    width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.file-drop-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45%;
    padding: 10px;
    height: 100px;
    background-color: #cccccc3d;
    border: 1px solid #cccccc3d;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
    transition: .3s;
}

.fake-btn {
    flex-shrink: 0;
    background-color: var(--main-color);
    border-radius: 10px;
    padding: 4px 10px;
    margin-right: 10px;
    font-size: 14px;
}
.item-delete {
    display: none;
    position: relative;
    height: 18px;
    width: 18px;
    cursor: pointer;
}
.item-delete:before {
    content: "";
    position: absolute;
    left: 0;
    transition: .3s;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%23bac1cb' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");}
.item-delete:after {
    content: "";
    position: absolute;
    opacity: 0;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(0);
    background-color: #f3dbff;
    border-radius: 50%;
    transition: .3s;
}
.file-msg {
    color: #9699b3;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
}
.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}
input:not([type="image" i]) {
    box-sizing: border-box;
}
input[type="file" i] {
    appearance: none;
    background-color: initial;
    cursor: default;
    align-items: baseline;
    color: inherit;
    text-overflow: ellipsis;
    white-space-collapse: preserve;
    text-wrap: nowrap;
    text-align: start !important;
    padding: initial;
    border: initial;
    overflow: hidden !important;
}
input {
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-variant-position: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    font-optical-sizing: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    text-rendering: auto;
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: field;
    writing-mode: horizontal-tb !important;
    margin: 0em;
    padding: 1px 0px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    padding-block: 1px;
    padding-inline: 2px;
}
.file-drop-area-errors {
    position: absolute;
    display: none;
    opacity: 0;
    bottom: -68px;
    width: 250px;
    height: 58px;
    background: var(--main-bg-color);
    font-size: 14px;
    padding: 10px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0px 0px 12px 0px #ffffff36;
}
.file-drop-area-errors::after {
    content: '';
    display: inline-block;
    border: 30px solid transparent;
    border-bottom: 30px solid var(--main-bg-color);
    position: absolute;
    top: -60px;
    left: 50%;
    margin-left: -30px;
}
.file-drop-area.is-active {
    background-color: #892aa85c;
}

.file-drop-area.is-active .fake-btn {
    display: none;
}


.home-banner-content .button {
    margin: 40px auto 0;
    display: block;
}

.button, input[type="submit"] {
    font-size: 18px;
    line-height: 18px;
    padding: 15px 45px;
    color: #fff;
    border: none;
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    border-radius: 29px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin: 10px;
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -ms-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    background-color: var(--main-color);
}
button {
    appearance: auto;
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-variant-position: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    font-optical-sizing: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: buttonface;
    writing-mode: horizontal-tb !important;
    margin: 0em;
    padding-block: 1px;
    padding-inline: 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
}
.compare-result {
    background: #fff;
}
.compare-result.compared .container {
    border: 1px solid #ccc;
    border-radius: 16px;
    padding: 20px;
}
.compare-result .container {
    overflow-y: hidden;
    color: #111112;
}
.container {
    max-width: 1280px;
    margin: 0 auto;
    overflow-y:hidden;
}
.compare-result-title {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.compare-result h2 {
    font-size: 1.4em;
    margin: 0;
}
h2 {
    margin-bottom: 75px;
    font-size: 46px;
    font-weight: 400;
    line-height: 130%;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.compare-result-title > div {
    cursor: pointer;
    text-decoration: underline;
    margin-left: 20px;
    font-size: 0.8em;
    color: #ccc;
}
.compare-result td {
    color: #111112;
    padding: 1em;
    overflow: visible;
}

@media screen and (max-width: 650px) {

   body {
       font-size: 0.8em;
   }

   .home-banner {
       min-height: 80vh;
       padding: 50px 20px;
   }

   .home-banner-content {
       width: 100%;
   }

   .home-banner-content h1 {
       font-size: 2.2em;
       line-height: 1.3em;
       margin-top: 40px;
       margin-bottom: 10px;
   }

   .home-banner-content p {
       margin: 10px 0;
       font-size: 1em;
   }
   .compare-files {
       width: 100%;
       flex-direction: column;
   }

   .file-drop-area {
       width: 100%;
       margin-bottom: 10px;
       height: 60px;
   }

   .fake-btn {
       font-size: 0.8em;
   }

   .file-drop-area:not(.is-active) .file-msg {
       display: none;
   }


   .home-banner-content .button {
       margin-top: 0;
       width: 100%;
   }

   .button, input[type="submit"] {
       font-size: 0.8em;
       padding: 12px 25px;
   }
}
