:root {
    --Uluru: #ce5127;
    --UluruLight: #e98a70;
    --SeaBlue: #27a2cc;
    --SeaBlueLight: #86cfe4;
    --Sand: #f9f4f2;
    --Graphite: #4b4b4b
}

*, *::after, *::before {
    box-sizing: border-box
}

/* TODO 1 + 3 grid with and others with 4 views */

.iconoblast {
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    margin: auto;
    width: 100vmin
}

.view {
    background: var(--SeaBlueLight);
    border: 1px solid #b0e0ed;
    height: auto;
    width: 100%
}

.view:hover {
    background: var(--SeaBlue);
}


/* TODO axis colors less saturated */

.x {
    stroke: #d44;
    stroke-width: 3px
}

.y {
    stroke: #0b0;
    stroke-width: 3px
}

.z {
    stroke: #66d;
    stroke-width: 3px
}