/* DONT NEEDED */
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather', serif;
  -webkit-font-smoothing: subpixel-antialiased;
}
html { min-height:100vh;}
body {background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);}

.wrapper {
  display: table;
  width: 100vw;
  height: 100vh;
}

.content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul {
  margin-top: 7em;
  list-style-type: none;
}

li { margin-top: 7em; }

a, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

h2 {
  color: #fff;
  background-color: #eb2019;
  padding: .5em 0;
}

/* CHECKBOX */

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
  position: relative;
  padding-left: 4em;
  padding-top: .25em;
  cursor: pointer;
}

[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
  content: '';
  position: absolute;
  height: 1.5em;
  transition: all .5s ease;
}

[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
  left: 0;
  top: 0;
  width: 3em;
  border: 2px solid #dddddd;
  background: #dddddd;
  border-radius: 1.1em;
  z-index: -1;
}

[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
  left: .15em;
  top: .125em;
  background-color: #fff;
  border-radius: 50%;
  width: 1.5em;
}

[type="checkbox"]:checked + label:after { left: 1.65em; }

[type="checkbox"]:checked + label:before {
  background-color: #72da67;
  border-color: #72da67;
}