section {
  padding: 40px 0px;
}

#loud {
    color:#2A2A2A;
    padding: 5rem;
    margin: 40px 0px;
}

#runa {
    padding: 40px 0px;
}

section.lighter { background-color: rgba(255, 255, 255, .2); }


section.diagonal {
    --skew-angle: -4deg;
    position: relative;
    isolation: isolate;
    color:#2A2A2A;
    margin: 50px 0px;
}
  
section.diagonal::after {
    content: '';
    background: white;
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(var(--skew-angle));
}

section.waves {
  /* mask created with 
  https://css-generators.com/wavy-shapes/ */
  
  background: var(--light);

  --mask:
    radial-gradient(50.39px at 50% 68.75px,#000 99%,#0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
    radial-gradient(50.39px at 50% -43.75px,#0000 99%,#000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
    radial-gradient(50.39px at 50% calc(100% - 68.75px),#000 99%,#0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
    radial-gradient(50.39px at 50% calc(100% + 43.75px),#0000 99%,#000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}



section.spikes {
  --spike-width: 50px;
  --spike-height: 10px;
  --spike-color: #FFF;
  
  position: relative;
  color: var(--dark);
  background: var(--light);
}

section.spikes::before,
section.spikes::after {
  content: '';
  position: absolute;
  width: 100%;
  height: var(--spike-height);
  background: var(--spike-color);
  -webkit-mask-image: url('/TPLO/assets/img/triangle.svg');
  -webkit-mask-size: var(--spike-width) var(--spike-height);
  /* -webkit-mask-repeat: repeat-x; */
  mask-image: url('/TPLO/assets/img/triangle.svg');
  mask-size: var(--spike-width) var(--spike-height);
  /* mask-repeat: repeat-x; */
}