$midnight: #2c3e50;
\n$clouds: #ecf0f1;
\n\/\/ General
\nbody {
\n color: $midnight;
\n background: $clouds;
\n padding: 0 1em 1em;
\n}
\nh1 {
\n margin: 0;
\n line-height: 2;
\n text-align: center;
\n}
\nh2 {
\n margin: 0 0 .5em;
\n font-weight: normal;
\n}
\ninput {
\n position: absolute;
\n opacity: 0;
\n z-index: -1;
\n}
\n\/\/ Layout
\n.row {
\n display:flex;
\n .col {
\n flex:1;
\n &:last-child {
\n margin-left: 1em;
\n }
\n }
\n}
\n\/* Accordion styles *\/
\n.tabs {
\n border-radius: 8px;
\n overflow: hidden;
\n box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);
\n}
\n.tab {
\n width: 100%;
\n color: white;
\n overflow: hidden;
\n &-label {
\n display: flex;
\n justify-content: space-between;
\n padding: 1em;
\n background: $midnight;
\n font-weight: bold;
\n cursor: pointer;
\n \/* Icon *\/
\n &:hover {
\n background: darken($midnight, 10%);
\n }
\n &::after {
\n content: “\\276F”;
\n width: 1em;
\n height: 1em;
\n text-align: center;
\n transition: all .35s;
\n }
\n }
\n &-content {
\n max-height: 0;
\n padding: 0 1em;
\n color: $midnight;
\n background: white;
\n transition: all .35s;
\n }
\n &-close {
\n display: flex;
\n justify-content: flex-end;
\n padding: 1em;
\n font-size: 0.75em;
\n background: $midnight;
\n cursor: pointer;
\n &:hover {
\n background: darken($midnight, 10%);
\n }
\n }
\n}<\/p>\n
\/\/ :checked
\ninput:checked {
\n + .tab-label {
\n background: darken($midnight, 10%);
\n &::after {
\n transform: rotate(90deg);
\n }
\n }
\n ~ .tab-content {
\n max-height: 100vh;
\n padding: 1em;
\n }
\n}<\/p>\n