#MeritCurveTool {
  width: 600px; /* Set the width and height to match your image dimensions */
  height: 479.99px;
  background-image: url("/static/images/MeritOrder.svg"); /* Replace with your image URL */
  background-color: transparent;
  background-size: cover; /* Adjust the background size as needed */
  border: none;
  cursor: pointer;
}

#MeritCurveTool:hover {
  transition: 0.25s ease-in-out;
  animation: animateBackground 0.5s steps(12);
  animation-iteration-count: 1;
}

#MeritCurveTool:hover {
  /* transition: none; */
  background-image: url("/static/images/MeritOrder.svg"); /* Replace with your image URL */
  background-position: -6602.75px 0;
}

@keyframes animateBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -7203px 0; /* Adjust the value based on the width of the spritesheet */
  }
}

#OptTool {
  width: 550px; /* Set the width and height to match your image dimensions */
  height: 380px;
  background-image: url("/static/images/ElHeatMethaneModel_noCCGTheat.png"); /* Replace with your image URL */
  background-color: transparent;
  background-size: 100%; /* Adjust the background size as needed */
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
}


.right-aligned{
  display: block;
  text-align: right;
}

.coverimage {
  padding-bottom: 5%;
}

.header_moc {
  padding-top: -5%;
  padding-bottom: 15%;
}

.centering {
  display: flex;
  flex-direction: column;
  align-items: center; /* Vertical alignment */
  justify-content: center; /* Horizontal alignment, if needed */
  height: 30vh; /* Set the desired height for vertical alignment */
  padding: 200px 20px;
  font-size: large;
}

.centering p {
  text-align: 'left';
}

.content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px; /* Add horizontal padding as needed */
}

.text-container {
  flex: 1;
}

.text-container p {
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  vertical-align: middle;
}