/**
  * Miscellaneous Styles
  */
.grey-background {
  background-color: #1E1E1E;
  color: #FFFFFF;
}
.dark-grey-background {
  background-color: #0A0A0A;
  color: #FFFFFF;
}
.black-background {
  background-color: #000000;
  color: #FFFFFF;
}

.grey-bar, .black-bar, .blue-bar, .orange-bar {
  width: 50%;
  height: 10px;
}
.grey-bar {
  background-color: #1E1E1E;
}
.black-bar {
  background-color: #000000;
}
.blue-bar {
  background-color: #53D5FD;
}
.orange-bar {
  background-color: #ff6a00;
}

.top-left, .top-right, .bottom-left, .bottom-right {
  position: absolute;
}
.top-left {
  top: 0;
  left: 0;
}
.top-right {
  top: 0;
  right: 0;
}
.bottom-left {
  bottom: 0;
  left: 0;
}
.bottom-right {
  bottom: 0;
  right: 0;
}

.flag {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  box-sizing: content-box;
  padding-top: 15px;
  background: transparent;
}
.flag:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 2.5rem solid #1E1E1E;
  border-left: 20vw solid transparent;
  border-right: 20vw solid transparent;
}

.flag-top {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  box-sizing: content-box;
  padding-top: 15px;
  background: transparent;
}
.flag-top:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 2.5rem solid #1E1E1E;
  border-left: 50vw solid transparent;
  border-right: 0vw solid transparent;
}

.flag-discography {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  box-sizing: content-box;
  padding-top: 15px;
  background: transparent;
}
.flag-discography:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 2.5rem solid #1E1E1E;
  border-left: 20vw solid transparent;
  border-right: 0vw solid transparent;
}

.flag-videos {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 24px;
  box-sizing: content-box;
  padding-top: 15px;
  background: transparent;
}
.flag-videos:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 1.25rem solid #1E1E1E;
  border-left: 30vw solid transparent;
  border-right: 0vw solid transparent;
}

.flag-videos-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 24px;
  box-sizing: content-box;
  padding-top: 15px;
  background: transparent;
}
.flag-videos-right:after {
  content: "";
  position: absolute;
  right: 4rem;
  top: 0;
  width: 0;
  height: 0;
  border-top: 4rem solid #1E1E1E;
  border-left: 30vw solid transparent;
  border-right: 15vw solid transparent;
}

.flag-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  box-sizing: content-box;
  padding-top: 15px;
  background: transparent;
}
.flag-bottom:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 2.5rem solid #0A0A0A;
  border-left: 0vw solid transparent;
  border-right: 45vw solid transparent;
}
.flag-orange {
  position: absolute;
  right: 1rem;
  top: 0;
  width: 100%;
  height: 24px;
  box-sizing: content-box;
  padding-top: 15px;
  background: transparent;
}
.flag-orange:after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 2.5rem solid #0A0A0A;
  border-left: 40vw solid transparent;
  border-right: 0vw solid transparent;
}


.base {
  background: #1E1E1E;
  background-size: cover;
  background-position: center;
  min-height: 120px;
  position: relative;
  width: 100%;
}
.base:before {
  border-bottom: 35px solid #1E1E1E;
  border-left: 49vw solid transparent;
  border-right: 49vw solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -35px;
  width: 0;
}

.curved-edge {
  top: -5rem;
  --c: 70px;
  width: 100%;
  height: 250px;
  aspect-ratio: 1;
  mask: radial-gradient(60% var(--c) at 50% var(--c),#0000 calc(90% - 2px),#000) 0 calc(-1*var(--c));
}

.triangle-cut {
  --b: 60px;
  --h: 40px;

  width: 100%;
  height: 250px;
  aspect-ratio: 1.2;
  border-radius: 0;
  clip-path: polygon(0 0,0 100%,calc(77% - var(--b)/2) 100%,66% calc(100% - var(--h)),calc(90% + var(--b)/2) 100%,100% 100%,100% 0,calc(23% + var(--b)/2) 0,33% var(--h),calc(10% - var(--b)/2) 0);
}