h1 {
  text-align: center;
}

.roadmap {
/*  margin: 20px auto;*/
  display: grid;
/*  grid-gap: 40px;*/
}

.rowGroup {
  margin: 20px auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

.inIcon {
  position: relative;
  top: 5px;
  grid-column: 1 / 3;
  justify-self: start;
  left: 6px;
  grid-row: 1;
}

.sectionTitle {
  position: relative;
  text-align: left;
  grid-column: 1 / -1;
  grid-row: 1;
  left: 35px;
  bottom: 4px; 
  margin-block-start: 0px;
  z-index: 10;
}

@media (max-width: 1000px) {
  .sectionTitle {
    font-size: 1.1em;
    bottom: 0px;
  }
}

.goalText {
  text-align: left;
  left: 5px;
  grid-column: 1/9;
  grid-row: span 2;
  font-size: calc(0.1em + 0.6vw);
  color: white;
  position: relative;
  top: 35px;
}

.gap {
  grid-column: 1/5;
  justify-self: center;
}

.step, .mile, .quant, .track {
  border: 2px solid #1f1d1d;
  border-radius: 5px;
  grid-column: span 2;
  text-align: center;
  width: calc(100% - 5px);
  margin: auto;
  padding-top: 2px;
  padding-bottom: 2px;
  word-wrap: break-word;
  font-size: calc(0.1em + 0.6vw);
  filter: drop-shadow(2px 4px 6px black);
  transition: filter 0.05s, backdrop-filter 0.05s;
}

/*flash color*/
@keyframes fadeReds {
  0%, 100% { background-color: rgb(241, 161, 150); }
  50% { background-color: rgb(89 89 89); }
}

/*flash black progress bar*/
@keyframes fadeBlack {
  0%, 100% { background-color: rgb(30 28 28); }
  50% { background-color: rgb(89 89 89 / 0%); }
}

/*flash black diagram*/
@keyframes fadeBlack2 {
  0%, 100% { background-color: rgb(30 28 28); }
  50% { background-color: rgb(89 89 89); }
}


.step {
  z-index: 1;
  background-color: rgb(89 89 89);
}

.mile {
  padding-top: 0px;
  padding-bottom: 0px;
  height: calc(100% - 4px);
  align-content: center;
  border-radius: 20%;
}

.quant {
  border-image: linear-gradient(to bottom right,
    rgba(184, 39, 252, 1) 0%,
    rgba(44, 144, 252, 1) 25%, 
    rgba(184, 253, 51, 1) 50%, 
    rgba(254, 200, 55, 1) 75%, 
    rgba(253, 24, 146, 1) 100%);
  border-image-slice: 1;
}

.mile, .quant {
  background-color: #00000069;;
}

.track {
  background-color: #7f7f7f;
  border: unset;
  border-radius: unset;
  z-index: 2;
  color: black;
}

.trackGroup {
  background-color: #3b3a3a;
  border-radius: 10px;
}

.trackGroup .track {
  color: white;
  background-color: #3b3a3a;
}

.arrowRight, .arrowLeft, .arrowUp, .arrowDown {
  display: grid;
  align-items: center;
  filter: drop-shadow(2px 4px 6px black);
}

.arrowRight {
  grid-template-columns: 1fr 10px;
  & .lineH, .dashLineH {
    width: calc(100% + 10px);
    height: 50%;
    align-self: end;
  }
}

.arrowLeft {
  grid-template-columns: 10px 1fr;
  & .lineH, .dashLineH {
    width: calc(100% + 10px);
  }
}

.arrowUp {
  grid-template-rows: 10px 1fr;
  margin-top: 1px;
  & .lineV, .dashLineV {
    width: 0px;
    justify-self: center;
    height: calc(100% + 10px);
    margin-top: -10px;
    align-self: start;
  }
}

.arrowDown {
  grid-template-rows: 1fr 10px;
  margin-bottom: 1px;
  & .lineV, .dashLineV {
    width: 0px;
    justify-self: center;
    height: calc(100% + 10px);
    margin-bottom: -10px;
    align-self: end;
  }
}

.arrowR {
  margin-top: -2px;
  align-self: center;
  filter: drop-shadow(2px 4px 6px black)
}

.arrowL {
  transform: rotate(180deg);
  align-self: center;
  filter: drop-shadow(2px 4px 6px black)
}

.arrowU {
  transform: rotate(270deg);
  justify-self: center;
  filter: drop-shadow(2px 4px 6px black)
}

.arrowD {
  transform: rotate(90deg);
  justify-self: center;
  filter: drop-shadow(2px 4px 6px black)
}

.lineH {
  width: 100%;
  border-top: 2px solid white;
  height: 0px;
  align-self: center;
  filter: drop-shadow(2px 4px 6px black)
}

.dashLineH {
  width: 100%;
  border-top: 2px dashed white;
  height: 0px;
  align-self: center;
  filter: drop-shadow(2px 4px 6px black)
}

.lineV {
  height: 100%;
  border-left: 2px solid white;
  filter: drop-shadow(2px 4px 6px black)
}

.dashLineV {
  height: 100%;
  border-left: 2px dashed white;
  filter: drop-shadow(2px 4px 6px black);
  justify-self: center;
}

.wideWidth {
  max-width: unset;
  background: unset;
}

.menggabungkan {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  grid-template-rows: repeat(3, 1fr) 25px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  & .goalText {
    grid-row: 1 / 3;
  }
}

.progress-bar {
  overflow: visible;
  grid-row: -1;
  grid-column: 1 / -1;
  outline: white 2px solid;
}

/*Beacon chain launch*/
#menggabungkanA {
  grid-column: 1 / 5;
  grid-row: 3;
}

#menggabungkan1 {
  grid-column: 5 / 8;
  grid-row: 3;
  width: calc(80% - 1px);
}

#menggabungkan1Arrow {
  grid-column: 5 / 8;
  grid-row: 3;
}


/*Warmup fork (Altair)*/
#menggabungkanB {
  grid-column: 7 / 12;
  grid-row: 3;
  width: 80%;
}

#menggabungkan2{
  grid-column: 11 / 16;
  grid-row: 3;
}

#menggabungkan3 {
  grid-column: 15 / 17;
  grid-row: 3 / 4;
  justify-self: center;
  height: 50%;
}

/*Merge! No more PoW*/
#menggabungkanC {
  grid-column: 14 / 18;
  grid-row: 2;
}

#menggabungkan4 {
  grid-row: 2;
  grid-column: 18 / 20;
  width: 75%;
}

#menggabungkan5 {
  grid-row: 2;
  grid-column: 19 / 20;
  justify-self: end;
  align-self: end;
  height: 50%;
  width: 50%;
}

#menggabungkan6 {
  grid-row: 2;
  grid-column: 19 / 21;
  width: calc(75% + 2px);
  justify-self: end;
  align-self: end;
  margin-bottom: -10px;
}

/*Withdrawals*/
#menggabungkanD {
  grid-column: 21 / 25;
  grid-row: 2 / 4;
  padding-top: 9px;
  padding-bottom: 9px;
}

/*Distributed validators*/
#menggabungkanE {
  grid-column: 21 / 25;
  grid-row: 1 / 3;
}

#menggabungkan7 {
  grid-row: 1 / -1;
  grid-column: 26 / 27;
  justify-self: center;
  margin-top: -10px;
  height: calc(100% + 20px);
}

/*Secret leader election*/
#menggabungkanF {
  grid-column: 28 / 32;
  grid-row: 1 / 3;
}

/*Per-slot participant selection*/
#menggabungkanG {
  grid-row: 2;
  grid-column: 34 / 38;
}

#menggabungkan8 {
  grid-row: 2;
  grid-column: 38 / 42;
}

/*SSF specification*/
#menggabungkanH {
  grid-row: 1;
  grid-column: 37 / 41;
}

#menggabungkan9 {
  grid-row: 1;
  grid-column: 41 / 44;
  align-self: center;
}

#menggabungkan10 {
  grid-row: 1;
  grid-column: 43 / 45;
  align-self: end;
  justify-self: center;
  height:50%;
  & .lineV {
    align-self: end;
  }
}

/*Implmentation*/
#menggabungkanI {
  grid-row: 3;
  grid-column: 37 / 41;
  padding-top: 9px;
  padding-bottom: 9px;
}

#menggabungkan11 {
  grid-row: 3;
  grid-column: 41 / 44;
  align-self: center;
}

#menggabungkan12 {
  grid-row: 3;
  grid-column: 43 / 45;
  align-self: start;
  justify-self: center;
  height:50%;
  & .lineV {
    align-self: start;
  }
}

/*Single slot finality (SSF)*/
#menggabungkanJ {
  grid-row: 2;
  grid-column: 42 / 46;
}

#menggabungkan13 {
  grid-row: 2;
  grid-column: 46 / 48;
  width: 75%;
  align-self: center;
}

#menggabungkan14 {
  height: 50%;
  width: 50%;
  grid-row: 2;
  grid-column: 47 / 48;
  align-self: end;
  justify-self: end;
}

#menggabungkan15 {
  grid-row: 2 / 4;
  grid-column: 47 / 49;
  justify-self: end;
  width: 75%;
}

/*Increase validator count*/
#menggabungkanK {
  grid-row: 2 / 4;
  grid-column: 49 / 53;
}

/*Ideal quantum-safe signatures*/
#menggabungkanL {
  grid-row: 1 / 3;
  grid-column: 49 / 53;
}

.surge {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  grid-template-rows: repeat(5, 1fr) 15px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  & .goalText {
    grid-row: 1 / 3;
  }
}

/*Optimistic rollup fraud provers*/
#surgeA {
  grid-row: 4;
  grid-column: 9 / 41;
  width: 95%;
  height: 16px;
}

/*ZK-EVMs*/
#surgeB {
  grid-row: 5;
  grid-column:9 / 41;
  width: 95%;
  height: 16px;
}

/*EIP-4844 specification*/
#surgeC {
  grid-row: 1 / 3;
  grid-column: 14 / 18;
}

#surge1 {
  grid-column: 18 / 21;
  grid-row: 1 / 3;
}

#surge2 {
  grid-column: 19 / 20;
  grid-row: 1 / -1;
  justify-self: center;
  margin-top: -10px;
  height: calc(100% + 20px);
  z-index: 2;
}

/* track Prototype*/
#surgeTrackA {
  grid-row: 3;
  grid-column: 18 / 21;
  width: 100%;
  padding-top: 9px;
  padding-bottom: 9px;
  z-index: 3;
}

/*EIP-4844 implementation*/
#surgeD {
  grid-row: 1 / 3;
  grid-column: 21 / 25;
}

#surge3 {
  grid-row: 1 / 3;
  grid-column: 25 / 28;
}

/*Basic rollup scaling*/
#surgeE {
  grid-row: 1 / 3;
  grid-column: 28 / 32;
  height: 50%;
}

#surge4 {
  justify-self: center;
  grid-column: 29 / 31;
  grid-row: 2 / 5;
  height: calc(67% + 7px);
  align-self: center;
  margin-bottom: -12px;
  z-index: 2;
}

#surge5 {
  justify-self: center;
  grid-column: 29 / 31;
  grid-row: 5;
  height: 20px;
  align-self: center;
  z-index: 2;
}

/* track Limited training wheels (diverse 6-of-8 or stricter)*/
#surgeTrackB {
  grid-row: 3;
  grid-column: 26 / 34;
  width: 75%;
}

/*peerDAS*/
#surgeF {
  grid-column: 35 / 39;
  grid-row: 1 / 3;
  padding-top: 9px;
  padding-bottom: 9px;
}

/*Efficient DA self-healing*/
#surgeG {
  grid-column: 35 / 39;
  grid-row: 2 / 4;
}

#surge6 {
  grid-column: 39 / 42;
  grid-row: 1 / 3;
}

#surge7 {
  grid-column: 39 / 41;
  width: 75%;
  grid-row: 2 / 4;
  align-self: center;
}

#surge8 {
  grid-column: 40 / 41;
  grid-row: 2;
  justify-self: center;
}

/*Full rollup scaling*/
#surgeH {
  grid-column: 42 / 46;
  grid-row: 1 / 3;
  height: 50%;
}

/*No training wheels*/
#surgeTrackC {
  grid-column: 40 / 44;
  grid-row: 3;
  width: 75%;
}

#surge9 {
  grid-row: 4;
  grid-column: 40 / 44;
  width: 94.5%;
  align-self: center;
  justify-self: end;
}

#surge10 {
  grid-row: 5;
  grid-column: 40 / 44;
  width: 94.5%;
  align-self: center;
  justify-self: end;
}

#surge11 {
  grid-row: 2 / 6;
  grid-column: 43 / 45;
  justify-self: center;
  height: calc(75% - 3px);
  margin-bottom: -3px;
  align-self: center;
}

#surge12 {
  grid-row: 5;
  grid-column: 44 / -1;
  width: calc(100% + 20px);
}

#surge13 {
  position: relative;
  grid-column: -1;
  left: 19px;
  grid-row: 5;
  top: 50%;
  height: calc(50% + 55px);
}

/*Q-sale, no-setup commitments*/
#surgeJ {
  grid-column: 49 / 53;
  grid-row: 1 / 3;
}


/*Improve cross-rollup standards + interop*/
#surgeI {
  grid-column: 49 / 53;
  grid-row: 3;
}


.scourge {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  grid-template-rows: 2fr 1fr 25px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  & .goalText {
    grid-row: 1;
  }
}

/*Track container (MEV track)*/
#scourgeTrackA {
  grid-column: 13 / 53;
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  grid-template-rows: repeat(2, 1fr);
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  margin-right: -5px;
  padding-right: 5px;
  grid-row: 1 / 2;
}

/*MEV track*/
#scourgeTrackAText {
  grid-row: 1;
  grid-column: 2 / 6;
  text-align: left;
  filter: unset;
}

/*Extra-protocol MEV markets*/
#scourgeA {
  grid-column: 2 / 6;
  grid-row: 2;
}

#scourge1 {
  grid-column: 6 / 9;
  grid-row: 2;
}

/*Inclusion lists*/
#scourgeC {
  grid-column: 9 / 13;
  grid-row: 1;
  padding-top: 9px;
  padding-bottom: 9px;
}

#scourge2 {
  grid-column: 13 / 21;
  grid-row: 1;
  align-self: center;
}

#scourge3 {
  grid-column: 20 / 22;
  grid-row: 1 / 2;
  align-self: end;
  height: 50%;
  justify-self: center;
}

#scourge4 {
  grid-column: 21 / 30;
  grid-row: 1 / 3;
}

/*Explore ePBS*/
#scourgeB {
  grid-column: 9 / 13;
  grid-row: 2;
  padding-top: 9px;
  padding-bottom: 9px;
}

#scourge5 {
  grid-column: 13 / 16;
  grid-row: 2;
}

/*Explore MEV burn in ePBS*/
#scourgeD {
  grid-column: 16 / 20;
  grid-row: 2;
}

#scourge6 {
  grid-column: 20;
  grid-row: 2 / 3;
  align-self: center;
}

#scourge7 {
  grid-column: 20 / 22;
  grid-row: 2 / 3;
  align-self: start;
  height: 50%;
  justify-self: center;
}


/*Distributed block building*/
#scourgeE {
  grid-column: 23 / 27;
  grid-row: 1;
}

#scourge8 {
  grid-column: 27 / 29;
  width: 75%;
  grid-row: 1 / 2;
  align-self: center;
}

#scourge9 {
  grid-column: 27 / 30;
  grid-row: 1 / 2;
  align-self: end;
  height: 50%;
  justify-self: center;
}

/*Exsplore execution tickets*/
#scourgeF {
  grid-column: 23 / 27;
  grid-row: 2;
}

#scourge10 {
  grid-column: 27 / 30;
  grid-row: 2 / 3;
  width: 50%;
  align-self: center;
}

#scourge11 {
  grid-column: 27 / 30;
  grid-row: 2 / 3;
  height: 50%;
  justify-self: center;
}

/*Endgame block production <br>pipeline*/
#scourgeG {
  grid-column: 30 / 34;
  grid-row: 1 / 3;
  height: 45%;
}

/*App-layer MEV minimzation*/
#scourgeH {
  grid-column: 37 / 41;
  grid-row: 1;
}

/*Explore preconfimations*/
#scourgeI {
  grid-column: 37 / 41;
  grid-row: 2;
}


/*Track container (Staking economics / experiance track)*/
#scourgeTrackB {
  display: grid;
  grid-template-columns: repeat(34, 1fr);
  grid-column: 13 / 47;
  grid-row: 2;
  margin-top: 3px;
  margin-bottom: 3px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 10px;
}

/*Staking economics / experiance track*/
 #scourgeTrackBText {
  grid-column: 2 / 6;
  text-align: left;
  filter: unset;
 }

/*Raise max effective balance*/
#scourgeJ {
  grid-column: 9 / 13;
}

/*Improve node operator usability*/
#scourgeK {
  grid-column: 16 / 20;
}

/*Explore total stake capping*/
#scourgeL {
  grid-column: 23 / 27;
}

/*Explore solutions to liquid staking centralization*/
#scourgeM {
  grid-column: 30 / 34;
}

#scourge12 {
  grid-column: 19 / 20;
  grid-row: 1 / -1;
  justify-self: center;
  margin-top: -10px;
  height: calc(100% + 20px);
}

#scourge13 {
  grid-row: 1 / -1;
  grid-column: 1;
}

#scourge14 {
  height: calc(100% + 21px);
  margin-top: -16px;
  grid-row: 3 / 5;
  grid-column: 29 / 31;
  justify-self: center;
  & .dashLine {
    height: 100%;
  }
}

#scourge15 {
  grid-column: -1;
  position: relative;
  left: 19px;
  grid-row: 1 / -1;
  height: calc(100% + 80px);
  bottom: 18px;
}

.verge {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  grid-template-rows: repeat(3, 1fr) 25px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  & .goalText {
    grid-column: 1 / 16;
    grid-row: 1 / 3;
  }
}

/*Most serious EVM DoS issues solved*/
#vergeA {
  grid-column: 7 / 11;
  grid-row: 3;
}

/*Basic light client support (sync <br>committees)*/
#vergeB {
  grid-column: 14 / 18;
  grid-row: 3;
}

#verge1 {
  grid-column: 18 / 21;
  grid-row: 3;
}

/*Verkle tree spec + impl*/
#vergeE {
  grid-column: 21 / 25;
  grid-row: 2;
}

#verge2 {
  grid-column: 25 / 28;
  grid-row: 2;
}

/*SNARK based light clients*/
#vergeC {
  grid-column: 21 / 25;
  grid-row: 3;
}

#verge3 {
  grid-column: 25 / 27;
  width: 75%;
  grid-row: 3;
  align-self: center;
}

#verge4 {
  grid-column: 26 / 27;
  grid-row: 3;
  justify-self: center;
  align-self: end;
  height: calc(50% + 2px);
  margin-bottom: -1px;
}

#verge5 {
  grid-column: 26 / 34;
  grid-row: 3;
  align-self: end;
  margin-bottom: -1px;
  width: 88%;
  justify-self: center;
}

#verge6 {
  grid-column: 33 / 34;
  grid-row: 3;
  justify-self: center;
  align-self: end;
  height: calc(50% + 2px);
  margin-bottom: -1px;
}

#verge7 {
  grid-column: 33 / 35;
  grid-row: 3;
  width: 75%;
  justify-self: end;
}

#verge8 {
  grid-column: 29 / 31;
  grid-row: 1 / 3;
  justify-self: center;
  height: calc(25% + 2px);
  align-self: center;
  margin-bottom: 6px;
}

#verge9 {
  grid-column: 29 / 31;
  justify-self: center;
  height: calc(25% + 2px);
  margin-top: 6px;
  align-self: center;
  grid-row: 2 / 4;
}

/*Code chunking + gas cost updates*/
#vergeF {
  grid-column: 28 / 32;
  grid-row: 1;
}

/*Verkle trees*/
#vergeH {
  grid-column: 28 / 32;
  grid-row: 2;
  height: 50%;
}

#verge10 {
  grid-column: 32 / 35;
  grid-row: 2;
}

/*Transition spec+ impl*/
#vergeG {
  grid-column: 28 / 32;
  grid-row: 3;
}

/*SNARK for L1 EVM*/
#vergeJ {
  grid-column: 35 / 39;
  grid-row: 1;
}

#verge11 {
  grid-column: 39 / 49;
  grid-row: 1;
}

#verge12 {
  grid-column: 39 / 42;
  grid-row: 1 / 3;
  height: 50%;
  align-self: center;
  justify-self: center;
}

/*SNARK for Verkle proofs*/
#vergeI {
  grid-column: 35 / 39;
  grid-row: 2;
}

#verge13 {
  grid-column: 39 / 42;
  grid-row: 1 / 4;
  align-self: center;
}

/*SNARK for consensus state transition*/
#vergeD {
  grid-column: 35 / 39;
  grid-row: 3;
}

#verge14 {
  grid-column: 39 / 41;
  grid-row: 3;
  width: 75%;
  align-self: center;
}

#verge15 {
  grid-column: 39 / 42;
  grid-row: 2 / 4;
  height: 50%;
  align-self: center;
  justify-self: center;
}

/*Fully SNARKed Ethereum*/
#vergeL {
  z-index: 1;
  grid-column: 42 / 46;
  grid-row: 2;
  height: 75%;
}

#verge16 {
  grid-column: 46 / 49;
  grid-row: 2;
}

/*SNARK / STARK ASICs*/
#vergeN {
  grid-column: 42 / 46;
  grid-row: 3;
}

/*Explore EVM verification precompile*/
#vergeK {
  grid-column: 49 / 53;
  grid-row: 1;
}

/*Quantum-safe SNARKs (eg. <br>STARKs)*/
#vergeM {
  grid-column: 49 / 53;
  grid-row: 2;
  height: 60%;
  align-content: center;
}

#verge17 {
  grid-column: 34 / 53;
  grid-row: 1;
  align-self: start;
  margin-right: -64px;
  width: calc(100% + 19px);
}

#verge18 {
  align-self: end;
  grid-row: 1;
  bottom: 100%;
  height: 50px;
}

#verge19 {
  grid-column: 33 / 35;
  grid-row: 1;
  height: 50%;
}

#verge20 {
  grid-column: 34 / 35;
  grid-row: 1;
}

#verge21 {
  grid-column: 32 / 34;
  grid-row: 1 / 3;
  height: calc(75% + 35px);
  margin-top: -35px;
}

#verge22 {
  grid-column: 43 / 45;
  grid-row: 1 / 3;
  height: calc(50% + 45px);
  margin-top: -35px;
}

#verge23 {
  margin-top: -35px;
  align-self: start;
  grid-column: 30 / 44;
  grid-row: 1;
}

#verge24 {
  grid-row: 2 / 4;
  grid-column: 19 / 27;
}

#verge25 {
  grid-row: 2;
  grid-column: 26 / 28;
  height: 45%;
  align-self: end;
  margin-bottom: 5%;
  & .arrowU {
    justify-self: center;
  }
}

#verge26 {
  grid-column: 18 / 20;
  grid-row: 3 / -1;
  height: calc(100% + 38px);
}

.purge {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  grid-template-rows: repeat(4, 1fr) 25px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  & .goalText {
    grid-column: 1 / 11;
    grid-row: 1 / 4;
  }
}

/*Eliminate most gas refunds*/
#purgeA {
  grid-column: 7 / 11;
  grid-row: 4;
}

/*EIP-4444 specification*/
#purgeB {
  grid-column: 14 / 18;
  grid-row: 3;
}

#purge1 {
  grid-column: 18 / 21;
  grid-row: 3;
}

/*EIP-4444 implementation*/
#purgeC {
  grid-column: 21 / 25;
  grid-row: 3;
}

#purge2 {
  grid-column: 18 / 20;
  grid-row: 4;
  align-self: center;
  width: 75%;
}

#purge3 {
  grid-column: 19 / 20;
  grid-row: 4;
  justify-self: center;
  align-self: end;
  height: 50%;
}

#purge4 {
  grid-column: 19 / 20;
  grid-row: 4;
  align-self: end;
  width: 50%;
  justify-self: end;
}

#purge5 {
  grid-column: 20 / 26;
  grid-row: 4;
  align-self: end;
/*  margin-bottom: -5px;*/
}

#purge6 {
  grid-column: 25 / 27;
  grid-row: 4;
  align-self: end;
  justify-self: center;
}

/*Beacon chain fast sync*/
#purgeD {
  grid-column: 14 / 18;
  grid-row: 4;
}

#purge7 {
  grid-column: 25 / 26;
  grid-row: 3;
  align-self: center;
}

#purge8 {
  grid-column: 25 / 27;
  grid-row: 3;
  height: 50%;
  align-self: end;
  justify-self: center;
}

#purge9 {
  grid-column: 26 / 28;
  grid-row: 3 / 5;
}

/*P2P history (eg. Portal)*/
#purgeE {
  grid-column: 21 / 25;
  grid-row: 4;
}

#purge10 {
  grid-column: 25 / 26;
  grid-row: 4;
  align-self: center;
}

#purge11 {
  grid-column: 25 / 27;
  grid-row: 4;
  align-self: start;
  justify-self: center;
}

/*track group: EVM simplification track*/
#purgeTrackA {
  grid-column: 22 / 38;
  grid-row: 1 / 3;
  height: 75%;
  align-self: center;
  display: grid;
  grid-template-rows: 14px 1fr;
  grid-template-columns: repeat(16, 1fr);
  padding-left: 7px;
  padding-right: 7px;
}

/*EVM simplification track*/
#purgeTrackAText {
  grid-column: 1 / -1;
  grid-row: 1;
  filter: unset;
}

/*Ban SELF-DESTRUCT*/
#purgeG {
  grid-column: 1 / 5;
  grid-row: 2;

}

/*Simplify gas mechanics*/
#purgeH {
  grid-column: 7 / 11;
  width: 100%;
  grid-row: 2;
}

/*Precompiles EVM impls*/
#purgeI {
  grid-column: 13 / 17;
  grid-row: 2;
}

#purge16 {
  grid-column: 38 / 40;
  grid-row: 1 / 3;
  align-self: center;
}

#purge17 {
  grid-column: 39 / 41;
  grid-row: 2 / 5;
  justify-self: center;
  height: calc(100% + 70px);
}

/*History expiry (EIP-4444)*/
#purgeF {
  grid-column: 28 / 32;
  grid-row: 3 / 5;
  height: 75%;
}

/*Address space extension*/
#purgeJ {
  grid-column: 42 / 46;
  grid-row: 1;
}

#purge12 {
  grid-column: 46 / 49;
  grid-row: 1;
}

/*LOG reform*/
#purgeL {
  grid-column: 42 / 46;
  grid-row: 2 / 4;
  height: 30%;
  align-content: center;
}

/*Remove old tx types*/
#purgeM {
  grid-column: 42 / 46;
  grid-row: 4;
}

#purge13 {
  grid-column: 46 / 49;
  grid-row: 4;
}

/*State expiry*/
#purgeK {
  grid-column: 49 / 53;
  grid-row: 1;
  align-content: center;
  height: 65%;
}

/*Serialization harmonization*/
#purgeN {
  grid-column: 49 / 53;
  grid-row: 4;
}

#purge14 {
  grid-column: 19 / 23;
  margin-top: 10px;
  height: 0px;
  grid-row: 1 / 3;
  align-self: center;
  margin-right: -10%;
}

#purge15 {
  grid-column: 18 / 20;
  grid-row: 1;
  height: calc(100% + 25px);
  margin-top: -19px;
}

.splurge {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  grid-template-rows: repeat(2, 1fr) 15px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  & .goalText {
    grid-row: 1;
  }
}

/* -> needs to be same as bacground background-color*/
#ingap {
  grid-row: 2;
  grid-column: 1/3;
  color: #ffffff00;
  font-size: calc(0.1em + 0.6vw + 10px);
}

/*EIP-1559*/
#splurgeA {
  grid-row: 1 / 3;
  grid-column: 7 / 11;
  height: 15%;
  align-content: center;
}

#splurge1 {
  grid-row: 1 / 3;
  grid-column: 11 / 42;
}

/*container EIP-4337 specification*/
#splurgeBB {
  grid-row: 2;
  grid-column: 14 / 18;
  display: grid;
  grid-template-rows: 14px 1fr;
  grid-template-columns: repeat(4, 1fr);
  align-self: center;
}

/*EIP-4337 specification*/
#splurgeB {
  grid-row: 2;
  grid-column: 1 / 5;
}

#splurge2 {
  grid-row: 2;
  grid-column: 18 / 22;
  margin-top: 14px;
  z-index: 2;
  margin-right: -7px;
}

/*ERC-4337*/
#splurgeC {
  grid-row: 2;
  grid-column: 1 / 5;
  align-content: center;
  height: 35%;
}

#splurge3 {
  grid-row: 2;
  grid-column: 5 / 7;
}

/*Voluntary EOA conversion*/
#splurgeD {
  grid-row: 2;
  grid-column: 7 / 11;
  width: 100%;
}

#splurge4 {
  grid-row: 2;
  grid-column: 11 / 13;
}

/*In-protocol enshrining*/
#splurgeE {
  grid-row: 2;
  grid-column: 13 / 17;
}

/*Account abstraction track*/
#splurgeTrackA {
  display: grid;
  grid-template-rows: 14px 1fr;
  grid-template-columns: repeat(16, 1fr);
  grid-row: 2;
  grid-column: 22 / 38;
  height: 75%;
  align-self: center;
  padding-left: 7px;
  padding-right: 7px;
}

/*EVM improvements track*/
#splurgeTrackAText {
  grid-row: 1;
  grid-column: 1 / -1;
  filter: unset;
  z-index: 1;
}

/*track group EVM improvements track*/
#splurgeTrackB {
  display: grid;
  grid-template-rows: 14px 1fr;
  grid-template-columns: repeat(16, 1fr);
  grid-row: 1;
  grid-column: 22 / 38;
  height: 75%;
  align-self: center;
  padding-left: 7px;
  padding-right: 7px;
}

/*EVM improvements track*/
#splurgeTrackBText {
  grid-row: 1;
  grid-column: 1 / -1;
  filter: unset;
  z-index: 1;
}

/*Endgame account abstraction*/
#splurgeF {
  grid-row: 2;
  grid-column: 42 / 46;
  height: 50%;
}

/*EOF*/
#splurgeG {
  grid-row: 2;
  grid-column: 1 / 5;
  align-content: center;
  height: 35%;
}

/*Big modular arithmetic*/
#splurgeH {
  grid-row: 2;
  grid-column: 7 / 11;
  width: 100%;
}

/*Further EVM improvements*/
#splurgeI {
  grid-row: 2;
  grid-column: 13 / 17;
}

#splurge5 {
  grid-row: 1;
  grid-column: 38 / 42;
}

#splurge6 {
  grid-row: 2;
  grid-column: 38 / 42;
}

/*Endgame EVM*/
#splurgeJ {
  grid-row: 1;
  grid-column: 42 / 46;
  height: 50%;
}

/*Endgame EIP-1559*/
#splurgeK {
  grid-row: 1 / 3;
  grid-column: 42 / 46;
}

/*Explore deep crypto (eg. <br>obfuscation)*/
#splurgeL {
  grid-row: 1;
  grid-column: 49 / 53;
}

/*Explore delay- encrypted*/
#splurgeM {
  grid-row: 1 / 3;
  grid-column: 49 / 53;
}

/*VDFs*/
#splurgeN {
  grid-row: 2;
  grid-column: 49 / 53;
  height: 30%;
  align-content: center;
}

#splurge7 {
  grid-row: 1;
  height: calc(50% + 25px);
  margin-top: -25px;
  grid-column: 39 / 41;
  justify-self: center;
}

/*Smaller arrows when screen < 1000px*/
@media (max-width: 1000px) {
  .arrowR {
    width: 7px;
    margin-left: 3px;
  } 
  .arrowL {
    width: 7px;
    margin-right: 3px;
  }
  .arrowU {
    width: 7px;
    margin-bottom: 3px;
  }
  .arrowD {
    width: 7px;
    margin-top: 3px;
  }
  #merge6 {
    margin-bottom: -7px;
  }
}

/*Smaller arrows when screen < 550px*/
@media (max-width: 550px) {
  .arrowR {
    width: 6px;
    margin-left: 4px;
  } 
  .arrowL {
    width: 6px;
    margin-right: 4px;
  }
  .arrowU {
    width: 6px;
    margin-bottom: 4px;
  }
  .arrowD {
    width: 6px;
    margin-top: 4px;
  }
  #merge6 {
    margin-bottom: -6px;
  }
}


/*Smaller margins when screen < 550px*/
@media (max-width: 550px) {
  .container {
    padding: 10px;
    padding-top: 20px;
    width: calc(100% - 30px);
  }
  .merge, .surge, .scourge, .verge, .purge, .splurge {
    padding-left: 8px;
  }
}


[tips] .tooltipBar {
  line-height: 20px;
  background: #444;
  color: white;
  text-align: center;
  padding: 5px 8px 5px 8px;
  font-size: calc(0.1em + 0.7vw);
  border-radius: 5px;
  font-weight: 600;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s;
  position: relative;
}

[tips] .tooltipBar::before {
  content: "";
  position: absolute;
  top: -10px; /* Adjust this value to move the triangle up or down */
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

[tips]:hover .tooltipBar {
  visibility: visible;
  opacity: 1;
}