:root {
  --colorMain: #444;
  --colorLight: #999;
  --colorAccent: #ddd;
}

body {
  background: #fef5e5;
  font-family: 'Zilla Slab', serif;
  font-weight: 400;
  text-align: center;
  padding: 20px;
}
h1 {
  font-size: 40px;
  line-height: 1.1;
  width: 70%;
  margin: 40px auto;
  text-transform: uppercase;
}

/*color picker*/
[type="radio"] {
  display: none;
}
label {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #f9f9f9, 0 0 0 3px #ddd;
  cursor: pointer;
}
[type="radio"]:checked + label {
  box-shadow: 0 0 0 2px #f9f9f9, 0 0 0 3px var(--colorMain);
}
#yellow + label {
  background: #FFD94E;
}
#orange + label {
  background: #F2921B;
}
#pink + label {
  background: #FFA1AD;
}
#red + label {
  background: #A4303F;
}
#purple + label {
  background: #8C6796;
}
#blue + label {
  background: #4EBCFF;
}
#green + label {
  background: #AFC97E;
}
#yellow:checked ~ .cards-wrapper, #yellow:checked + label {
  --colorMain: #FFD94E;
  --colorLight: #ffe37e;
  --colorAccent: #ffedae;
}
#orange:checked ~ .cards-wrapper, #orange:checked + label {
  --colorMain: #F2921B;
  --colorLight: #f5af59;
  --colorAccent: #f9cd97;
}
#pink:checked ~ .cards-wrapper, #pink:checked + label {
  --colorMain: #FFA1AD;
  --colorLight: #ffc3ca;
  --colorAccent: #ffdce1;
}
#red:checked ~ .cards-wrapper, #red:checked + label {
  --colorMain: #A4303F;
  --colorLight: #c57b84;
  --colorAccent: #d5a0a7;
}
#purple:checked ~ .cards-wrapper, #purple:checked + label {
  --colorMain: #8C6796;
  --colorLight: #ab90b2;
  --colorAccent: #d5c7d8;
}
#blue:checked ~ .cards-wrapper, #blue:checked + label {
  --colorMain: #4EBCFF;
  --colorLight: #93daff;
  --colorAccent: #ceecff;
}
#green:checked ~ .cards-wrapper, #green:checked + label {
  --colorMain: #AFC97E;
  --colorLight: #c4d7a1;
  --colorAccent: #d3e1b8;
}

/*cards*/
.cards-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 30px;
}
.card {
  flex: 1;
  background: #fff;
  padding: 23px 20px;
  border-radius: 4px;
  margin: 10px;
  position: relative;
  overflow: hidden;
  text-align: left;
  min-width: 200px;
  max-width: 300px;
}
.card:before {
  content: '';
  position: absolute;
  height: 6px;
  width: 100%;
  top: -1px;
  left: 0;
  background: var(--colorMain);
}
.image {
  background: var(--colorLight);
  background: linear-gradient(
    to bottom right,
    var(--colorLight),
    var(--colorAccent)
  );
  width: 100%;
  height: 160px;
  border-radius: 3px;
}
.title {
  margin: 20px 0;
  background: var(--colorMain);
  height: 25px;
  width: 85%;
  border-radius: 20px;
}
.title.with-tag {
  margin: 20px 0 10px;
}
.tag {
  width: 45px;
  height: 10px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 20px;
  background: var(--colorAccent);
}
.divider {
  border-top: 1px solid #eee;
  padding-top: 20px;
}
button {
  border-radius: 30px;
  background: var(--colorMain);
  border: none;
  border: 4px solid var(--colorMain);
  width: 100%;
  padding: 15px;
  text-align: center;
}
button span {
  width: 40%;
  height: 8px;
  background: #fff;
  display: inline-block;
  border-radius: 20px;
}
.paragraph {
  margin: 20px 0;
}
.paragraph p {
  width: 90%;
  background: #ddd;
  height: 15px;
  margin: 0 0 12px;
  border-radius: 20px;
}
.paragraph p:nth-child(2n + 2) {
  width: 80%;
}
.paragraph p:last-child {
  width: 40%;
}