html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    background-color: #F1F0E8;
    color: black;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

body {
    overflow-y: hidden;
    max-width: 2000px;
    margin: 0 auto;

    padding-left: 50px;
}

#sections {
    position: relative;
    display: inline-block;
    width: 500px;
    top: 60px;
    z-index: 90;
    margin-right: 50px;
}

.step {
    margin-bottom: 100px;
    width: 600px;
    height: 1000px;
    font-weight: 400;
    line-height: 1.4em;
    text-align: justify;
}

h1, h2 {
    font-weight: bold;
    text-align: right;
    line-height: 32px;
}

h1 {
    font-size: 35px;
}

h3 {
    font-size: 40px;
    text-align: right;
    line-height: 1.2;
    margin-top: 0;
}

p {
    font-size: 20px;
    line-height: 1.3em;
}

#graphic {
    width: 100vw;
}

#vis {
    position: fixed;
    top: 0;
    right: 0;

    height: 100vh;
    width: 60vw;

    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

#vis svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trade-link, .trade-link-circle, .trade-link-circle-norandom {
    pointer-events: none;
}

.tick line {
    stroke: 'red'
}

.gridlines line {
  stroke: #bbb;
}

.gridlines .domain {
  stroke: none;
}

#GermanEnergy {
    z-index: 5;
}
#RussianEnergy {
    z-index: 5;
}

.tooltip {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100;
}

.hovered-legend {
    cursor: pointer;
    filter: drop-shadow(0 0 3px rgba(43, 43, 43, 0.6));
    stroke-width: 2px;
}

#mass-line-chart-container {
    display: grid;
    place-items: start;
    width: max-content;
}

#mass-line-chart-container svg {
    grid-area: 1 / 1;
}

div#bounding-box {
    width: 600px;
    height: 500px;
}

.selected-country, .hovered-country {
    cursor: pointer;
}

.hovered-country {
    opacity: 0.6 !important;
    transition: all 0.5s
}

div.chart-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

div.legend-div {
    width: 200px;
}

div.chart-svg-container {
    display: flex;
    flex-direction: column;
}


div.line-header {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;

    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: right;
}

div.line-header * {
    margin: 0;
}

#warning-text {
    margin-top: 50px;
    font-family: monospace;
    font-size: 1em;
}

.no-data {
    cursor: not-allowed;
}

#no-exports {
    opacity: 0;
    transition: 0.5s;
}

a {
    text-decoration: none;
    color: #599cb2;
}

a:hover {
    cursor: pointer;
    text-decoration: underline;
}

#githublink-p {
    margin-bottom: 100px;
}

#datasources {
    padding-left: 20px;
}

#last-section {
    height: 700px;
}

.portrait {
    display: none;
}

.landscape {
    display: unset;
}

#crimea-area {
    opacity: 0;
}

.crimea-animation {
    animation-name: blink;
    animation-duration: 3s;
    animation-iteration-count: infinite;

    transition: 1s;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}