body {
  padding: 20px;
  font-family: 'Quicksand', sans-serif;
  background: url(../img/egg_bg.svg)50% 0 no-repeat fixed;
}

input,
button {
  padding: 0;
  border: none;
  border-color: transparent;
  border-style: none;
  border-width: 0;
  background-color: transparent;
}

input:focus,
button:focus,
textarea:focus {
  outline: 0 !important;
}

button {
  cursor: pointer;
}

#wrap {
  margin: 0 auto;
}

/*------------------ header ------------------*/

#header {
  height: 10rem;
  top: .3rem;
  background-color: #c36919;
  border-radius: 10rem 10rem .8rem .8em;
  box-shadow: 0px -14px 60px 5px rgba(165, 60, 0, 0.4) inset, 0px -5px 30px 0 rgba(165, 60, 0, 0.8) inset, 0px -25px 60px 5px rgba(255, 208, 116, 0.5) inset, 0px 2px 3px 0px rgba(155, 85, 0, .1)
}

.sesame-l {
  width: 4.2rem;
  height: 4.2rem;
  margin-top: 2.5rem;
  cursor: pointer;
  border-width: 0px;
  border-color: transparent;
  border-radius: 250px 10px 170px 100px / 170px 10px 250px 100px;
  background-color: #ffeab0;
  transform: scale(0.95, 1) rotate(-10deg);
  box-shadow: 0px -2px 12px 4px rgba(195, 105, 0, 0.5) inset, 1px -4px 12px -2px rgba(195, 105, 0, 0.8) inset, 0px 2px 5px 1px rgba(145, 45, 0, .8);
}

.sesame-c {
  width: 4.2rem;
  height: 4.2rem;
  margin-top: 3rem;
  cursor: pointer;
  border-width: 0px;
  border-color: transparent;
  border-radius: 250px 10px 170px 120px / 170px 10px 250px 120px;
  background-color: #ffeab0;
  transform: scale(0.95, 1) rotate(-45deg);
  box-shadow: 0px -2px 12px 4px rgba(195, 105, 0, 0.5) inset, 10px -8px 15px -9px rgba(195, 105, 0, .8) inset, 0px 2px 5px 1px rgba(145, 45, 0, .8)
}

.sesame-r {
  width: 4.2rem;
  height: 4.2rem;
  margin-top: 2.5rem;
  cursor: pointer;
  border-width: 0px;
  border-color: transparent;
  border-radius: 250px 10px 170px 100px / 170px 10px 250px 100px;
  background-color: #ffeab0;
  transform: scale(0.95, 1) rotate(-80deg);
  box-shadow: 2px -2px 12px 4px rgba(195, 105, 0, 0.5) inset, 6px -2px 12px -3px rgba(195, 105, 0, 0.8) inset, -2px 2px 5px 1px rgba(145, 45, 0, .8);
}

.sesame-l svg {
  margin: .8rem .6rem 0 0;
  font-size: 1.5rem;
  color: #642d00;
  transform: scale(0.95, 1) rotate(10deg);
}

.sesame-c svg {
  margin: 1rem .8rem 0 0;
  font-size: 1.5rem;
  color: #642d00;
  transform: scale(0.95, 1) rotate(80deg);
}

.sesame-r svg {
  margin: 1rem 1rem 0 0;
  font-size: 1.6rem;
  color: #642d00;
  transform: scale(0.95, 1) rotate(80deg);
}

.sesame-l:focus svg,
.sesame-l.active svg,
.sesame-c:focus svg,
.sesame-c.active svg,
.sesame-r:focus svg,
.sesame-r.active svg {
  color: #ffbb00;
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
}

.sesame-l:hover,
.sesame-l.active,
.sesame-l:focus {
  margin-top: 2.2rem;
  box-shadow: 0px -2px 12px 4px rgba(195, 105, 0, 0.5) inset, 1px -4px 12px -2px rgba(195, 105, 0, .8) inset, 1px 8px 16px 2px rgba(145, 45, 0, .3);
  transition: .3s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
}

.sesame-c:hover,
.sesame-c.active,
.sesame-c:focus {
  margin-top: 2.7rem;
  box-shadow: 0px -2px 12px 4px rgba(195, 105, 0, 0.5) inset, 10px -8px 15px -9px rgba(195, 105, 0, 0.8) inset, -4px 8px 16px 2px rgba(145, 45, 0, .3);
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
}

.sesame-r:hover,
.sesame-r.active,
.sesame-r:focus {
  margin-top: 2.2rem;
  box-shadow: 2px -2px 12px 4px rgba(195, 105, 0, 0.5) inset, 6px -2px 12px -3px rgba(195, 105, 0, 0.8) inset, -10px 4px 16px 2px rgba(145, 45, 0, .3);
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
}

button+button {
  margin-left: 1rem;
}

.courses .mix-target {
  display: none;
}

/*------------------ main ------------------*/

#main {
  padding: 1.8rem 1.5rem .2rem 1.5rem;
  margin: 0 .5rem 0 .5rem;
  background-color: #ffefc0;
  box-shadow: 0 20px 10px -13px #7e3b00ba inset, 0 -13px 8px -13px #7e3b00bf inset, 1px 1px 5px 1px rgba(55, 20, 0, 0.2);
}

.fa-star,
.fa-circle {
  cursor: pointer;
  color: #642d00;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.card {
  margin-bottom: 1.2rem;
  border: none;
  border-bottom: 3px solid #642d00;
  border-radius: .25rem .25rem 0 0;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.card-header {
  padding: .6rem .7rem .6rem .7rem;
  background-color: rgba(255, 185, 0, 0.5);
  border-bottom: 1px solid #642d00;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.card-header a {
  font-size: 1.2rem;
  color: #642d00;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.card-header p {
  margin-bottom: 0;
  font-size: .5rem;
  color: rgba(195, 100, 0, 0.8);
  margin-left: 1.5rem;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.card-header svg {
  margin-left: .3rem;
}

.fa-circle,
.fa-check-circle,
.fa-star {
  font-size: 1rem;
}

.star-btn {
  float: right;
}

.done {
  border-bottom: 3px solid #fff;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.done-header {
  border-bottom: 1px solid #fff;
  background-color: #28a745 !important;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.done-header a,
.done-header p,
.done-header svg {
  text-decoration: line-through;
  color: rgba(255, 255, 255, .5);
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.stared {
  border-bottom: 3px solid #fff;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.stared-header {
  border-bottom: 1px solid #fff;
  background-color: #dc3545;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.stared-header a,
.stared-header p,
.stared-header svg {
  color: #fff;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.card-body {
  padding: 1.25rem 2rem;
  color: #642d00;
  background-color: rgba(255, 185, 0, 0.05);
}

/*------------------ add task ------------------*/

.add-todo .card-header {
  padding: .6rem 1rem .6rem 1rem;
  border-bottom: 1px solid #ffbb00;
  background-color: rgba(255, 185, 0, .1);
}

.add-todo {
  border-bottom: 3px solid #ffbb00;
}

.task-title {
  width: 80%;
  margin-top: .2rem;
  margin-left: .2rem;
  color: rgba(255, 187, 0, 0.4);
}

.add-todo p {
  display: inline;
  margin-left: .2rem;
  font-size: 1.2rem;
  color: #ffbb00;
}

.add-todo span .fa-plus {
  float: right;
  margin: .3rem .2rem 0 .2rem;
  font-size: 1.2rem;
  color: #ffbb00;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.add-todo:hover span .fa-plus {
  opacity: .4;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.add-todo:hover,
.add-todo .collapse.show {
  box-shadow: 0px 10px 8px -5px rgba(150, 50, 0, .14);
}

.add-todo label {
  display: inline;
}

input[placeholder],
[placeholder],
[placeholder]:focus {
  color: #642d00;
}

.gj-datepicker-bootstrap [role=right-icon] button {
  color: #fff;
  border: 1px solid #ffbb00;
  background-color: #ffbb00;
}

.gj-datepicker-bootstrap [role=right-icon] button:hover {
  color: #ffbb00;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active {
  color: #fff;
  border: 1px solid #ffbb00;
  background-color: #ffbb00;
}

.gj-modal {
  background-color: #ffbb00;
}

.gj-picker-bootstrap div[role="navigator"] {
  color: #ffbb00;
}

.gj-picker-bootstrap tr[role="week-days"] {
  color: #999;
}

.form-control {
  border: 1px solid #ffbb00;
}

.form-control-file {
  display: none;
}

.fa-plus-square {
  margin-left: 1.5rem;
  color: #ffbb00;
  cursor: pointer;
}

.fa-plus-square:hover {
  opacity: .6;
}

.cancel {
  margin-top: 1rem;
  color: #dc3545;
}

.addTask {
  margin-top: 1rem;
  color: #28a745;
}

.cancel:hover,
.addTask:hover {
  opacity: .4;
}

/*------------------ edit-delete ------------------*/

#edit-delete {
  top: 1.5rem;
  margin-top: -2.2rem;
  padding: 0;
}

.edit {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: .5rem;
  color: #ffeab0;
  border-radius: 50%;
  background-color: #ffeab0;
  box-shadow: 0px -6px 15px 1px rgba(195, 105, 0, .4) inset, -1px -4px 7px -2px rgba(195, 105, 0, .8) inset, 0px 3px 8px 0px rgba(145, 45, 0, .8);
}

.delete {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: .5rem;
  color: #dc3545;
  border-radius: 50%;
  background-color: #ffeab0;
  box-shadow: 0px -6px 15px 1px rgba(195, 105, 0, .4) inset, -1px -4px 7px -2px rgba(195, 105, 0, .8) inset, 0px 3px 8px 0px rgba(145, 45, 0, .8);
}

.edit svg,
.delete svg {
  margin-left: .1rem;
  font-size: 1.2rem;
  color: #642d00;
}

.edit:hover,
.delete:hover {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: .3rem;
  box-shadow: 0px -6px 15px 1px rgba(195, 105, 0, .4) inset, 0px -4px 6px -2px rgba(195, 105, 0, .8) inset, 0px 3px 8px 0px rgba(145, 45, 0, .5), 0px 10px 10px 2px rgba(145, 45, 0, .3);
}

.edit:focus svg,
.delete:focus svg {
  color: #ffbb00;
}

/*------------------ footer ------------------*/

#footer {
  height: 3rem;
  background-color: #c36919;
  border-radius: .8rem .8em 3rem 3rem;
  box-shadow: 0px -3px 20px 3px rgba(165, 60, 0, 0.5) inset, 0px -7px 30px -2px rgba(165, 60, 0, 0.8) inset, 0px 12px 40px 5px rgba(255, 208, 116, 0.5) inset, 1px 1px 5px 1px rgba(55, 20, 0, 0.2)
}

#copyright {
  margin-top: 1rem;
  text-align: center;
  font-size: .8rem;
  color: rgba(195, 105, 25, .4);
}

#copyright p {
  margin-bottom: 0rem;
}

.copyright_lines {
  display: none;
}

/*------------------------------------ max-width: 575.98px ------------------------------------*/

@media (max-width: 575.98px) {
  body {
    padding: 1rem .05rem 1rem .05rem;
  }
  .container {
    padding-right: 0;
    padding-left: 0;
  }
  /*------------------ header ------------------*/
  #header {
    height: 8.5rem;
  }
  .sesame-l,
  .sesame-r {
    margin-top: 2rem;
  }
  .sesame-c {
    margin-top: 2.6rem;
  }
  button+button {
    margin-left: 1rem;
  }
  /*------------------ main ------------------*/
  #main {
    padding: 1.5rem 1rem .2rem 1rem;
  }
  .card-header {
    padding: .6rem .5rem .6rem .5rem;
  }
  .card-header a {
    margin-left: 0rem;
    font-size: 1.5rem;
  }
  .card-header p {
    font-size: .9rem;
    margin-left: 1.8rem;
  }
  .fa-circle,
  .fa-check-circle,
  .fa-star {
    font-size: 1.3rem;
  }
  .star-btn {
    padding-right: .2rem;
  }
  .add-todo .card-header {
    padding: .6rem .8rem .7rem .8rem;
  }
  .add-todo span .fa-plus {
    margin: .3rem 0rem 0 .2rem;
    font-size: 1rem;
  }
  .card-body {
    padding: 1.25rem 1.5rem;
    background-color: rgba(255, 185, 0, 0.05);
  }
  /*------------------ footer ------------------*/
  .copyright_line {
    display: none;
  }
  .copyright_lines {
    display: block;
  }
}

/*------------------------------------ max-width: 320.98px ------------------------------------*/

@media (max-width: 320.98px) {
  #header {
    height: 7.5rem;
  }
  .sesame-l,
  .sesame-r {
    width: 3.6rem;
    height: 3.6rem;
    margin-top: 1.6rem;
  }
  .sesame-c {
    width: 3.6rem;
    height: 3.6rem;
    margin-top: 2.2rem;
  }
  .sesame-l.active,
  .sesame-l:hover,
  .sesame-l:focus,
  .sesame-r:hover,
  .sesame-r.active,
  .sesame-r:focus {
    margin-top: 1.7rem;
  }
  .sesame-c:hover,
  .sesame-c.active,
  .sesame-c:focus {
    margin-top: 2.3rem;
  }
  button+button {
    margin-left: 1.2rem;
  }
  button+button {
    margin-left: 0;
  }
  /*------------------ main ------------------*/
  .cancel {
    padding-right: 0px;
    padding-left: 0px;
    margin-top: .5rem;
    font-size: .8rem;
  }
  .addTask {
    padding-right: 0px;
    padding-left: 0px;
    margin-top: .5rem;
    font-size: .8rem;
  }
  .edit,
  .delete {
    width: 2.3rem;
    height: 2.3rem;
    margin-left: .8rem;
  }
  .edit:hover,
  .delete:hover {
    width: 2.4rem;
    height: 2.4rem;
  }
  .edit svg,
  .delete svg {
    margin-left: 0rem;
    font-size: 1.1rem;
  }
}