body{
    background-color: #282D32;
    align-items: center;
}

/* container */

.board{

    display: flex;
    
    background-color: #32363B;
    padding: 1.2vw;
    position: absolute;
    height: fit-content;
    /* height: 41.4vw; */
    width: 85vw;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.contain{

    margin-left: 7vw;
    margin-right: 7vw;
    margin-top: 2.2vw;
    margin-bottom: 2.2vw;
    
}

.logo{
    font-size: 2.2vw;
    color: #E8E9EB;
    font-family: "Rosario",sans-serif;
    margin-bottom: 15px;
}



/* Tools  */

/* upper tools */
.upper_tools{
    margin-left: 1vw;
    display: grid;
    grid-template-columns: 5.2vw 5.2vw 4.2vw;
}

.tool_btn{    
    background-color: white;
    height: 4.2vw;
    width: 4.2vw;
    margin-bottom: 1vw;    
    cursor: pointer;
}


/* dropper */
.dropper{
    margin-left: 1vw;
    display: grid;
    grid-template-columns: 5.2vw 9.4vw;
}

.dropper_btn{
    padding: 1vw;
    background-color: #23272A;
    height: 4.2vw;
    width: 9.4vw;
    margin-bottom: 1vw;  
    cursor: pointer;  
}

.input_dropper{
    display: flex;
    color: white;
    font-size: 1.2vw;
  
    width: 7vw;
    height: 2vw;
    background-color: #ffffff0e;
    border: none;
}


/* down tools */
.down_tools{
    margin-left: 1vw;
    display: grid;
    grid-template-columns: 10.4vw 4.2vw;
}

.filter{
    background-color: #108D7E;
    height: 7.4vw;
    width: 9.4vw;
    margin-bottom: 1vw;   
    cursor: pointer; 
}

/* filter */

.filter_font{
    padding-top: 0.8vw;
    color: white;
    font-size: 1.2vw;
    font-weight: 500;
    text-align: center;
    align-items: center;
    width: fit-content;
    margin: auto;
}

.filter_slide{
    color: #383F44;
    display: flex;
    font-size: 1vw;
    align-items: center;
    text-align: center;
    margin-top: 1.4vw;
    font-weight: 400;    
    background-color: white;
    justify-content: space-between;
    width: 7vw;
    height: 2vw;

    border-radius: 25px;    
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.move_before:hover , .move_after:hover {
    color: #25292c;
    font-size: 25px;
}


.set{
    display: flex;
    align-items: center;
    background-color: #7A232D;
    height: 4.2vw;
    width: 9.4vw;
    margin-bottom: 1vw;    
    cursor: pointer;
}


/* set value */

.set_font{
    color: white;
    display: flex;
    font-size: 1vw;
    font-weight: 500;
    text-align: center;
    align-items: center;
    width: fit-content;
    margin: auto;
}

.input_style{
    font-size: 1vw;
    margin-left: 10px;
    width: 2.6vw;
    height: 1.4vw;
    background-color: #C4C6C9;
    border: none;
}


.slider_btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #23272A;
    height: 12.7vw;
    width: 4.2vw;
    margin-bottom: 1vw;  
    cursor: pointer;  
}

/* slider */
.input-range{
    position: relative;
    top: 6vw;
    width: 10vw;
    height: 0.6vw;
    border-radius: 25px;
    -webkit-appearance: none;
    background-color: #ffffff17;
    cursor:grab;

    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}



/* download */
.download{
    margin-left: 1vw;
    display: grid;
}

.download_btn{
    display: flex;
    background-color: #9C0D38;    
    color: #E8E9EB;
    align-items: center;
    height: 4.2vw;
    width: 14.6vw;  
    cursor: pointer;
}

.download_font{
    display: flex;
    font-size: 1.5vw;
    font-weight: 500;
    text-align: center;
    align-items: center;
    width: fit-content;
    margin: auto;
}

.border_btn{
    border: 2px solid white;
}

.round_btn{
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}


/* Tools with functionality */

.brightness{
    background-image: url("svg/brightness.svg");
    background-size: 2vw;
    background-color: #DDE0B8;
    background-repeat: no-repeat;
    background-position: center;
}

.contrast{
    background-image: url("svg/contrast.svg");
    background-size: 2vw;
    background-color: #D4D4D4;
    background-repeat: no-repeat;
    background-position: center;
}

.border_img{
    background-image: url("svg/border.svg");
    background-size: 2vw;
    background-color: #D9BEA6;
    background-repeat: no-repeat;
    background-position: center;
}

.border_radius{
    background-image: url("svg/border_radius.svg");
    background-size: 2vw;
    background-color: #BCE0B8;
    background-repeat: no-repeat;
    background-position: center;
}

.crop{
    background-image: url("svg/crop.svg");
    background-size: 2vw;
    background-color: #EDD1D1;
    background-repeat: no-repeat;
    background-position: center;
}

.opacity{
    background-image: url("svg/opacity.svg");
    background-size: 2vw;
    background-color: #CCE9E0;
    background-repeat: no-repeat;
    background-position: center;
}

.saturation{
    background-image: url("svg/saturation.svg");
    background-size: 2vw;
    background-color: #CBDEB8;
    background-repeat: no-repeat;
    background-position: center;
}

.text{
    background-image: url("svg/text.svg");
    background-size: 2vw;
    background-color: #E4E4CB;
    background-repeat: no-repeat;
    background-position: center;
}

.rotate{
    background-image: url("svg/rotate.svg");
    background-size: 2vw;
    background-color: #C8D4ED;
    background-repeat: no-repeat;
    background-position: center;
}

.dropper_img{
    background-image: url("svg/dropper.svg");
    background-size: 2vw;
    background-color: #8CB7BA;
    background-repeat: no-repeat;
    background-position: center;
}

.icon{
    margin-right: 5px;
}

.tool_btn:hover{
    box-shadow: 0px 3px 5px rgb(119, 125, 131);
}

.download_btn:hover{
    box-shadow: 0px 2px 5px rgb(119, 125, 131);
}


/* image drop */


.img_area{
    width: 85%;
    background-color: #5B5E62;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}


.drop-zone {
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    color: #343A40;
  }
  
  .drop-zone--over {
    border-style: solid;
  }
  
  .drop-zone__input {
    display: none;
  }
  
  .drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;

    background-size: cover;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;

}
  
  .drop-zone__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 14px;
    text-align: center;
  }
  

    .filter_brightness{
      filter: brightness(40%);
      -webkit-filter: brightness(40%);
}