body {
    background-color: black;
}

article.accordion {
    display: block;
    width: 43em;
    margin: 9rem auto;
    background-color: #666666;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

article.accordion section {
    position: relative;
    display: block;
    float: left;
    width: 2em;
    height: 12em;
    margin: 0.5em 0 0.5em 0.5em;
    color: #333333;
    background-color: #333333;
    overflow: hidden;
    border-radius: 3px;
}

article.accordion section h2 {
    position: absolute;
    font-size: 1em;
    font-weight: bold;
    width: 12em;
    height: 2em;
    top: 12em;
    left: 0;
    text-indent: 1em;
    padding: 0;
    margin: 0;
    color: #dddddd;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

article.accordion section h2 a {
    display: block;
    width: 100%;
    line-height: 2em;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}

article.accordion section:target {
    width: 30em;
    padding: 0 1em;
    color: #333333;
    background-color: #ffffff;
}

article.accordion section:target h2 {
    position: static;
    font-size: 1.3em;
    text-indent: 0;
    color: #333333;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

article.accordion section,
article.accordion section h2 {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}