@import url('https://fonts.googleapis.com/css2?family=Chilanka&display=swap');

.chilanka {
  font-family: "Chilanka", cursive;
  font-weight: 400;
  font-style: normal;
}
body{
    height:100%;
    background-color: rgb(222, 222, 222);
    font-family: "Chilanka", cursive;
     font-weight: 400;
  font-style: normal;
  color:rgb(45, 43, 41);
  
}
#main_wrap{
    height:100%;
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:20px;
}
.capture{
    width:540px;
    height:540px;
    display: flex;
    background-color: white;
    padding:6px;
    position: relative;
    box-sizing: border-box;
}

.two-cols{
    display:flex;
    height:100%;
}

.capture h1{
    font-size:36px;
    text-align: center;
    margin-top:8px;
    margin-bottom:8px;
    font-weight: 100;

    text-shadow: 2px 2px 0 white;
}

.capture .decor{
    position: absolute;
    width:80px;
    height:80px;
}

.capture .decor.decor1{
    right:0;
    top:0;
}
.capture .decor img{
    width:100%;
    height: auto;
}
.capture .decor.decor2{
    left:0;
    bottom:0;
    transform: rotate(-180deg);
}


.capture .colored-area{
    width:100%;
    background-color: #ece4d0;;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    padding:16px;

}
.capture .colored-area .left{
    flex:1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.capture .colored-area .left .image-container{
        position: relative;
        z-index: 3;
    }
.capture .colored-area .left .image-container img{
    width: 240px;
    height:auto;
}


.capture .colored-area .triangle{
    position: absolute;
    left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
    width:220px;
    height:220px;
}

.capture .colored-area .right{
    flex:1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.capture .colored-area .right .addition{
  width: 100%;
}
.capture .colored-area .right .addition>*{
  margin-bottom:6px;
}


.ingridients{
   width:100%;
}
.ingridients div{
    margin-bottom:8px;
}
.ingridients div::before{
    content:"";
    background: url("data:image/png;base64,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");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width:16px;
    height:16px;
    display: inline-block;
    margin-right:6px;
    vertical-align: middle;
}

  #dropzone.dragover {
    background: #e0f7fa;
    border-color: #00796b;
    color: #00796b;
  }
  #preview {
    max-width: 300px;
    display: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  .capture-wide{
    width: 540px;
    height:360px;
  }
 .capture-wide .colored-area .right{
    font-size: 14px;
 }

  .capture-wide .ingridients div::before{
    width:14px;
    height:14px;
    vertical-align: middle;
  }

  .capture-wide h1{
    font-size:26px;
  }


  .palette{
    display: flex;
  }
  .color-palette .sq{
    width:32px;
    height:32px;
    cursor:pointer;
    display: inline-block;
  }
 .color-palette .sq.selected{
    border: 2px solid rgb(3, 167, 249);
 }


 .controls{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap:8px;
 }

 .save-btn{
    display: inline-block;
    padding: 12px 24px;
    background-color: rgb(230, 182, 166);
    border-radius: 8px;
    cursor:pointer;
    transition: all .3s;
 }

 .save-btn:hover{
    transform: scale(1.2);
 }

 .font-controls{
  position: absolute;
  left: -30px;
  top:0;
  color:rgb(6, 139, 255);
  display: flex;
  flex-direction: column;
  gap:4px;
 }

 .font-controls>span{
  padding: 6px;
  text-align: center;
  bordeR:2px solid rgb(6, 139, 255);
  display: block;
  border-radius: 6px;
  cursor: pointer;
 }