vizchange-animation-story/css/browning_evidence.css

beta testing story tool for vizchange.net

body {
    background-color: #b3ced6;
}

.plot {
    left: var(--left-margin);
    position: fixed!important;
    height: 100vh!important;
    max-height: var(--max-height);
    width: 960px;
    top: var(--margin-top-height)!important;
    object-fit: cover!important;
    z-index: 3500;

}

.viz-lake-break {
    position: relative;

    width: 960px;
    height: 540px;

    top: 111px;
    left: calc((var(--left-margin-not-zero) + 960px) * 0.2753);

    transform-origin: top left;
    transform: skew(-60deg,30deg) scale(.273);
    transition: width 2s, height 2s, background-color 2s, transform 2s;

}
.viz-lake-thick {
    position: relative;

    width: 960px;
    height: 540px;

    top: 222px;
    left: calc((var(--left-margin-not-zero) + 960px) * 0.08);

    transform-origin: top left;
    transform: skew(0, 30deg) scale(.273);
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.viz-lake-thick:hover {
    transform: scale(.9) translate(-20%, -20%);
}

.viz-lake-thick:hover .highcharts-background {
    opacity: .9;
}
.highcharts-background {
    transition: opacity 1s;
    opacity: 0.1;
}

.highcharts-container  {
    width: fit-content!important;
    height: fit-content!important;
}
.highcharts-container * {
    position:fixed;
}
.highcharts-exporting-group {
    visibility: hidden;
}