/** @format */

:root {
  --divider-height: 6.25rem;
  --shadow-height: 0.15rem;
  --shadow-height-nav: -0.3rem;
}

.divider {
  width: 100%;
  height: var(--divider-height);
  position: relative;
  display: block;
  z-index: 0;
}

.divider.top.third,
.divider.top {
  margin-top: calc(var(--divider-height) * -1);
  border-bottom: 0.2rem solid var(--third);
  filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) var(--third));
  -webkit-filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) var(--third));
}

.divider.top.third.to-white {
  border-bottom: 0.2rem solid white;
}

.divider.down.third,
.divider.down {
  margin-top: var(--divider-height);
  border-top: 0.2rem solid var(--third);
  filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) var(--third));
  -webkit-filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) var(--third));
}

.divider.top.main {
  border-bottom: 0.2rem solid var(--main);
  filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) var(--main));
  -webkit-filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) var(--main));
}

.divider.down.main {
  border-top: 0.2rem solid var(--main);
  filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) var(--main));
  -webkit-filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) var(--main));
}

.divider.top.white {
  border-bottom: 0.2rem solid white;
  filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) white);
  -webkit-filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) white);
}

.divider.down.white {
  border-top: 0.2rem solid white;
  filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) white);
  -webkit-filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) white);
}

.divider.top.secondary {
  border-bottom: 0.2rem solid var(--secondary);
  filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) var(--secondary));
  -webkit-filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) var(--secondary));
}

.divider.down.secondary {
  border-top: 0.2rem solid var(--secondary);
  filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) var(--secondary));
  -webkit-filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) var(--secondary));
}

.divider.top.third-light {
  border-bottom: 0.2rem solid var(--third-light);
  filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) var(--third-light));
  -webkit-filter: drop-shadow(0px var(--shadow-height-nav) var(--shadow-height) var(--third-light));
}

.divider.down.third-light {
  border-top: 0.2rem solid var(--third-light);
  filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) var(--third-light));
  -webkit-filter: drop-shadow(0px var(--shadow-height) var(--shadow-height) var(--third-light));
}

.divider:before {
  content: "";
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
}

.divider.third:before,
.divider:before {
  background-color: var(--third);
}

.divider.third.to-white:before {
  background-image: linear-gradient(180deg, var(--third) 25%, white 100%);
}

.divider.white:before {
  background-image: linear-gradient(180deg, white 25%, white 100%);
}

.divider.third.to-main:before {
  background-image: linear-gradient(180deg, var(--third) 25%, var(--main) 100%);
}

.divider.main:before {
  background-color: var(--main);
}

.divider.main.to-third:before {
  background-image: linear-gradient(180deg, var(--main) 0%, var(--third) 100%);
}

.divider.secondary:before {
  background-color: var(--secondary);
}

.divider.secondary.to-main:before {
  background-image: linear-gradient(180deg, var(--secondary) 0%, var(--main) 100%);
}

.divider.third-light:before {
  background-color: var(--third-light);
}

.divider.third-light.to-third:before {
  background-image: linear-gradient(180deg, var(--third-light) 0%, var(--third) 100%);
}

.divider.third-light.to-main:before {
  background-image: linear-gradient(180deg, var(--third-light) 0%, var(--main) 100%);
}

.divider.top.third + *,
.divider.top + * {
  background-image: linear-gradient(180deg, var(--third) 0%, var(--main) 100%);
}

.divider.top.third.to-third-light + * {
  background-image: linear-gradient(180deg, var(--third) 0%, var(--third-light) 100%);
}

.divider.top.white + * {
  background-image: none;
  background-color: white;
}

.divider.top.main + * {
  background-image: linear-gradient(
    180deg,
    var(--main) 0%,
    var(--third) 50%,
    var(--third-light) 100%
  );
}

.divider.third.to-white + * {
  background-image: linear-gradient(180deg, white 0%, white 100%);
}

.divider.top.secondary + * {
  background-image: linear-gradient(180deg, var(--secondary) 0%, var(--main) 100%);
}

.divider.top.third-light + * {
  background-image: linear-gradient(
    180deg,
    var(--third-light) 0%,
    var(--third) 50%,
    var(--main) 100%
  );
}

.divider.triangle.left.top:before {
  clip-path: polygon(0 0, 100% 90%, 100% 101%, 0% 101%);
}

.divider.triangle.right.top:before {
  clip-path: polygon(100% 0, 100% 101%, 0% 101%, 0% 90%);
}

.divider.triangle.right.down:before {
  clip-path: polygon(0 0, 100% 0, 100% 101%, 0% 10%);
}

.divider.triangle.left.down:before {
  clip-path: polygon(0 0, 100% 0, 10% 101%, 0 101%);
}

main .divider + * .container {
  padding-top: var(--padding-x);
  padding-bottom: calc(var(--navigation-height) * 1.5);

  display: flex;
  flex-direction: column;
  gap: var(--navigation-height-half);
}

main.notice .divider + * .container {
  min-height: 30rem;
  background-color: white;

  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  gap: var(--navigation-height-half);

  filter: drop-shadow(0 0 0.5rem var(--third));
  -webkit-filter: drop-shadow(0 0 0.5rem var(--third));

  padding-top: var(--navigation-height);
  margin-bottom: var(--padding-x);
  position: relative;
}

main.notice .divider + * .container * {
  text-align: center;
  line-height: 2;
}

@media screen and (max-width: 576px) {
  :root {
    --divider-height: 4rem;
  }
}