@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@keyframes slide-down {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-down-20 {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes hidden {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
html {
  font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}
* {
  margin: 0;
  color: #333333;
  text-decoration: none;
  line-height: 1.5;
  transition: opacity 0.7s ease;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background: #fafafa;
}

p {
  font-size: 1rem;
  margin-left: 2rem;
  text-align: justify;
  line-height: 1.8;
}

h1 {
  font-size: clamp(1.6rem, 7vw, 3.25rem);
  line-height: 1.4;
  margin-top: 4rem;
  margin-bottom: 2.4rem;
  text-align: center;
  color: #333333;
}

h2 {
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  line-height: 1.4;
  margin-top: clamp(2rem, 8vw, 4rem);
  margin-bottom: clamp(1rem, 4vw, 2rem);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

a.blue-link {
  margin-top: 1rem;
  color: #0066CC;
  display: inline-block;
  align-self: center;
}
a.blue-link::after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: #0066CC;
  transition: 300ms;
}
a.blue-link:hover::after {
  width: 100%;
}

button,
.btn {
  background: rgb(111, 5, 211);
  color: white;
  text-decoration: none;
  border: none;
  padding: 0.5rem 2rem;
  border-radius: 100rem;
  margin-top: 2rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button:hover,
.btn:hover {
  background: #8912f9;
}

.on-scroll-animation {
  transition: transform 1.5s ease-in-out;
}

img {
  transition: all 1.5s ease-in-out, transform 0.3s ease-in-out;
}

hr {
  margin: auto;
  margin-top: 2.5rem;
  margin-bottom: 4rem;
}

.container {
  width: min(80vw, 70rem);
}
@media (max-width: 750px) {
  .container {
    width: 90vw;
  }
}

.container-no-adjust {
  width: min(80vw, 70rem);
}

.flex {
  display: flex;
}

.flex-vertical {
  flex-direction: column;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.margin {
  margin-left: 2rem;
  margin-right: 2rem;
}

.clickable-text {
  cursor: pointer;
  color: #6f05d3;
  margin-top: 0;
}

.container2 {
  width: min(70vw, 60rem);
  align-self: center;
}
@media (max-width: 800px) {
  .container2 {
    width: 90vw;
  }
}

@media (max-width: 800px) {
  :root {
    font-size: clamp(11px, 3vw, 16px);
  }
}
.slide-left {
  transform: translateX(min(15vw, 20rem));
}

.slide-left-smaller {
  transform: translateX(min(9vw, 12rem));
}

.slide-left-small {
  transform: translateX(min(4vw, 5rem));
}

.slide-right {
  transform: translateX(calc(min(15vw, 20rem) * -1));
}

.slide-right-smaller {
  transform: translateX(calc(min(9vw, 12rem) * -1));
}

.slide-right-small {
  transform: translateX(calc(min(4vw, 5rem) * -1));
}

.zoom {
  transform: scale(0.9);
}

.scale-transition:hover {
  transform: scale(1.02);
}

.scale-transition-large:hover {
  transform: scale(1.06);
}

.invisible {
  opacity: 0;
}

.black {
  background: black;
}

html,
body {
  scroll-behavior: smooth;
}

.tilt-transition::before {
  transform: rotate(20deg) scale(0.7);
}

#landing-section {
  margin-top: calc(3rem + 50px);
}
#landing-section img {
  width: min(70vw, 680px);
  mix-blend-mode: multiply;
  animation: 0.3s ease 0s 1 hidden, 1.5s ease 0.3s 1 appear, 1.5s ease 0s 1 slide-down-20;
}
#landing-section h1 {
  opacity: 0;
  animation: 1.2s ease 0.8s 1 slide-down-20, 1.5s ease 0.8s 1 appear;
  animation-fill-mode: forwards;
}
#landing-section #logo {
  width: clamp(100px, 20vw, 200px);
  margin-bottom: 3.5rem;
  animation: 1s ease 0s 1 hidden, 1.8s ease-in-out 1s 1 appear, 2.5s ease-in-out 0.6s 1 rotate;
}

#installation-section {
  margin-bottom: 5rem;
}
#installation-section .image {
  width: 60%;
  margin: 3rem 0;
  align-self: center;
}
@media (max-width: 800px) {
  #installation-section .image {
    width: 90%;
  }
}
#installation-section .image img {
  width: 100%;
}
#installation-section ol.steps {
  list-style: none;
  counter-reset: my-awesome-counter;
  padding: 0;
}
#installation-section ol.steps li {
  counter-increment: my-awesome-counter;
  margin-left: 8rem;
  margin-right: 5.5rem;
}
#installation-section ol.steps li h3 {
  position: relative;
  margin-bottom: 2.5rem;
}
#installation-section ol.steps li h3::before {
  content: counter(my-awesome-counter);
  color: blue;
  font-size: 6rem;
  font-weight: 100;
  position: absolute;
  left: -1em;
  line-height: 1;
  transition: all 1s ease;
}
@media (max-width: 800px) {
  #installation-section ol.steps li {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  #installation-section ol.steps li h3::before {
    font-size: 3rem;
    left: -0.9em;
    line-height: 1;
  }
  #installation-section p {
    margin-left: 0;
  }
}
#installation-section ol.steps li:nth-of-type(4) {
  display: flex;
  gap: 2rem;
}
#installation-section ol.steps li:nth-of-type(4) h3 {
  word-wrap: nowrap;
  white-space: pre;
}
#installation-section ol.steps li:nth-of-type(4) .main {
  flex: 1;
}
#installation-section ol.steps li:nth-of-type(4) .image {
  flex: 1;
  margin: auto;
}
#installation-section ol.steps li:nth-of-type(4) .image img {
  width: 100%;
  vertical-align: middle;
}
@media (max-width: 1000px) {
  #installation-section ol.steps li:nth-of-type(4) {
    flex-direction: column;
  }
  #installation-section ol.steps li:nth-of-type(4) .image {
    margin-left: 2rem;
    width: min(100% - 2rem, 90rem);
  }
}
@media (max-width: 800px) {
  #installation-section ol.steps li:nth-of-type(4) .image {
    margin-left: 0rem;
    width: min(100%, 90rem);
  }
}

#versions-section {
  padding-bottom: 5rem;
}
#versions-section * {
  color: rgba(255, 255, 255, 0.8);
}
#versions-section .top-row {
  display: flex;
  gap: 2rem;
}
#versions-section ul {
  margin-top: 1rem;
  flex: 1;
}
#versions-section .image {
  flex: 1;
}
#versions-section img {
  width: 100%;
  margin: 0;
}
#versions-section p.history {
  margin-top: 1rem;
  margin-bottom: 2rem;
  margin-left: 6rem;
}
#versions-section .table-date {
  position: absolute;
  bottom: -3.3rem;
  right: -0.5rem;
  font-weight: 100;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
}
#versions-section .table-date a.source-link {
  margin-left: 1rem;
  background: #222222;
  border-radius: 10px;
  width: 25px;
  height: 25px;
}
#versions-section .table-date a.source-link img {
  padding: 3px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
#versions-section .table {
  position: relative;
  gap: 2rem;
  justify-content: space-between;
  min-width: 34rem;
  width: 60%;
  margin-bottom: 1.5rem;
}
#versions-section .table * {
  margin: 0;
  z-index: 1;
  line-height: 1.7;
  word-wrap: nowrap;
  white-space: nowrap;
}
#versions-section .table::after {
  position: absolute;
  content: "";
  background: #222222;
  border-radius: 1.5rem;
  width: 100%;
  height: 90%;
  padding: 1rem;
  left: -1rem;
  bottom: -1rem;
}
@media (max-width: 800px) {
  #versions-section .top-row {
    flex-direction: column;
  }
  #versions-section .image {
    width: 70%;
    margin: 0 auto;
  }
  #versions-section p.history {
    margin-left: 2rem;
    margin-top: 2rem;
  }
  #versions-section .table {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 700px) {
  #versions-section .table {
    font-size: 0.7rem;
  }
  #versions-section .table p {
    font-size: 0.8rem;
  }
  #versions-section .table .table-date {
    font-size: 0.7rem;
  }
}