/* FABER 5 */

/* General */

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

html {
  height: -webkit-fill-available;
}

body {
  background-color: var(--global-1);
  transition: 0.2s ease;
  height: -webkit-fill-available;
}

/* Variables */

:root {
  --global-1: #f2f2f7;
  --global-2: transparent;
  --global-3: #ffffff;
  --global-4: #1d1d1f;

  --blur-1: rgba(255, 255, 255, 0.8);
  --blur-2: rgba(0, 0, 0, 0.7);

  --theme: #625cc0;
  --text: #6e6e73;
  --link: #06c;
  --spotify: #1ed760;
}

[theme-variable="dark"] {
  --global-1: #16161d;
  --global-2: transparent;
  --global-3: #000000;
  --global-4: #f5f5f7;

  --blur-1: rgba(0, 0, 0, 0.7);
  --blur-2: rgba(255, 255, 255, 0.8);

  --theme: #63e6e1;
  --text: #86868b;
  --link: #2997ff;
  --spotify: #1ed760;
}

/* Lines */

hr.one {background: var(--global-2); border: none; height: 1px; margin: 1em 0 1em 0;}
hr.two {background: var(--global-2); border: none; height: 1px; margin: 0.3em 0 0.3em 0;}
hr.three {background: var(--global-2); border: none; height: 1px; margin: 0.15em 0 0.15em 0;}

/* Links */

a.one:link {color: var(--blur-2); text-decoration: none; cursor: pointer; transition: 0.2s ease;}
a.one:visited {color: var(--blur-2); text-decoration: none; cursor: pointer;}
a.one:hover {color: var(--blur-2); text-decoration: underline; cursor: pointer;}
a.one:active {color: var(--blur-2); text-decoration: none; cursor: pointer;}

/* Grid */

.grid {
  display: grid;

  grid-template-columns: 0.7em 1fr 0.7em;
  grid-template-rows: 0.7em 1fr 0.7em;

  height: 100vh;
}

/* Navigator */

#navigator {
  display: grid;

  grid-template-columns: 8px 1fr 8px;
  grid-template-rows: 48px;

  grid-column: 2 / 3;
  grid-row: 2 / 3;

  justify-self: end;
  align-self: end;

  background-color: var(--blur-1);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);

  border-radius: 50pt;

  transition: 0.2s ease;
  z-index: 10;
}

/* Logo */

#logo {
  display: grid;

  grid-template-columns: auto;
  grid-template-rows: auto;

  grid-column: 2 / 3;
  grid-row: 2 / 3;

  justify-self: start;
  align-self: start;

  background-color: var(--global-2);
  border: none;
}
#logo svg {
  background-color: var(--global-2);
  fill: var(--blur-2);

  width: 166px;
  height: 30px;

  place-self: center;

  transition: 0.2s ease;
  cursor: default;
}

/* Links */

#links {
  display: grid;

  grid-template-columns: 32px 32px 32px;
  grid-template-rows: 32px;

  grid-gap: 0.7em;

  grid-column: 2 / 3;
  grid-row: 1 / 2;

  place-self: center;

  background-color: var(--global-2);
}

/* Github */

#github {
  display: grid;

  grid-template-columns: auto;
  grid-template-rows: auto;

  grid-column: 1 / 2;
  grid-row: 1 / 2;

  place-self: center;

  background-color: var(--global-2);
  border: none;
}
#github svg {
  background-color: var(--global-2);
  fill: var(--global-4);

  width: 32px;
  height: 32px;

  place-self: center;

  transition: 0.2s ease;
  cursor: pointer;
}

/* Spotify */

#spotify {
  display: grid;

  grid-template-columns: auto;
  grid-template-rows: auto;

  grid-column: 2 / 3;
  grid-row: 1 / 2;

  place-self: center;

  background-color: var(--global-2);
  border: none;
}
#spotify svg {
  background-color: var(--global-2);
  fill: var(--spotify);

  width: 32px;
  height: 32px;

  place-self: center;

  transition: 0.2s ease;
  cursor: pointer;
}

/* Theme */

#theme {
  display: grid;

  grid-template-columns: auto;
  grid-template-rows: auto;

  grid-column: 3 / 4;
  grid-row: 1 / 2;

  place-self: center;

  background-color: var(--global-2);
  border: none;
}
#theme svg {
  background-color: var(--global-2);
  fill: var(--global-2);

  background-image: linear-gradient(137.42deg, #1a75ff, #6a5df8, #c957e6, #d2486b, #bf44ac, #ab47d0, #9460f3, #46aced, #4ec4a3, #b8ba05, #d2486b);
  background-size: 1000% 1000%;
  border-radius: 50%;

  -webkit-animation: Gradient 60s ease infinite;
  -moz-animation: Gradient 60s ease infinite;
  animation: Gradient 60s ease infinite;

  width: 32px;
  height: 32px;

  place-self: center;

  transition: 0.2s ease;
  cursor: pointer;
}

/* Multicolor Keyframes */

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Studio */

#studio {
  display: grid;

  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  
  grid-column: 2 / 5;
  grid-row: 2 / 5;

  border-radius: 14px;
  overflow-y: hidden;
}

/* Content */

#content {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(336px, 1fr));
  
  grid-column: 1 / 2;
  grid-row: 1 / 2;

  grid-gap: 0.7em;

  overflow-y: scroll;
  scrollbar-width: none;
  -webkit-overflow-style: none;
}
#content::-webkit-scrollbar {
  display: none;
}

/* Carousel */

.carousel {
  display: grid;

  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr;

  aspect-ratio: 56 / 83;

  position: relative;
}

.carousel > ul {
  display: grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  
  grid-column: 1 / 3;
  grid-row: 1 / 2;

  margin: 0;
  padding: 0;

  list-style: none;
}

.slide {
  position: absolute;

  inset: 0;
  opacity: 0;

  transition: 200ms opacity ease-in-out;
  transition-delay: 200ms;

  border-radius: 14px;
  overflow: hidden;
}

.slide > img {
  display: block;

  max-width: 100%;
  height: auto;

  object-position: center;
  object-fit: cover;
}

.slide[data-active] {
  opacity: 1;
  z-index: 1;
  transition-delay: 0ms;
}

.carousel-button {
  position: absolute;

  background: none;
  background-color: transparent;
  color: transparent;
  border: none;

  z-index: 2;
  cursor: pointer;
}

.carousel-button:hover,
.carousel-button:focus {
  background-color: transparent;
  color: transparent;
}

.carousel-button:focus {
  outline: none;
}

.carousel-button.prev {
  width: 100%;
  height: 100%;

  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.carousel-button.next {
  width: 100%;
  height: 100%;

  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

/* Information */

#information {
  display: grid;

  grid-template-columns: 0.7em 1fr 0.7em;
  grid-template-rows: 0.7em 1fr 0.7em;;
  
  width: 100%;
  height: 100%;

  background-color: var(--global-3);

  transition: 0.2s ease;
  overflow-y: hidden;
}

#information-content {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  overflow-y: scroll;

  scrollbar-width: none;
  -webkit-overflow-style: none;
}
#information-content::-webkit-scrollbar {
  display: none;
}

/* Text */

h1 {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 1.06rem;
  font-weight: 400;
  letter-spacing: -.022em;

  color: var(--global-4);
  transition: 0.2s ease;

  margin-top: 0px;
  margin-bottom: 0px;
}

h2 {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -.022em;

  color: var(--global-4);
  transition: 0.2s ease;

  margin-top: 0px;
  margin-bottom: 20px;
}

p {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -.022em;

  line-height: 1.33337;

  color: var(--global-4);
  transition: 0.2s ease;

  margin-top: 0px;
  margin-bottom: 15px;
}

text {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -.022em;

  line-height: 1.33337;

  color: var(--global-4);
  transition: 0.2s ease;

  margin-top: 0px;
  margin-bottom: 0px;
}

.bold {
  font-weight: 500;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}