body.inframe {
    overflow: hidden;
}

.intro p {
    height: 17.66rem;
    overflow-y: auto;
}

.content {
    padding-bottom: 0;
}

.main > .budget {
    margin-top: 2.1rem;
    min-height: 56.2rem;
    width: 13.6rem;
}

.main > .budget .figure {
    top: -2.1rem;
    bottom: auto;
}

.main > .budget label {
    min-width: 53.4rem;
    font-size: 2.42rem;
    left: 11.4rem;
    text-align: center;
}

.main > .budget .bar, .main > .budget .bar-base {
    font-size: 1.3em; /* has to be em to resize the coins */
    width: 8.3rem;
    height: 1.659rem;
}

.main > .budget .bar {
    height: 3.734rem;
}

.services {
    padding-top: 0;
    margin-left: 14.6rem;
}

.service {
    margin-top: 2.8rem;
}

.service:first-child {
    margin-top: 2.1rem;
}

.service > .budget label, .service > .budget .figure {
    position: absolute;
    top: -2.6rem;
}

.service > .budget label {
    left: 0;
}

.service > .budget .figure {
    display: block;
    right: 0;
}

.service > .budget .slider {
    left: 1.3rem;
    width: auto;
}

.impacts {
    margin-left: 1.6rem;
}

.impacts ul {
    position: relative;
    overflow-x: hidden;
    padding-left: 1.8rem;
}

.impacts li {
    margin-bottom: 0.5rem;
    position: relative;
    animation: slide-in 1s ease-in-out;
}

.impacts li:last-child {
    margin-bottom: 0;
}

.impacts li::before {
    content: "✗";
    position: absolute;
    left: -1.8rem;
    top: calc(50% - 1rem);
}

.impacts li.positive::before {
    content: "✓";
}

@keyframes slide-in {
    0% {
        left: 200rem;
    }

    100% {
        left: 0;
    }
}