.equal-size .left {
    width: 50%;
    float: left;
}

.equal-size .right {
    width: 50%;
    float: right;
}

/* Fixing aspect ratios of the Visualisations */

.vis-aspect {
    position: relative;
}

.vis-aspect:before {
    display: block;
    content: "";
    width: 100%;
}

.vis-aspect > .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.tall.vis-aspect {
    /* The aspect ratio of this element
     * should be 2:3, but since the 
     * padding-top will be a percentage
     * of the full width (not the 50%),
     * the padding-top should be half
     * of its actual value = 1/2 * 3/2
     */
    padding-top: 75%;
}

.long.vis-aspect {
    padding-top: 33.33%;
}

svg {
    max-width: 100%;
}

.area-chart {
    shape-rendering: crispEdges;
}

.axis path, .axis line {
    fill: none;
    stroke: #777;
    /* shape-rendering: crispEdges; */
}

.red-queen-icon {
    max-width: 64px;
    float: left;
}

.red-queen-icon + h1 {
    margin-top: 0px;
}

.memorize, .red-queen {
    font-variant: small-caps !important;
    text-transform: none !important;
}

.small.pure-button {
    font-size: 70%;
}

.button-play {
    color: #eee;
    /* background: rgb(28, 184, 65); /* this is a green */
    background: #333;
}

.button-stop {
    color: #eee;
    font-size: 70%;
    /* background: rgb(202, 60, 60); /* this is a maroon */
    background: #333;
}

.centered {
    text-align: center;
}

.full-width {
    width: 100%;
}

.other {
    color: RGB(74, 179, 193);
}

.us {
    color: RGB(239, 168, 86);
}

.banner text, .label text, .tick text {
    font-size: 75%;
}

@media (max-width: 760px) {
    section > ul, section > ol {
        width: 85%; /* Addressing bug #111 in tufte-css */
    }
}

.metric-control {
    display: flex;
    justify-content: space-around;
}

.metric-control .option {
    display: flex;
    align-items: center;
}

.metric-control .disabled {
    opacity: 0.5;
}

.small-font {
    font-size: 75%;
}

.width-50 {
  width: 50%;
}

.width-33 {
  width: 33%;
}

img.centered {
    display: block;
    margin: auto;
}

.width-75 {
  width: 75%;
}


