:root{--border-radius: 30px;--shadow: 0 10px 20px rgba(0, 0, 0, .2)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%;box-sizing:border-box}body{font-size:1.9rem;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;color:var(--text-color, black)}html,body{height:100%;margin:0;display:flex;flex-direction:column}header{height:10%;background:#fff}main{height:80%;background:var(--background-color);display:flex;justify-content:center;overflow:hidden}footer{height:10%;background:var(--accent-color);color:#fff;font-weight:700;text-align:center;display:flex;justify-content:center;align-items:center}svg{height:100%;width:100%}.draw-line--consumer{animation:drawConsumer 2s ease-out infinite}.draw-line--producer{animation:drawProducer 2s ease-out infinite}@keyframes drawConsumer{0%{stroke-dashoffset:-12}50%{stroke-dashoffset:-12}to{stroke-dashoffset:12}}@keyframes drawProducer{0%{stroke-dashoffset:12}50%{stroke-dashoffset:-12}to{stroke-dashoffset:-12}}@keyframes wiggle{0%{transform:rotate(10deg)}25%{transform:rotate(-10deg)}50%{transform:rotate(20deg)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}@media only screen and (max-width: 75em){html{font-size:50%}}@media only screen and (max-width: 31.25em){html{font-size:45%}}@media only screen and (max-width: 24.38em){html{font-size:40%}}.provider-triangle1,.provider-triangle2,.provider-triangle3,.provider-triangle4,.consumer-triangle1,.consumer-triangle2,.consumer-triangle3,.consumer-triangle4{opacity:0}.provider-triangle1{animation:triangleOpacity1 8s linear infinite}@keyframes triangleOpacity1{0%,50%{opacity:1}51%,to{opacity:0}}.provider-triangle2{animation:triangleOpacity2 8s linear infinite}@keyframes triangleOpacity2{0%,12.5%{opacity:0}13.5%,62.5%{opacity:1}63.5%,to{opacity:0}}.provider-triangle3{animation:triangleOpacity3 8s linear infinite}@keyframes triangleOpacity3{0%,25%{opacity:0}26%,75%{opacity:1}76.5%,to{opacity:0}}.provider-triangle4{animation:triangleOpacity4 8s linear infinite}@keyframes triangleOpacity4{0%,37.5%{opacity:0}38.5%,87.5%{opacity:1}88.5%,to{opacity:0}}.consumer-triangle1{animation:triangleConsumerOpacity1 8s linear infinite}@keyframes triangleConsumerOpacity1{0%,50%{opacity:0}51%,to{opacity:1}}.consumer-triangle2{animation:triangleConsumerOpacity2 8s linear infinite}@keyframes triangleConsumerOpacity2{0%,62.5%{opacity:0}63.5%,to{opacity:1}}.consumer-triangle3{animation:triangleConsumerOpacity3 8s linear infinite}@keyframes triangleConsumerOpacity3{0%,75%{opacity:0}76%,to{opacity:1}}.consumer-triangle4{animation:triangleConsumerOpacity4 8s linear infinite}@keyframes triangleConsumerOpacity4{0%,87.5%{opacity:0}88.5%,to{opacity:1}}