/* The Magic */
.accordion:hover .accordion-item:hover .accordion-item-content,
.accordion .accordion-item--default .accordion-item-content {
height: 6em;
}
.accordion-item-content,
.accordion:hover .accordion-item-content {
height: 0;
overflow: hidden;
-webkit-transition: height .25s;
transition: height .25s;
}
/* Aesthetic */
body {
background: #222;
}
.accordion {
padding: 0;
margin: 0 auto;
width: 20%;
font-family: "PT Sans" sans-serif
}
.accordion .accordion-item {
background-image: -webkit-gradient(linear, left top, right top, from(#eee), color-stop(#f5f5f5), to(#eee));
background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
border-bottom: 1px solid #666;
padding: 1em;
color: #eee;
}
.accordion h1 {
margin: 0;
}
.accordion .accordion-item:nth-child(1) {
background-color: hsl(200, 80%, 60%);
background-image: -webkit-gradient(linear, right top, left top, from(hsl(200, 80%, 60%)), color-stop(2em, hsl(200, 80%, 45%)), to(hsl(200, 80%, 60%)));
background-image: linear-gradient(-90deg, hsl(200, 80%, 60%), hsl(200, 80%, 45%) 2em, hsl(200, 80%, 60%));
}
.accordion .accordion-item:nth-child(2) {
background-color: hsl(280, 60%, 45%);
background-image: -webkit-gradient(linear, right top, left top, from(hsl(280, 80%, 60%)), color-stop(2em, hsl(280, 60%, 45%)), to(hsl(280, 80%, 60%)));
background-image: linear-gradient(-90deg, hsl(280, 80%, 60%), hsl(280, 60%, 45%) 2em, hsl(280, 80%, 60%));
}
.accordion .accordion-item:nth-child(3) {
background-color: hsl(40, 80%, 40%);
background-image: -webkit-gradient(linear, right top, left top, from(hsl(40, 80%, 60%)), color-stop(2em, hsl(40, 80%, 45%)), to(hsl(40, 80%, 60%)));
background-image: linear-gradient(-90deg, hsl(40, 80%, 60%), hsl(40, 80%, 45%) 2em, hsl(40, 80%, 60%));
}
.accordion .accordion-item:nth-child(4) {
background-color: hsl(80, 40%, 40%);
background-image: -webkit-gradient(linear, right top, left top, from(hsl(80, 80%, 40%)), color-stop(2em, hsl(80, 80%, 35%)), to(hsl(80, 80%, 40%)));
background-image: linear-gradient(-90deg, hsl(80, 80%, 40%), hsl(80, 80%, 35%) 2em, hsl(80, 80%, 40%));
}