.diagonal-corners {
  --corner-size: clamp(32px, 5vw, 64px);
  clip-path: polygon(
    var(--corner-size) 0, 
    calc(100% - var(--corner-size)) 0, 
    100% var(--corner-size), 
    100% calc(100% - var(--corner-size)), 
    calc(100% - var(--corner-size)) 100%, 
    var(--corner-size) 100%, 
    0 calc(100% - var(--corner-size)), 
    0 var(--corner-size)
  );
}

.diagonal-corners-md {
  --corner-size: 32px;
  clip-path: polygon(
    var(--corner-size) 0, 
    calc(100% - var(--corner-size)) 0, 
    100% var(--corner-size), 
    100% calc(100% - var(--corner-size)), 
    calc(100% - var(--corner-size)) 100%, 
    var(--corner-size) 100%, 
    0 calc(100% - var(--corner-size)), 
    0 var(--corner-size)
  );
  transition: --corner-size 0.3s ease-in-out;
}

.diagonal-corners-sm {
  --corner-size: 12px;
  clip-path: polygon(
    var(--corner-size) 0, 
    calc(100% - var(--corner-size)) 0, 
    100% var(--corner-size), 
    100% calc(100% - var(--corner-size)), 
    calc(100% - var(--corner-size)) 100%, 
    var(--corner-size) 100%, 
    0 calc(100% - var(--corner-size)), 
    0 var(--corner-size)
  );
  transition: --corner-size 0.3s ease-in-out;
}

a.diagonal-corners-sm:hover, button.diagonal-corners-sm:hover {
  --corner-size: 0px;
}

@property --corner-size {
  syntax: '<length>';
  initial-value: 12px;
  inherits: false;
}

.content-wrapper {
  max-width: min(90vw, 1200px);
  margin: 0 auto;
}

.topbar {
  mix-blend-mode: difference;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Selection styles */
::selection {
  background-color: #FB6661;
  color: #000000;
}

::-moz-selection {
  background-color: #FB6661;
  color: #000000;
} 

/* Decorative first-line indent */
.first-line-indent {
  text-indent: 0;
}

@media (min-width: 1024px) {
  .first-line-indent {
    text-indent: 50vw;
  }
} 

.box-cut {
  position: relative;
  clip-path: polygon(
    32px 0, calc(100% - 32px) 0, 100% 32px,
    100% calc(100% - 32px), calc(100% - 32px) 100%,
    32px 100%, 0 calc(100% - 32px), 0 32px
  );
}

.diag {
  position: absolute;
  width: 45.255px;       /* 32 * sqrt(2) */
  height: 2px;           /* spessore */
  background: currentColor;
  pointer-events: none;
}

.diag--tl { top: 0px; left: 31px; transform-origin: left top;       transform: rotate(135deg); }
.diag--tr { top: 0px; right: 31px; transform-origin: right top;     transform: rotate(225deg); }
.diag--br { bottom: 29px; right: -1px; transform-origin: right bottom; transform: rotate(-45deg); }
.diag--bl { bottom: 29px; left: -1px; transform-origin: left bottom;   transform: rotate(45deg); }