/* THIS CONCERNS THE WHOLE WEBSITE */
:root {
  /* Sizez */
  --content-max-width: 1400px;
  --p-size: 16px;
  --p-size-mobile: 14px;
  --h1-size: 22px;
  --h1-size-mobile: 22px;
  --padding: 20px;
  --viewer-padding-mobile: 10px;
  --header-block-size: 70px;
  --footer-block-size: 40px;
  --gallery-margin: 5px;
  /* Transitions */
  --very-fast-transition: 0.15s;
  --fast-transition: 0.3s;
  --medium-transition: 0.5s;
  --slow-transition: 0.8s;
  /* Colors */
  --background-color: #1a1a1a;
  --menu-color: rgb(20, 20, 20);
  --content-background-color: rgb(50, 50, 50);
  --hover-color: rgb(70, 70, 70);
  --link-active-color: rgb(30, 30, 30);
  --accent: darkorange;
  --text: rgb(230, 230, 230);
}

* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
  color: var(--text);
  font-family: "Ubuntu Mono", monospace;
  font-size: var(--p-size);
  line-height: 1.2;
}

html {
  overflow-x: hidden;
  min-height: 100%;
  width: 100%;
  display: flex;
}
body {
  background-color: var(--background-color);
  overflow-x: hidden;
  width: 100%;
  flex: 1;
  -webkit-flex: 1;
  /*background-image: url("images/background.png");*/
  background-repeat: repeat;
}
#matrix {
  font-size: 12px;
  color: rgba(12, 12, 12, 0.9);
  position: fixed;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}
.main {
  display: flex;
  flex-direction: column;
  max-width: var(--content-max-width);
  min-height: 100%;
  margin: auto;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.15);
}
p,
h2 {
  padding-bottom: 1em;
  text-align: justify;
}
a {
  color: inherit;
  outline: none;
  transition: var(--very-fast-transition);
}
a:hover {
  color: var(--accent);
}
a img {
  outline: none;
}
img {
  border: 0;
}
ul {
  margin: 0px;
  padding: 0px;
}
.text-accent {
  color: var(--accent);
}
.text-disclaimer {
  opacity: 0.5;
  text-transform: uppercase;
}
hr {
  border: none;
  border-top: 2px dotted var(--menu-color);
  margin-bottom: 1em;
}

/* This controls the look of the content load animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* This controls looks on mobile */
@media screen and (max-width: 800px) {
  * {
    --p-size: var(--p-size-mobile);
    --h1-size: var(--h1-size-mobile);
    --padding: 18px;
    --header-block-size: 50px;
    --footer-block-size: 30px;
  }
}
/* This makes sure the menu doesn't hop rows */
@media screen and (max-width: 900px) {
  * {
    --padding: 22px;
  }
}

/* THIS CONCERNS THE HEADER */

.header {
  background-color: var(--menu-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  z-index: 3;
  position: fixed;
  width: 100%;
  max-width: var(--content-max-width);
}
.logo {
  white-space: nowrap;
}
.logo a,
.nav-menu li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: var(--padding);
  block-size: var(--header-block-size);
  transition: var(--fast-transition) ease;
}
.logo a:hover,
.nav-menu li a:hover {
  background-color: var(--hover-color);
}
.logo a,
.dot {
  font-size: var(--h1-size);
}
.dot {
  color: var(--accent);
}
.nav-menu {
  list-style-type: none;
}
.nav-menu li {
  float: left;
  opacity: 100%;
}
li a.active {
  background-color: var(--link-active-color);
}

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  /*	padding: var(--padding);
	padding-left: calc(var(--padding) - 5px);  */
  width: 178px;
  margin-left: -5px;
  block-size: var(--header-block-size);
}
/* This makes sure the menu doesn't hop rows */
@media screen and (max-width: 900px) {
  .socials {
    width: 170px;
  }
}

.socials a {
  all: revert !important;
  text-decoration: none !important;
}
.socials a:hover {
  background-color: rgba(0, 0, 0, 0) !important;
}
.socials .fab {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  color: var(--text);
  width: 26px;
  height: 26px;
  background-color: var(--text);
  color: black;
  opacity: 0.3;
  transition: var(--very-fast-transition);
  margin-left: 5px;
  border-radius: 1px;
}
.socials .fab:hover {
  opacity: 1;
  width: 28px;
  height: 28px;
}

/* MOBILE BURGER MENU */

.burger {
  padding: 0px var(--padding);
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: var(--text);
  margin: 5px 0px;
  transition: all var(--fast-transition) ease;
}

@media screen and (max-width: 800px) {
  .main {
    overflow-x: hidden;
  }
  .nav-menu {
    position: fixed;
    right: -50%;
    top: var(--header-block-size);
    height: calc(100% - var(--header-block-size));
    width: 50%;
    background-color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.98;
    transition: transform var(--medium-transition) ease;
    overflow-x: hidden;
    z-index: 30;
    border-top: 1px solid var(--content-background-color);
  }
  .nav-menu li {
    opacity: 0;
  }
  .nav-menu li a,
  .socials {
    width: 50vw;
    justify-content: center;
  }

  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(-100%);
}

@keyframes navLinkFade {
  from {
    background-color: var(--hover-color);
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
  opacity: 0;
}
.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* THIS CONCERNS THE PAGE CONTENT */
.content-bg {
  background-color: var(--content-background-color);
  display: flex;
  flex-grow: 1;
  overflow-y: auto;
  position: relative;
  padding-top: var(--header-block-size);
}
.content {
  animation: fadeIn var(--slow-transition);
  padding: var(--padding);
  flex-grow: 1;
  position: relative;
}

/* Home look */
.game-container {
  background-color: var(--background-color);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--menu-color);
  position: relative;
}
.game {
  height: 100%;
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}
#game__fullscreen-button {
  opacity: 20%;
  color: var(--text);
  font-size: 36px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  transition: var(--very-fast-transition);
}
#game__fullscreen-button:hover {
  opacity: 90%;
  font-size: 40px;
  bottom: 18px;
  right: 18px;
}
.fullScreen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
#game__play-button {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--fast-transition);
}
#game__play-button * {
  color: var(--text);
  font-size: 36px;
  opacity: 30%;
  transition: var(--very-fast-transition);
}
#game__play-button:hover {
  opacity: 90%;
  font-size: 40px;
}
#game__play-button:hover * {
  opacity: 100%;
  font-size: 40px;
}

/* Downloads look */
.downloads-content {
  padding: 0px;
  position: relative;
}

[data-tab-content] {
  display: none;
}

.active[data-tab-content] {
  display: block;
}

.browser {
  background-color: var(--menu-color);
  width: 15%;
  max-width: calc(var(--content-max-width) * 0.15);
  height: calc(100% - 70px);
  border-top: 1px solid var(--content-background-color);
  border-right: 1px solid black;
  flex-grow: 1;
  overflow-y: hidden;
  overflow-x: hidden;
  position: fixed;
  transition: var(--medium-transition) ease;
  z-index: 3;
}
.browser__folder-wrapper {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: scroll;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.browser__folder-wrapper::-webkit-scrollbar {
  display: none;
}

.browser--open {
  width: 50%;
  max-width: calc(var(--content-max-width) * 0.5);
}
#browser__button {
  font-size: 30px;
  color: grey;
  transition: var(--medium-transition) ease;
  margin-right: 10px;
}
.browser__button--open {
  transform: rotate(180deg);
  margin-left: 10px;
}
@media screen and (max-width: 800px) {
  .browser {
    max-width: 100%;
    width: 100%;
    height: 50px;
    z-index: 1;
    /*transform: translateX(calc(-100% + 40px));*/
  }
  #browser__button {
    transform: rotate(90deg);
    margin-right: var(--padding);
  }
  .browser__button--open {
    transform: rotate(270deg) !important;
  }
  .browser--open {
    width: 100%;
    height: calc(100% - 50px);
    opacity: 98%;
    transform: translateX(0);
  }
  .tab {
    opacity: 0;
    transition: var(--fast-transition) ease;
  }
  .browser--open .tab {
    opacity: 1;
  }
}
#browser__headline {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0px;
  min-block-size: 50px;
  border-bottom: 1px dotted var(--content-background-color);
  position: relative;
  transition: var(--fast-transition) ease;
}
#browser__headline:hover {
  background-color: rgb(35, 35, 35);
}
#browser__headline__text {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 5px;
}
#browser__headline__text h2 {
  font-size: 22px;
  color: rgb(100, 100, 100);
  padding: 0%;
}
#browser__headline__text p {
  font-size: 13px;
  color: rgb(80, 80, 80);
  padding: 0%;
}
@media screen and (max-width: 800px) {
  #browser__headline {
    min-height: 50px;
  }
  #browser__headline__text {
    flex-direction: row;
    align-items: center;
  }
  #browser__headline__text p {
    padding-left: 10px;
  }
}
.folder__open {
  background-color: var(--link-active-color);
}
.folder__content {
  display: none;
  width: 100%;
}
.folder__content--open {
  display: block;
}
.tabs {
  list-style: none;
}
.tab {
  cursor: pointer;
  display: block;
  align-items: center;
  padding: 0px 10px;
  min-block-size: 35px;
  border-bottom: 1px dotted var(--content-background-color);
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: var(--fast-transition) ease;
}
.tabspacer {
  display: block;
  align-items: center;
  padding: 0px 10px;
  min-block-size: var(--footer-block-size);
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (max-width: 800px) {
  .tab {
    white-space: normal;
    display: flex;
  }
}
.tab.active {
  background-color: var(--content-background-color);
  color: rgba(255, 140, 0, 0.9);
}
.tab:hover {
  color: var(--accent);
  background-color: var(--hover-color);
}
.tab i {
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: grey;
}
.pack {
  padding-left: 30px;
  color: rgb(180, 180, 180);
}
/* Viewer */

.viewer {
  margin-left: 15%;
  padding: var(--padding);
  height: auto;
  overflow-y: auto;
  transition: var(--medium-transition) ease;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.browser::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 800px) {
  .viewer {
    margin-left: 0px;
    margin-top: 50px;
    padding: var(--viewer-padding-mobile);
  }
}
.viewer__pack {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.viewer__pack__thumbnail {
  flex: 1 1 260px;
}
.viewer__pack__thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.viewer__pack__video {
  flex: 1 1 320px;
}
.viewer__pack__video iframe {
  display: flex;
  width: 100%;
}
.viewer__pack__description {
  background: var(--background-color);
  flex: 10 1 260px;
  padding: 10px 15px;
  border-bottom: 1px solid rgb(0, 0, 0);
  border-top: 1px solid rgb(0, 0, 0);
}
.viewer__pack__description h3 {
  font-size: var(--h1-size);
  padding-bottom: 6px;
}
.viewer__pack__tracklist {
  background: var(--background-color);
  flex: 1 1 100%;
  padding: 10px 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgb(0, 0, 0);
}
.viewer__pack__tracklist * {
  color: gray;
}
.viewer__pack__tracklist li {
  transition: 0.1s ease;
}
.viewer__pack__tracklist li:hover {
  background-color: rgb(45, 45, 45);
}
.viewer__pack__tracklist ul {
  list-style: none;
}
.viewer__pack__tracklist a {
  text-decoration-line: none;
  display: flex;
  border-bottom: 1px dotted rgb(80, 80, 80);
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.viewer__pack__tracklist i {
  color: rgb(80, 80, 80);
}

/* Gallery look */
.discography-text {
  display: flex;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: calc(var(--gallery-margin) * -1);
}
.gallery__item {
  margin: var(--gallery-margin);
  position: relative;
  text-align: center;
}
.gallery__item img {
  width: 100%;
  height: 100%;
}
.gallery__item h3 {
  font-size: 30px;
}
.gallery__item h4 {
  font-size: 20px;
  opacity: 0.8;
}
.gallery__item__overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: var(--fast-transition);
  background: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  padding: 10px;
  box-shadow: 0px 0px 20px 1px rgba(201, 201, 201, 0.1);
  overflow: hidden;
}

.gallery__item__overlay__music-platforms {
  margin: 8px;
}
.gallery__item__overlay__music-platforms .fab {
  font-size: 24px;
  opacity: 0.6;
  text-decoration: none;
  color: var(--text);
  margin: 2px 3px;
  background-color: rgba(255, 255, 255, 0.9);
  width: 34px;
  padding: 5px 0px;
  color: black;
  position: relative;
}
@media screen and (min-width: 800px) {
  .gallery__item__overlay__music-platforms .fab {
    transition: var(--very-fast-transition);
  }
  .gallery__item__overlay__music-platforms .fab:hover {
    opacity: 1;
    width: 38px;
  }
}
.gallery__item__overlay__year {
  text-transform: capitalize;
  position: absolute;
  bottom: 5px;
  font-size: 20px;
  opacity: 0.7;
}

/* THIS CONSERNS THE FOOTER */

footer {
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
  background-color: var(--menu-color);
  padding: 0px var(--padding);
  z-index: 3;
  border-top: 1px solid var(--content-background-color);
}
.footer__tag {
  width: 90%;
  padding: 0px;
}
footer p {
  padding: 0px;
  padding-left: 10px;
}
footer a,
footer p {
  display: flex;
  align-items: center;
  block-size: var(--footer-block-size);
  color: grey;
}
@media screen and (max-width: 400px) {
  footer * {
    font-size: 12px;
  }
}