/* MARK: Custom Properties */

:root {
  --line-height: 2em;
  --column-width: calc(var(var(--line-height) * 1.125));
  /* 6.583em
  5.852em
  5.202em
  4.624em
  4.11em
  3.653em
  3.247em */
--scale-9:  2.887em;
--scale-8:  2.566em;
--scale-7:  2.281em;
--scale-6:  2.027em;
--scale-5:  1.802em;
--scale-4:  1.602em;
--scale-3:  1.424em;
--scale-2:  1.266em;
--scale-1:  1.125em;
--scale-0:  1em;
  /* 0.889em
  0.79em
  0.702em
  0.624em
  0.555em
  0.493em */
}

/* MARK: Fonts */

@font-face {
  font-family: 'Seraphs';
  src: url('/assets//type/SeraphsVF.woff2') format('woff2');
  font-variation-settings: "wght" 150, "SRFS" 11;
}

/* MARK: Keyframes */

@keyframes --font-weight-ani {
	0% {
		font-weight: 700;
    font-size: var(--scale-1);
	}

	100% {
		font-weight: 900;
    font-size: var(--scale-5);
	}
}

@keyframes --font-height-ani {
  0% {
    font-size: var(--scale-4);
  }

  50% {
    font-size: var(--scale-5);    
  }

  100% {
    font-size: var(--scale-4)
  }
  
}

/* MARK: Items */

body{
  font-family: 'Seraphs';
  display: grid; 
  grid-template-columns: 1fr 4fr; 
  grid-template-rows: 4fr 4em; 
  gap: 1em;
}

header {
  display: grid;
  grid-column: 1/2;
  grid-row: 1/-2;
  writing-mode: sideways-lr;
  align-items: center;
  justify-content: end;
}

h1 {
  position: sticky;
  top: var(--scale-9);
  font-size: clamp(var(--scale-1), var(--scale-7), var(--scale-9));
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 3em;
  font-size: clamp(var(--scale-0), var(--scale-2), var(--scale-9));
  line-height: var(--line-height);
}

section:nth-of-type(1) {
  grid-column: 1/3;
  grid-row: 1;
  text-wrap: balance;
}

h2 {
  display: none;
}

refrein:nth-of-type(1) {
  grid-column: 3/6;
  grid-row: 2;
  text-align: right;
  margin-right: 2em;
  text-wrap: balance;
}

section:nth-of-type(2) {
  grid-column: 2/5;
  grid-row: 3;
  text-wrap: balance;
}

section:nth-of-type(3) {
  grid-column: 3/6;
  grid-row: 4;
  text-wrap: balance;
}

refrein:nth-of-type(2) {
  grid-column: 2/6;
  grid-row: 5;
  text-align: right;
  text-wrap: balance;
  margin-right: 2em;
}

section:nth-of-type(4) {
  grid-column: 1/4;
  grid-row: 6;
  text-wrap: balance;
}

section:nth-of-type(5) {
  grid-column: 2/6;
  grid-row: 8;
  font-size: 2em;
  font-weight: 900;
  text-align: right;
  margin-right: 2em;
}

section:nth-of-type(6) {
  grid-column: 1/6;
  grid-row: 9;
  color:grey;
  opacity: 20%;
  font-size: 2em;
  font-weight: 900;
}

section:nth-of-type(7) {
  grid-column: 1/6;
  grid-row: 10;
    color:grey;
  opacity: 20%;
  font-size: 2em;
  font-weight: 900;
}

section:nth-of-type(8) {
  grid-column: 2/5;
  grid-row: 9;
  color: rgb(63, 106, 149);
  font-weight: 600;
  font-size: 1.2em;
  text-align: center;
}

section:nth-of-type(9) {
  grid-column: 2/5;
  grid-row: 10;
 color: rgb(63, 106, 149);
  font-weight: 600;
  font-size: 1.2em;
  text-align: center;
}

refrein{
  font-size: 2em;
}

.stretch {
font-weight: 700;
text-align: center;
letter-spacing: .5em;
margin-inline-start: 1ch;
margin-inline-end: 1ch;
font-family: Seraphs;

& span {
	animation-name:--font-weight-ani;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;

	&:nth-of-type(1) {animation-delay:-3.6s;}
	&:nth-of-type(2) {animation-delay:-3.2s;}
	&:nth-of-type(3) {animation-delay:-2.8s;}
	&:nth-of-type(4) {animation-delay:-2.4s;}
	&:nth-of-type(5) {animation-delay:-2s;}
	&:nth-of-type(6) {animation-delay:-1.6s;}
	&:nth-of-type(7) {animation-delay:-1.2s;}
	&:nth-of-type(8) {animation-delay:-0.8s;}
	&:nth-of-type(9) {animation-delay:-0.4s;}
  }
}

.shadow {
  text-shadow: 2px 2px 4px #000000;
}

.shallow {
  color: transparent;
  background-color: rgb(107, 103, 103);
  background-clip: text;
  font-weight: 700;
  text-shadow: -1px -1px 10px #ffffff;
}

.brackets {
  opacity: 20%;
  font-style: italic;
  font-size: .7em;
}

.alarm {
  font-size: var(--scale-4);
  animation-name:--font-height-ani;
	animation-duration: .5s;
	animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
}

footer {
  display: grid;
  grid-column: 1/-1;
  grid-row: -1/-2;
  margin-inline-start: 1em;
  align-self: self-end;
}