:root{
    --radiusPerc: 0%;

    --brightnessValue: 100%;
    --contrastValue: 100%;
    --grayscaleValue: 0%;
    --saturateValue: 100%;
}

div.content{
    width: clamp(60vw, 120vh, 90vw);
    min-height: clamp(29vw, 58vh, 58vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
}

div.optionRow{
    width: 85%;
}


div.imgContainer{/*set container size when img uploaded*/
    margin-top: clamp(1vw, 2vh, 2vh);
}
div.imgContainer img{
    object-fit: contain;
    height: clamp(25vw, 50vh, 50vh);
    max-width: clamp(55vw, 110vh, 85vw);
    max-height: 70vh;

    filter: brightness(var(--brightnessValue)) contrast(var(--contrastValue)) grayscale(var(--grayscaleValue)) saturate(var(--saturateValue)); 
}


div.filters{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 90%;
    margin-bottom: clamp(1vw, 2vh, 2vh);
}
div.filters a.classicButton{
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}

div.iconButtonsGroup{
    max-width: 90%;
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}






.cropper-view-box,
.cropper-face {
  border-radius: var(--radiusPerc);
}

div.cropper-crop-box, .cropper-view-box{
    outline-color: rgba(6,255,122, 0.75) !important;
}

.cropper-point, .cropper-line{
    background-color: rgb(6,255,122) !important;
}

#result{
    background-color: var(--Pozadi);
}