@font-face {
    font-family: 'Kirang Haerang', cursive;
    src : url("https://fonts.googleapis.com/css2?family=Kirang+Haerang");
  }

@font-face {
  font-family: 'Nanum Pen Script';
  src : url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script");
}

body{
    background-color: #FDF2EC;
    margin: 0px;
    color: #B79C94;
    /* height: 1600px; */

}
.title1{
    font-family: 'Kirang Haerang', cursive;
    font-size: 45px;
    color: #B79C94;
    padding-top: 45px;
    margin-left: 100px;
    position: fixed;
    text-align: center;
    background-color: #fdf2eca0;
    height: 100px;
    width: 100%;
}

.title2{
  font-family: 'Nanum Pen Script', cursive;
    font-size: 22px;
    color: #B79C94;
    padding-top: 100px;
    position: fixed;
    margin-left: 100px;
    text-align: center;
    width: 100%;
}

.container{

}

.flex-container{
    font-family: "Nanum Pen Script";
    border-radius: 10px;
    /* flex-direction: row; */
}

.customize{
    width: 14%;
    border-radius: 10px;
    margin-left: 5%;
    padding: 15px;
    top: 5%;
    border: 3px solid #B79C94;
    height: 85%
}

#sketch{
    position:absolute;
    top: 120px;
    margin-left: 3%;
    margin-right: 5%;
    height: 1650px;
    width: 80%;
    left: 20%;
}

.subtitle{
    color: #B79C94;
    font-size: 24px;
    font-family: 'Kirang Haerang';
    font-weight: 400px;
    word-wrap: break-word;
    padding-top: 10px;
}

.selection{
    font-size: 22px;
  font-family: 'Nanum Pen Script';

}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    -webkit-appearance: none; /* Override default look */
    background-color: #FDF2EC;
  }

  .container input:checked ~ .checkmark {
    background-color: #B79C94;
    -webkit-appearance: none; /* Override default look */

  }

  #defaultCanvas0{
    width: 85%;
    left: 15%;
    background-color: #FDF2EC;

  }

  /* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 50%; /* Full-width */
  height: 15px; /* Specified height */
  background: #FDF2EC; /* Grey background */
  border: 2px solid #B79C94; 
  border-radius: 10px;
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 10px; /* Set a specific slider handle width */
  height: 28px; /* Slider handle height */
  border-radius: 10px;
  background: #B79C94; /* Brown background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 10px; /* Set a specific slider handle width */
  height: 28px; /* Slider handle height */
  border-radius: 10px;
  background: #b0958c; /* Brown background */
  cursor: pointer; /* Cursor on hover */
}

#submit{
  background-color: #b0958c;
  border: 2px solid #FDF2EC;
  color: #FDF2EC;
  border-radius: 10px;
  padding: 7px;
  margin-top: 3px;
  font-family: 'Nanum Pen Script';
  font-size: 17px;
}

#submit:hover{
  background: #c7aaa1;
}