:root {
    --mainColor: #EEFFD8;
    --mainColorHover: #d6e6c2;
    --secColor: #000;

    --tint: rgba(255, 60, 0, 0.7);
    --tintLight: rgba(255, 0, 0, 0.45);
    --tintStrong: rgba(255, 0, 0, 0.9);

    --tint: rgba(18, 235, 235, 0.7);
    --tintLight: rgba(18, 235, 235, 0.45);
    --tintStrong: rgba(18, 235, 235, 0.9);

    --tint: rgba(236, 106, 232, 0.7);
    --tintLight: rgba(18, 235, 235, 0.45);
    --tintStrong: rgba(18, 235, 235, 0.9);

    --tint: rgba(0, 0, 0, 0.7);
    --tintLight: rgba(0, 0, 0, 0.5);
    --tintStrong: rgba(0, 0, 0, 0.85);
}

@font-face {
    font-family: "ppf";
    src: url("PPFormula-NarrowBold.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "r";
    src: url("Roobert-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "r";
    src: url("Roobert-SemiBold.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: block;
}


html,
body {
    margin: 0;
    padding: 0;
}

html {
    font-size: clamp(0vh, 1vw, 2vh);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 
html,
body {
    display: grid;
    height: 100%;
    place-items: center;
} */

.image-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* font-family: 'r', sans-serif;
    font-weight: 500; */
    font-family: 'ppf', sans-serif;
    font-weight: 400;
}

.image-container {
    height: 100%;
    width: 100%;
    display: flex;
    pointer-events: none;
}

.image-before {
    height: 100%;
    width: 100%;
}

.image-after {
    position: absolute;
    height: 100%;
    width: 50%;

    overflow: hidden;
}

.frame {
    width: 100vw;
    height: 100%;
}

.comparison-slider {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.comparison-slider input {
    width: 100%;
    height: 100%;
    outline: none;
    background: none;
    -webkit-appearance: none;
}

.comparison-slider input::-webkit-slider-thumb {
    height: 100vh;
    width: 1em;
    background: none;
    -webkit-appearance: none;
    cursor: col-resize;

    box-shadow: none;
    width: 3em;
}

.comparison-slider .drag-line {
    width: 10px;
    height: 100vh;
    position: absolute;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
}

.drag-wrap {
    display: grid;
    grid-template-columns: .8fr 1fr .8fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    width: 16em;
    height: 4em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;

    grid-template-columns: 1fr 1fr 1fr;
    width: 18em;
    height: 6em;

    font-size: 1.5em;
}

.drag {
    /* width: 6em;
    height: 4em; */
    border-radius: .3em;
    /* background-color: rgba(0, 0, 0, 0.7); */
    background-color: var(--tint);
    
    transition: all .2s ease;
    z-index: 999;

    border-radius: 4em;
    /* border: .2em solid #ffffff19; */
    justify-self: center;
    width: 4.5em;
    width: 6em;
}

.action .drag,
.action .line {
    background-color: var(--tintStrong);
}

.info {
    align-items: center;
    justify-content: center;
    display: flex;
    white-space: pre-wrap;

    background-color: rgba(0, 0, 0, 0.35);
    background-color: var(--tintLight);
    color: #fff;
    position: relative;

    /* width: calc(100% - 1em); */
    width: 100%;
    height: calc(100% - 1em);
    align-self: center;
    justify-self: center;

    height: calc(100% - 2.6em);

    transition: all .4s ease;

    border-radius: .3em;
    width: calc(100% - 1.5em);

    background-color: rgba(255, 255, 255, 0.5);
    color: var(--secColor);

    padding-top: .2em;
    font-size: 1.06em;
}

.action .info {
    background-color: var(--tint);

    background-color: rgba(255, 255, 255, 0.7);
}

.info-left- {
    border-radius: 4em .3em .3em 4em;
    border-radius: .3em 0 0 .3em;
    border-radius: 4em 0 0 4em;
    right: -.1em;
    z-index: 2;

    padding-right: .5em;
    right: -1em;
}

.info-right- {
    border-radius: .3em 4em 4em .3em;
    border-radius: 0 .3em .3em 0;
    border-radius: 0 4em 4em 0;
    left: -.1em;

    padding-left: .5em;
    left: -1em;
}

.unit {
    font-size: .7em;
    position: relative;
    top: .15em;
    opacity: .5;
}

.line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .4em;
    height: 100%;
    background-color: var(--tint);
}

.drag,
.info,
.line,
.btn-reload {
    backdrop-filter: blur(.6em);
    -webkit-backdrop-filter: blur(.6em);
}

.icon {
    fill: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.2em;
    height: auto;
}

@media (orientation: portrait) {
    html {
        font-size: 2vw;
        font-size: clamp(0vh, 2vw, 1vh);
    }
    .image-wrapper {
        font-size: 1.5em;
    }
}

.btn-reload {
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: pink;
    width: 2.8em;
    height: 2.8em;
    border-radius: 1em;

    z-index: 9999;

    border-radius: .3em;
    background-color: rgba(255, 255, 255, 0.5);
    background-color: var(--tint);
    transition: all .2s ease;

    border-radius: 4em;
}

.btn-reload::before {
    content: "";
    position: absolute;
    width: 260%;
    height: 260%;
    transform: translate(-50%,-50%);
    border-radius: 300%;
    top: 50%;
    left: 50%;
}

.reload-icon {
    width: 32%;
    height: auto;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%,-50%);
    fill: #fff;
}

.btn-reload:hover {
    background-color: rgba(255, 255, 255, 0.7);
    background-color: var(--tintStrong);
}

.btn-reload:active {
    background-color: var(--tint);
}