body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
}

h1 { 
  font-size:2rem;
  color:#444444;
}

p {
  font-size: 1.5rem;
}

#intro {
  height: 100vh;
}
#intro-1 {
  height:8%;
}
#intro-2 {
  height:26%;
  max-width:600px;
  margin:auto;
}
#intro-3 {
  height:42%;
  display: flex;
  justify-content: center;
}
#intro-4 {
  height:24%;
  display:flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 800px) {
  /* Apply smaller font size */
  h1 {
    font-size: 1.4rem;
  }
  p {
    font-size: 1rem;
  }
  .step-header {
    font-size: 1.2rem;
  }
  #intro-1 {
    height:0%;
  }
  #intro-2 {
    height:38%;
  }
}


.scroll {
  margin-top:5px;
  text-align:center;
}

.scroll p {
  margin-bottom:0;
  color:#444444;
}

.scroll-down {
  margin:0 auto 0;
}

@keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        20%  { transform: scale(1,1) translateY(0); }
        30%  { transform: scale(1,1.05) translateY(3px); }
        40%  { transform: scale(1,1) translateY(0); }
        100% { transform: scale(1,1) translateY(0); }
    }

.bounce {
  animation-name: bounce;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

#scrolly {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* border: 1px dashed darkred; */
  /* background-color: #f3f3f3; */
  padding: 1rem;
}

#scrolly>* {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}



article {
  position: relative;
  padding: 0 1rem;
  max-width:40%;
}

#article-steps {
  margin-top:200px;
  max-width: 420px; /* Max width for the text */
  margin-left:auto;
  margin-right:0;
}

figure {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  margin: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 0;
}

.step {
  min-height:250px;
  height: auto;
  margin: auto;
  padding: 0;
  color: #3b3b3b; 
}

.step p {
  text-align: left;
  color:#444444;
}

.step-header {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0;
  padding-bottom: 0;
}

.step-header-hr {
  margin-top: 0;
  margin-bottom: 0px;
  border: 2px solid;
  border-radius: 1px;
  padding: 0;
}


.consumption-area {
  z-index: -1; 
}

.coal {
  color: #685037;
  font-weight: bold;
}
.oil {
  color: #000000;
  font-weight: bold;
}
.gas {
  color: #5C85A4;
  font-weight: bold;
}
.ff-other {
  color: #989898;
  font-weight: bold;
}

.underlineRegion {
  text-decoration-thickness: 0 /* 0.15em;  */
  /* text-decoration: underline; */
}

.underlineEU27 {
  text-decoration-color: #377EB8;
}
.underlineUSA {
  
  text-decoration-color: #B69121;
}
.underlineIndia {
  
  text-decoration-color: #138808;
}
.underlineChina {
  
  text-decoration-color: #E41A1C;
}
.underlineBunker {
  
  text-decoration-color: #0033CC;
}
.underlineRoW {
  
  text-decoration-color: #3E3E3E;
}
.underlineAustralia {
  
  text-decoration-color: #00008B;
}
.underlineUAE {
  
  text-decoration-color: #00732F;
}
.underlineCanada {
  
  text-decoration-color: #FF0000;
}
.underlineSaudiArabia {
  
  text-decoration-color: #006C35;
}
.underlineUK {
  
  text-decoration-color: #00247D;
}
.underlineRussia {
  
  text-decoration-color: #0033A0;
}
.underlineJapan {
  
  text-decoration-color: #BC002D;
}
.underlineAfrica {
  
  text-decoration-color: #008000;
}
.underlineSouthAmerica {
  
  text-decoration-color: #FFD700;
}
.underlineGlobal {
  
  text-decoration-color: #787878;
}