/* OCARINA */

.ocarina {
    display: block;
    /* max-width: 600px; */
    height: 100%;
    width: 100%;
}

.ocarina__background-1 {
    fill: var(--red);
    stroke: var(--black);
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-width: var(--stroke-width);
    vector-effect: non-scaling-stroke;
}

.is-room-2 .ocarina__background-1 {
    fill: var(--blue);
}

.ocarina__background-2 {
    fill: var(--black);
    stroke: var(--black);
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-width: var(--stroke-width);
    vector-effect: non-scaling-stroke;
}

.ocarina__background-2.is-closed {
    /* fill: var(--red); */
    fill: #fff;
}

.ocarina__background-2.is-advice {
    fill: var(--grey);
    /* fill: linear-gradient(90deg, purple, yellow); */
}

.ocarina__stroke {
    fill: none;
    stroke: var(--black);
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-width: var(--stroke-width);
    vector-effect: non-scaling-stroke;
}


@media screen and (min-width: 1024px) {

    .ocarina {
        display: flex;
    }

}