.app-container {
  max-width: 1440px;
  padding-inline: 20px;
  margin: 0 auto;
  @media screen and (min-width: 768px) {
    padding-inline: 80px;
  }
}

.header-mural {
  background: white url('/img/clouds1.jpg') center bottom /cover no-repeat;
}

.button-gradient {
  border-radius: 15px;
  background: linear-gradient(180deg, #302FFF 0%, #7F06FD 100%);
  box-shadow: 0px 9.076px 9.076px 0px rgba(0, 0, 0, 0.14);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  display: inline-flex;
  justify-content: center;
}

.gradient-purple {
  background: linear-gradient(180deg, #8F01FF 0%, #E30DA9 100%);
  box-shadow: 6px 10px 1px 0px rgba(187, 118, 242, 0.20);
}

.gradient-blue {
  background: #1EC4FF;
  box-shadow: 6px 10px 1px 0px rgba(187, 118, 242, 0.20);
}

.cloud-edge {
  height: 40px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="50" viewBox="0 0 9250 400"><circle cx="-500" cy="600" r="400" fill="%231EC4FF"/><circle cy="750" r="600" fill="%231EC4FF"/><circle cx="1800" cy="3800" r="3800" fill="%231EC4FF"/><circle cx="3500" cy="750" r="600" fill="%231EC4FF"/><circle cx="5000" cy="2000" r="2000" fill="%231EC4FF"/><circle cx="6500" cy="750" r="600" fill="%231EC4FF"/><circle cx="7400" cy="750" r="600" fill="%231EC4FF"/><circle cx="8500" cy="2000" r="2000" fill="%231EC4FF"/></svg>') repeat-x;
}

.footer-edge {
  height: 40px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50" viewBox="0 0 2800 400"><circle cx="1400" cy="3800" r="3800" fill="%23E954ED" /></svg>') repeat-x;
}

.cloud-background {
  position: relative;
  background: transparent url('data:image/svg+xml;utf8,<svg width="620" height="636" viewBox="0 0 620 636" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M609.647 497.5C609.647 465.225 597.665 435.533 577.584 412.006C582.915 398.137 585.826 383.145 585.826 367.5C585.826 364.821 585.741 362.161 585.573 359.523C597.882 337.242 604.794 312.175 604.794 285.67C604.794 270.368 602.49 255.545 598.174 241.46C611.851 222.031 620 197.594 620 171.049C620 107.746 573.658 56.4289 516.493 56.4289C500.493 56.4289 485.341 60.4492 471.815 67.6274C448.461 48.9537 416.799 37.4833 381.933 37.4833C362.26 37.4833 343.606 41.1353 326.89 47.6728C300.166 18.6671 261.434 0.428985 218.341 0.428981C167.292 0.428977 122.362 26.0237 96.2651 64.7935C42.882 66.0989 -0.000442382 110.753 -0.000447182 165.648C-0.000450452 203.061 19.9181 235.717 49.504 253.136C33.1184 279.302 23.7717 309.503 23.7717 341.667C23.7717 365.536 28.9191 388.324 38.2708 409.185C26.6837 428.335 19.8631 451.804 19.8631 477.16C19.8631 541.689 64.0394 594 118.534 594C142.017 594 163.585 584.285 180.527 568.065C205.002 593.463 240.022 609.365 278.912 609.365C304.563 609.365 328.53 602.447 348.899 590.449C376.306 618.292 415.853 635.774 459.823 635.774C542.568 635.774 609.647 573.867 609.647 497.5Z" fill="white"/></svg>') top center no-repeat;
  background-size: 100% 100%;
}

.cloud-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: drop-shadow(8px 8px 4px rgba(0, 0, 0, 0.3));
  z-index: 1;
}