@font-face {
  font-family: quicksand;
  src: url(../ttf/Quicksand-VariableFont_wght.ttf);
  font-display: swap;
}

/* //////////////////////////// */

:root {
  --color1: #fafafa;
  --color2: #f7e1d7;
  --color3: #7db2a5;
  --color4: #7798b4;
  --color5: #717ec3;
  --color6: #4c5481;
  --color7: #343a57;
  --color8: #0c0d10;

  --color11: #e6e3e9;
  --color12: #ffaa33;
  --color13: #3e6c86;
  --color14: #3e4990;
  --color15: #bd4f6c;

  --fs-b: 3.8em;
  --fs-x: 2.6em;
  --fs-l: 2em;
  --fs-m: 1.4em;
  --fs-s: 1em;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

/* ╔══════════════════════════════════════════════════════╗ */
/* ║  GLOBAL ELEMENTS                                     ║ */
/* ╚══════════════════════════════════════════════════════╝ */

html,
body,
main {
  position: fixed;
  height: 100%;
  width: 100%;
}

html {
  font-size: calc(0.64 * (1vh + 1vw));
}

body {
  font-family: quicksand;
  font-size: 1em;
  color: var(--color8);
  background-color: var(--color1);
  transition: background-color 1s;
}

main {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: calc(100% / 12) calc((100% * 11) / 12);
  opacity: 1;
  transition: opacity 1s;
}

main > section {
  display: grid;
  padding: 2vmin;
  grid-area: 2 / 1;
}

main > section > img {
  max-height: 100%;
  max-width: 100%;
  outline: none;
  border: none;
  overflow: hidden;
  align-self: center;
  justify-self: center;
}

.hide {
  visibility: hidden;
}

/* ╔══════════════════════════════════════════════════════╗ */
/* ║  SECTION : WELCOME                                   ║ */
/* ╚══════════════════════════════════════════════════════╝ */

#welcome {
  grid-template-columns: 1fr repeat(2, 5.5fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2vmin;
}

#welcome > img {
  grid-area: 1 / 3 / 3 / 4;
}

#welcome > article {
  text-align: justify;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

#welcome > article.title {
  grid-area: 1 / 2 / 2 / 3;
  gap: 2vmin;
  font-size: var(--fs-m);
  font-weight: bold;
  letter-spacing: 0.3vmin;
  text-align: right;
}

#welcome > article.title p:first-child {
  font-size: var(--fs-l);
}

#welcome > article.disclaimer {
  grid-area: 2 / 2 / 3 / 3;
  justify-content: space-evenly;
}

#welcome .copyright {
  text-align: center;
  display: grid;
  gap: 2vmin;
}

#welcome .copyright img {
  height: 3vmin;
  width: 3vmin;
  animation: flip 10s infinite;
}

#welcome .copyright img:nth-of-type(1) {
  animation-delay: 0s;
}
#welcome .copyright img:nth-of-type(2) {
  animation-delay: 0.75s;
}
#welcome .copyright img:nth-of-type(3) {
  animation-delay: 1.5s;
}
#welcome .copyright img:nth-of-type(4) {
  animation-delay: 2.25s;
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  25%,
  100% {
    transform: rotateY(-720deg);
  }
}

/* ╔══════════════════════════════════════════════════════╗ */
/* ║  SECTION : CHOIR                                     ║ */
/* ╚══════════════════════════════════════════════════════╝ */

#choir {
  grid-template-columns: 4fr 5fr;
  grid-template-rows: 7fr 2fr;
}

#choir > img {
  grid-area: 1 / 1 / 2 / 2;
}

#choir > p {
  grid-area: 2 / 1;
  justify-self: center;
  align-self: center;
  font-size: var(--fs-l);
  font-weight: bold;
  text-align: center;
}

#choir > article {
  padding: 0 1vmin;
  grid-area: 1 / 2 / 3 / 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 1vmin;
}

#choir article[data-type="song"] {
  display: grid;
  grid-template-columns: auto 4vmin 4vmin;
  grid-template-rows: 1fr;
  justify-items: left;
  align-items: center;
  gap: 2vmin;
  border-radius: 1vmin;
  padding: 1vmin;
  background-color: var(--color11);
}

#choir article[data-type="song"] > p {
  font-size: var(--fs-s);
  font-style: italic;
}

/* ╔══════════════════════════════════════════════════════╗ */
/* ║  SECTION : MENU (selection séquence)                 ║ */
/* ╚══════════════════════════════════════════════════════╝ */

#menu {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

#menu > img {
  grid-area: 1 / 1 / 2 / 2;
  padding: 13vmin;
}

#menu > nav {
  grid-area: 1 / 2;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  justify-items: center;
  align-items: center;
}

/* ╔══════════════════════════════════════════════════════╗ */
/* ║  SECTION : SHEET                                     ║ */
/* ╚══════════════════════════════════════════════════════╝ */

#sheet {
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 3fr 1fr;
  overflow: hidden;
}

#sheet > section.sequence {
  padding: 1vmin;
  grid-area: 1 / 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  text-align: center;
}

#sheet > section.session {
  grid-area: 1 / 2 / 3 / 3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: stretch;
  align-items: stretch;
}

#sheet > section.session > div,
#sheet > section.session > section {
  grid-area: 1 / 1;
}

#sheet > section.session > div {
  z-index: -1;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  justify-content: center;
  background-color: var(--color11);
}

#sheet > section.session > div > p {
  position: absolute;
  padding-right: 5vmin;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  color: var(--color1);
  text-align: center;
  text-transform: uppercase;
  font-size: 16vh;
  font-weight: bolder;
}

#sheet > section.session > section {
  overflow-x: hidden;
  overflow-y: auto;

  padding: 2vmin;

  border: 1px solid var(--color6);
  text-align: justify;
}

#sheet > section.session > section::-webkit-scrollbar {
  width: 1.6vmin;
  background-color: var(--color6);
  border: none;
}

#sheet > section.session > section::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: var(--color5);
}

#sheet > section.session > section::-webkit-scrollbar-thumb:hover {
  background-color: var(--color4);
}

#sheet > nav {
  padding: 1vmin;
  grid-area: 2 / 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

#sheet h3,
#sheet h4 ,
#sheet h5 {
  color: var(--color5);
}

#sheet h2 {
  color: var(--color6);
  font-variant: small-caps;
}

#sheet h3 {
  font-style: italic;
  padding: 1vmin 0;
}

#sheet h4,
#sheet h5 {
  font-weight: bold;
  font-variant: small-caps;
  font-size: var(--fs-m);
}

#sheet cite {
  font-style: italic;
}

/*  */

div.activity {
  padding: 1vmin 5vmin;
  text-align: justify;
}

div.vocable {
  padding: 1vmin 5vmin;
}

div.additional,
div.listen,
div.project {
  padding: 1vmin 0;
  display: grid;
  align-items: center;
  justify-items: center;
}

div.additional {
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  text-align: center;
}

div.listen,
div.project {
  grid-template-columns: 1fr 1fr 3fr;
  gap: 1vmin 0;
}

/*  */

div.listen > p,
div.project > p {
  justify-self: left;
  font-style: italic;
  font-weight: bold;
  color: var(--color13);
}

div.listen > p {
  grid-area: 1 / 3;
}

div.vocable {
  color: var(--color14);
  font-weight: bold;
}

div.additional > div {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

/* ╔══════════════════════════════════════════════════════╗ */
/* ║  NAVIGATION S BUTTONS                                ║ */
/* ╚══════════════════════════════════════════════════════╝ */

main > nav {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 3fr repeat(4, 1.5fr) 3fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
  font-size: var(--fs-m);
  font-weight: bold;
  font-variant: small-caps;
  background-color: var(--color8);
}

main > nav > p {
  cursor: pointer;
  position: relative;
  color: var(--color1);
  transition: color 0.5s;
}

main > nav > p::after {
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: -1vmin;
  width: 0;
  left: 50%;
  border-bottom: 1px solid transparent;
  transition:
    border 0.5s,
    width 0.5s ease-in-out,
    left 0.5s ease-in-out;
}

main > nav > p.off {
  cursor: default;
  pointer-events: none;
  color: var(--color7);
}

main > nav > p:hover {
  color: var(--color2);
}

main > nav > p:hover::after {
  width: 150%;
  left: -25%;
  border-bottom: 1px solid var(--color2);
}

main > nav > p.on {
  cursor: default;
  pointer-events: none;
  color: var(--color3);
}

main > nav > p.on::after {
  width: 150%;
  left: -25%;
  border-bottom: 1px solid var(--color3);
}

/*  */

#menu > nav > article {
  position: relative;
  cursor: pointer;
  width: 80%;
  padding: 0.2vmin 0 0.2vmin 2vmin;
  font-size: var(--fs-s);
}

#menu > nav > article > h1 {
  color: var(--color7);
  transition: color 0.5s;
}

#menu > nav > article:hover > h1 {
  color: var(--color5);
}

#menu > nav > article > hr {
  width: 42%;
  margin: 1vmin 0;
  border: none;
  border-top: 0.4vmin solid #000;
  animation: changeHue 3s linear infinite;
}

#menu > nav > article > hr {
  width: 0;
  margin: 1vmin 0;
  border: 0.1vmin solid var(--color5);
  opacity: 0;
  transition:
    width 0.5s ease-in-out,
    opacity 0.5s;
}

#menu > nav > article:hover > hr {
  width: 42%;
  opacity: 1;
}

#menu > nav > article::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 4vmin;
  left: -6vmin;
  background: url(../svg/illustrations/nav.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/*  */

#menu > nav > article:nth-of-type(1) {
  margin-left: 4%;
  margin-right: 16%;
}

#menu > nav > article:nth-of-type(2) {
  margin-left: 14%;
  margin-right: 6%;
}

#menu > nav > article:nth-of-type(3) {
  margin-left: 16%;
  margin-right: 4%;
}

#menu > nav > article:nth-of-type(4) {
  margin-left: 10%;
  margin-right: 10%;
}

#menu > nav > article:nth-of-type(5) {
  margin-left: 0%;
  margin-right: 20%;
}

#menu > nav > article > h1 {
  font-size: var(--fs-l);
  font-variant: small-caps;
}

/*  */

#sheet > nav > p {
  cursor: pointer;
  padding: 0.5vmin 2vmin; 
  font-weight: bold;
  border-top: 1px solid var(--color8);
  border-bottom: 1px solid var(--color8);
  color: var(--color8);
  transition:
    border-color 0.5s,
    color 0.5s;
}

#sheet > nav > p:hover {
  border-color: var(--color12);
  color: var(--color12);
}

#sheet > nav > p.on {
  cursor: default;
  pointer-events: none;
  border-color: var(--color3);
  color: var(--color4);
}

#sheet > nav > p.off {
  cursor: default;
  pointer-events: none;
  visibility: hidden;
}

/* ╔══════════════════════════════════════════════════════╗ */
/* ║  MEDIA S BUTTONS                                     ║ */
/* ╚══════════════════════════════════════════════════════╝ */

div[data-type="file"],
div[data-type="media"],
div[data-type="wiki"] {
  cursor: pointer;
  height: 3vmin;
  width: 3vmin;
  filter: grayscale(85%) brightness(20%) saturate(0);
  transform: scale(1);
  transition:
    filter 0.5s,
    transform 0.5s;
}

div[data-type="file"]:hover,
div[data-type="media"]:hover,
div[data-type="wiki"]:hover {
  filter: grayscale(0) brightness(100%) saturate(120%);
  transform: scale(1.15);
}

div[data-type="file"] {
  background: url(../svg/icons/file.svg);
  background-position: center;
  background-size: contain;
}

div[data-type="media"] {
  background: url(../svg/icons/media.svg);
  background-position: center;
  background-size: contain;
}

div[data-type="wiki"] {
  background: url(../svg/icons/wiki.svg);
  background-position: center;
  background-size: contain;
}

/* ╔══════════════════════════════════════════════════════╗ */
/* ║  INITIALISATION CONFIG                               ║ */
/* ╚══════════════════════════════════════════════════════╝ */

main > nav > p {
  opacity: 0;
  transform: translateY(-20vh);
}

main > #welcome > article.title {
  transform: translateX(-10vmin);
  filter: opacity(0) blur(2vmin);
}

main > #welcome > article.disclaimer {
  transform: translateY(10vmin);
  filter: opacity(0) blur(2vmin);
}

main > #welcome > img {
  filter: opacity(0) blur(1vmin);
  transform: scale(0.7);
}

/*  */

@starting-style {
  main {
    opacity: transparent;
  }
  body {
    background-color: var(--color8);
  }
}