/* https://coolors.co/c97064-bca371-a6b07e-68a357-32965d */
/* #c97064 #bca371 #a6b07e #68a357 #32965d
                   #e9e0cf
 */

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

table td.yesterday, table th.yesterday {
  background: #ffffde;
}

table td.today, table th.today {
  background: #ecf3d0;
}

table td.repeat2, table th.repeat2 {
  background: #e1dced;
}

table td.repeat3, table th.repeat3 {
  background: #e6eaf1;
}

table td.repeat4, table th.repeat4 {
  background: #f1e6e9;
}

body {
  background: #bca371;
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Great Vibes', cursive;
  font-size: 40px;
  font-weight: 100;
  color: white;
  text-align: center;
}

div.container {
  margin: 0px 20px 0px 20px;
  background: #e9e0cf;
  padding: 20px;
}

div.container.header {
  background: #c97064;
}

div.container.footer {
  margin-top: 0px;
  background: #a6b07e;
  text-align: center;
}

div#result {
  background: #FFF;
  padding: 10px;
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #CCC;
  text-align: left;
}

table th, table td {
  padding: 2px 10px;
}

div#form-container div {
  margin-bottom: 20px;
}

div#form-container span {
  display: inline-block;
  min-width: 150px;
}

button {
  padding: 10px;
  border: none;
  cursor: pointer;
}

button#generate {
  background: #c97064;
  color: white;
}

button#export {
  background: #32965d;
  color: white;
}

@media screen and ( max-width: 600px ) {
  table {
    border: none;
    max-width: calc(100% - 20px);
  }

  table tr td,
  table tr th {
    width: 100%;
    float: left;
    border: none;
  }

  table tr {
    border-bottom: 1px solid #ddd;
  }

  div#form-container div span,
  div#form-container div input[type=number],
  div#form-container div input[type=date],
  div#form-container div select {
    width: 100%;
  }

  div#form-container div select {
    margin-bottom: 10px;
  }

  button {
    width: 100%;
    margin: 5px 0px 5px 0px;
  }
}