:root {
    --colorBlue: #9FD9CB;
    --colorBox1: #FAA095;
    --colorBox2: #CA305E;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: aliceblue;
}

h1 {
    padding-bottom: 0;
}

.outer-box {
    border: 1px solid black;
    width: 400px;
    height: 400px;
    position: relative;
}

section {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
}


.small-box {
    width: 300px;
    height: 300px;
    background-color: var(--colorBlue);
}

.sliders {
    display: flex;
    flex-flow: column;
    width: 33%;
    text-align: left;
    box-sizing: border-box;
    padding-left: 2em;
}

.slider {
    display: flex;
    flex-flow: column;
}

.big {
    font-size: 175%;
    padding-bottom: 0.5em;
}


.smallest-box {
    width: 150px;
    height: 150px;
    font-size: 5em;
    text-align: center;
}

.smallest-box#box1 {
    background-color: var(--colorBox1);
}

.smallest-box#box2 {
    background-color: var(--colorBox2);
}

.css-output {
    width: 33%;
    text-align: right;
    box-sizing: border-box;
    padding-right: 2em;
    padding-left: 2em;
}

.box1-title {
    color: var(--colorBox1);
    font-size: 1.5em;
}

.box2-title {
    color: var(--colorBox2);
    font-size: 1.5em;
}

.result-list {
    list-style: none;
}

header {
    top: 5em;
    text-align: center;
}

.box {
    border-radius: 10px;
}

.big-title {
    font-size: 2.5em;
    color: var(--colorBlue);
}

.z-slider-title {
    border-top: 0.1em var(--colorBlue) solid;
    font-size: 200%;
    margin-right: 1em;
    padding-top: 0.5em;
}

.output {
    background-color: lightgray;
}

.description {
    margin-top: 0;
    margin-bottom: 1em;
    font-style: italic;
}

.output-title {
    margin-bottom: 1em;
}

code {
    border-radius: 5%;
    border: 1px lightgrey solid;
    padding: .2em;
}