body {
    background-color: rgb(46, 46, 46);
}

html {
  scroll-behavior: smooth; /* Adds smooth scrolling instead of jumping */
}


.centerify {
    text-align: center;
}

h1 {
    height: 4rem;
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-size: 4em;
    font-weight: 1;
    font-style: normal;
}
h2 {
    height: 10rem;
}
h3{
    height: 1rem;
    white-space: nowrap;
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-size: 3em;
    font-weight: 1;
    font-style: normal;
}
p {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-size: 1.2em;
    font-weight: 200;
    font-style: normal;
}
.buttons {
    height: 25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* vertically align */
    gap: 10px; /* space between image and text */
    max-width: fit-content;
    margin: auto;
}
button {
    background-color: rgb(59, 59, 59);
    padding: 0.7rem;
    width: 12rem;
    height: 4rem;
    cursor: pointer;
}
button:hover {
    background-color: rgb(70, 70, 70);
}
img {
    width: 20rem;
    height: 20rem;
    object-fit: contain;
}

.graph {
  display: flex;
  align-items: center; /* vertically align */
  gap: 15px; /* space between image and text */
  max-width: 60rem;
  margin: auto;
}
.graph2 {
  display: flex;
  align-items: center; /* vertically align */
  gap: 20px; /* space between image and text */
  max-width: 60rem;
  margin: auto;
}
.rotate {
    transform: rotate(270deg);
}