@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Ek+Mukta:300,400,600,700');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita&display=swap');

@font-face {
    font-family: Ranjana;
    src: url('../fonts/ranjana.ttf');
}

:root{
    --navcon-width: 50%;
    --navcon-small-width: 35%;
    --nav-height:70px;
    --key-board-binder-top:110px;
    --back-panel-height:50px;
    --back-panel-bg:rgba(255,255,255,0.9);
    --bg: white;
    --text-color: black;
    --keyboard-background-color:whitesmoke;
    --keyboard-button-color: white;
    --keyboard-text-color: black;
    --highlighted-comment: whitesmoke;
    --overlay-bg: rgba(255, 255, 255, 0.877);
}


body{
    font-family: 'Ek Mukta', 'Nano Sans', 'Amita', Verdana, Geneva, Tahoma, sans-serif;
    background-color: white;
    color:var(--text-color);
    padding:0px;
    margin:0px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.emoji-selector-container{
    max-width: 400px;
    min-width: 200px;
    width:340px;
    height: 50vh;
}

.shadow-text{
    text-shadow: 2px 2px 2px #aaa;
}

.white-text-stroke{
    text-shadow:
        3px 3px 0 #fff,
        -1px -1px 0 #fff,  
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
}

.progressive-image {
    background: linear-gradient(316deg, #c2c2c2, #f6f6f5);
    background-size: 400% 400%;

    -webkit-animation: progressiveimageanim 3s ease-in-out infinite;
    -moz-animation: progressiveimageanim 3s ease-in-out infinite;
    animation: progressiveimageanim 3s ease-in-out infinite;
}

.translucent-bg{
    background-color: var(--back-panel-bg);
}

.home-left{
    width:65%;
    padding:70px 1% 0px 5%;
    box-sizing: border-box;
}

@-webkit-keyframes progressiveimageanim {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes progressiveimageanim {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes progressiveimageanim {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}

.no-bg{
    background-color: unset;
    background:unset;
}
.one-line-text-150,
.one-line-text-250,
.one-line-text-300,
.one-line-text-70per,
.one-line-text-100{
    max-width: 100px;
    margin: 0px 5px 0px 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.two-line-text,
.three-line-text,
.five-line-text{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.three-line-text{ -webkit-line-clamp: 3;}
.two-line-text{ -webkit-line-clamp: 2;}

.one-line-text-150{max-width: 150px;}
.one-line-text-250{max-width:250px;}
.one-line-text-300{max-width:300px;}
.one-line-text-70per{max-width:70%;}


.overlay-no-center{
    position:fixed;
    animation: overlay-no-center-background 1s ease-in-out;
    background-color: var(--overlay-bg);
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:1000;
}

@keyframes overlay-no-center-background {
    from{background-color: white;}
    to{background-color: var(--overlay-bg);}
}

.keyboard-binder{
    position:fixed;
    top:var(--key-board-binder-top);
    right:0px;
    padding:5px;
    z-index: 10000;
    background-color: rgba(255, 255, 255, 0.932);
}

.absolutely-centered{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.absolutely-covered{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

.divider-2{
    height:2px;
    width:100%;
    background-color: black;
}

.keyboard-button{
    background-color: var(--keyboard-button-color);
    border: transparent;
    color: var(--keyboard-text-color);
    border-radius: 7px;
    box-sizing: border-box;
    font-weight: bold;
    height: min(50px, 10vh);
    margin: min(0.8vw,0.8vh) min(0.5vw,0.5vh);
    font-size: 18px;
    user-select: none;
}

.keyboard-button:active{
    /* transform: translate(0,-100%); */
    background-color: black;
    color:white;
}

.keyboard-background{
    position:fixed;
    bottom:0;
    left:0;
    width:100vw;
    background-color:lightgray;
}

.divided-container-left{
    -ms-overflow-style: none;
    width:100%;
    scrollbar-width: none;
    overflow-y:scroll;
    border:solid gray; 
    border-width:0px 1px 0px 0px;
    box-sizing:border-box;
}

.divided-container-left::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.divided-container-left-scroll-bar{
    position:absolute;
    width:8px;
    border-radius:4px;
    background-color:rgba(0,0,0,0.3);
    z-index:205;
    right:0;
    margin-right: 2px;
}

.divided-container-left-scroll-bar:hover{
    width:12px;
    background-color:rgba(0,0,0,0.7);
    border-radius:6px;
}


a{
    color:var(--text-color);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

a:hover{
    font-weight: bolder;
    text-decoration: underline;
}

.link{
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.link-hb{cursor:pointer}

.link-hb:hover,
.link:hover{
    font-weight: bold;
    text-decoration: underline;
}


br{
    height:20px;
    width:100%;
}

.break{
    height:20px;
    width:100%;
}

.break-30{
    height:30px;
    width:100%;
}

.break-40{
    height:40px;
    width:100%;
}

.break-50{
    height:50px;
    width:100%;
}

.break-60{
    height:60px;
    width:100%;
}

.break-70{
    height:70px;
    width:100%;
}

.break-100{
    height:100px;
    width:100%;
}

.break-10{
    height:10px;
    width:100%;
}

.z2{z-index: 2;}
.padding-5{padding:5px;}
.pb10{
    padding-bottom: 10px;
}
.pb20{
    padding-bottom:20px;
}
.pdt10{
    padding-top:10px;
}
.pdt20{
    padding-top: 20px;
}
.pdl10{
    padding-left: 10px;
}
.pdl5{padding-left: 5px;}
.mu10{
    margin-top: 10px;
}
.mu20{
    margin-top: 20px;
}
.mu30{ 
    margin-top:30px;
}
.mu40{
    margin-top: 40px;
}
.mb10{
    margin-bottom:10px;
}
.mb20{
    margin-bottom: 20px;
}
.mb30{margin-bottom: 30px;}
.mb50{margin-bottom: 50px;}


/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-hidden::-webkit-scrollbar {
    display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
.scroll-hidden {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.no-select{
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.image-view-image{
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    object-fit: contain;
}

.image-view-nav-button{
    background-color: white;
    color:black;
}

.scroll-snap-x-container{
    scroll-snap-type: x mandatory;
    box-sizing: border-box;
    display:flex;
    flex-direction: row;
    width:100%;
    overflow-x:scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scroll-behavior: smooth;
}

.scroll-snap-x-container::-webkit-scrollbar {
    display:none;
}

.red-100-400{
    width:400px;
    background-color: red;
    height:100px;
    scroll-snap-align: start;
}

.blue-100-400{
    width:400px;
    background-color: blue;
    height:100px;
    scroll-snap-align: start;
}

.logo-gradient{
    background: #589653;
    background: -webkit-linear-gradient(to right, #589653 11%, #D41711 100%);
    background: -moz-linear-gradient(to right, #589653 11%, #D41711 100%);
    background: linear-gradient(to right, #589653 11%, #D41711 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.red{
    color:red;
}
.black{color:black;}

.navigation-panel{
    position:fixed;
    top:0px;
    width:100%;
    align-self: center;
    z-index: 200;
    background-color: var(--bg);
    border: solid black;
    border-width: 0px 0px 1px 0px;
    background-color: white;
}

.back-panel{
    position:fixed;
    top:0px;
    height:var(--back-panel-height);
    background-color: var(--back-panel-bg);
    border:solid gray;
    border-width:0px 0px 1px 0px;
    width:100%;
    align-self: center;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.back-container{
    display:flex;
    flex-direction: column;
    width:var(--navcon-width);
    padding-top:var(--back-panel-height);
}


.navigation-container-container{
    width:100%;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    padding:0px;
    z-index: 0;
}

.navigation-container{
    display:flex;
    flex-direction: column;
    width:var(--navcon-width);
    padding-top:var(--nav-height);
}

.navigation-container-small{
    display:flex;
    flex-direction: column;
    width:var(--navcon-small-width);
    padding-top:var(--nav-height);
    padding-bottom:var(--nav-height);
}

.bald-container{
    height:100vh;
    width:30vw;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.loading-image-indicatior{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    background-color: red;
    position: absolute;
    z-index: -1;
}

.upload-label{
    margin:10px;
    background: none;
    font-size: 17px;
    font-weight:bold;
    color:black;
    padding:10px;
    border:solid black 1px;
    border-radius: 5px;
}

.upload-label:hover{
  cursor: pointer;
  background-color: black;
  color:white;
}

.flex-center-center{
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.flex-center{
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.flex-center-center-row{
    width:100%;
    display:flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.flex-center-row{
    display:flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.flex-space-between-row{
    width:100%;
    display:flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-space-around-row{
    width:100%;
    display:flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.fixed-center-center{
    width:100%;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    flex-direction: column;
    align-content: center;
}

.flex-row{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-row-i-center{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.flex-row-no-wrap{
    display:flex;
    flex-direction: row;
}

.flex-row-reverse{
    display: flex;
    flex-direction: row-reverse;
}

.image-manip-container{
    position: relative;
    /* background-color: ghostwhite; */
    /* overflow: hidden; */
}

.top-sticky{
    position:-webkit-sticky;
    position:sticky;
    top:0px;
    width:100%;
    z-index: 201;
    background-color: var(--bg);
}

  
.form{
    width:50%;
}

.shadow{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.shadowed{
    color:gray;
}

.no-margin{margin:unset;}
.no-padding{padding:unset;}
.no-padding-margin{padding:0px;margin:0px;}
.normal-font{font-weight: normal;}
.computer-visible{}
.bold{font-weight: 900; color:black;}
.mobile-visible{display:none;visibility: hidden; height:0.1px;width:0.1px;}
.padding-10{
    padding:10px;
}

.multi-line{
    word-wrap: break-word;
    white-space: pre-wrap;
}

.transform-container-zoom{
    position:fixed;
    left:0px;
    bottom:0px;
    z-index: 100;
}

.transform-container{
    width: inherit; height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
    overscroll-behavior: none;
}

@media screen and (max-width:700px){
    .navigation-panel{
        bottom:0px;
        top:unset;
        left:0px;
        right:0px;
        border-width: 0px;
        box-sizing: border-box;
        border-top: solid gray 1px;
    }
    .navigation-container, .bald-container{
        width:inherit;
        padding:0px;
        padding-top:unset;
        padding-bottom: var(--nav-height);
    }
    .navigation-container-small{
        width:100%;
    }
    .back-container{width:100%;}
    .mobile-visible{display: unset;}
    .form{width:80%;}
    .mobile-visible{display: unset; visibility: unset;height:unset;width:unset;}
    .computer-visible{display:none;visibility: hidden;height:0.1px;width:0.1px;}
    .transform-container-zoom{
        right:0px;
        left:unset;
        bottom:50px;
    }
    .link{
        font-weight:600;
    }
    .image-view-nav-button{
        background-color: black;
        color:white;
    }
    .keyboard-binder{bottom:unset;top:0px;}
}


@media screen and (min-width:700px){
    .navigation-container, 
    .bald-container,
    .back-container{
        width:60%;
    }
}

@media screen and (min-width:1300px){
    .navigation-container, 
    .bald-container,
    .back-container{
        width:var(--navcon-width);
    }
    .home-left{ 
        width:70%; 
        padding:70px 8% 0px 8%;
    }
}

/* enter from left scren and so on*/
.e-f-l-s{   animation: a-e-f-l-s 0.5s ease-in-out;}
.e-f-r-s{   animation: a-e-f-r-s 0.5s ease-in-out;}

.e-f-l{ animation: a-e-f-l 0.41s ease-in-out;}
.e-f-l_{ animation: a-e-f-l_ 0.4s ease-in-out;}

.e-f-r{ animation: a-e-f-r 0.41s ease-in-out;}
.e-f-r_{ animation: a-e-f-r_ 0.4s ease-in-out;}

@keyframes a-e-f-l {
    from {transform: translate(-100%,0%);}
    to {transform: translate(0%,0%);}
}

@keyframes a-e-f-l_ {
    from {transform: translate(-100%,0%);}
    to {transform: translate(0%,0%);}
}

@keyframes a-e-f-r {
    from {transform: translate(100%,0%);}
    to {transform: translate(0%,0%);}
}

@keyframes a-e-f-r_ {
    from {transform: translate(100%,0%);}
    to {transform: translate(0%,0%);}
}

@keyframes a-e-f-l-s {
    from {transform: translate(-100vw,0%);}
    to {transform: translate(0%,0%);}
}

@keyframes a-e-f-r-s {
    from {transform: translate(100vw,0%);}
    to {transform: translate(0%,0%);}
}

.fade-in{ animation:fade-in-a 0.5s ease-in-out;}
@keyframes fade-in-a {
    from {opacity: 0;}
    to {opacity:1;}
}