/*!
 * Copyright 2023 - Devious Records
 */

@font-face {
  font-family: 'basic_square';
  src: url('../fonts/basic_square_7-webfont.woff') format('woff'),
    url('../fonts/basic_square_7-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;

}

html,
body {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  background: #000;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#footer {
  position: fixed;
  display: flex;
  flex-direction: row;
  bottom: 0px;
  width: 100%;
  height: 8dvh;
  line-height: 8dvh;
  color: white;
  z-index: 3;
  transition: all 300ms ease;
}

#footerNameContainer {
  flex: 1;
  height: 8dvh;
  display: flex;
  align-items: center;
  padding-left: 4vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

#copyright {
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
}

#footerLogoContainer {
  flex: 1;
  height: 8dvh;
  padding-right: 4vw;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.footerLogo {
  position: relative;
  height: 6dvh;
  object-fit: contain;
  aspect-ratio: 1;
}


#navbar {
  top: 0px;
  width: 100%;
  height: 8dvh;
  line-height: 8dvh;
  color: white;
  z-index: 3;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  transition: all 300ms ease;
}

.navbarButton {
  height: 8dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbarImage {
  height: min(5dvh, 7vw);
  object-fit: contain;
  aspect-ratio: 1;
}


#content {
  font-size: 26px;
  color: #000;
  padding-bottom: 8dvh;
  display: flex;
  flex-direction: column;
  z-index: 2;
  position: relative;
}

#wrapper{
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#titleScreen {
  width: 100%;
  height: 84dvh;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  top: 0px;
  /* background-image:url('https://68.media.tumblr.com/595a5fa01fe53ca0e4ca8f37bacc849d/tumblr_nve67mJtue1tanofjo1_500.gif');
    background-size:cover; */
}

#titleLogoFit {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}




.box {
  position: absolute;
  width: min(85vw, 82dvh);
  height: min(85vw, 82dvh);
  color: #fff;
  background: #151320;
  font: 700 2rem 'Montserrat';
  line-height: 400px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 3px;
}

.box::before,
.box::after {
  content: '';
  z-index: -1;
  position: absolute;
  width: calc(100% + 2vw);
  height: calc(100% + 2vw);
  top: -1vw;
  left: -1vw;
  border-radius: 8px;
  background: linear-gradient(45deg,
    #8900f9 , #207cca , #28f5fc , #28f5fc , #d200f7 , #ff88f7 , #7a56c6 ,
     #7a56c6 , #ff88f7 , #d200f7 , #28f5fc , #28f5fc , #207cca , #8900f9 
  );
  background-size: 200%;
  animation: border 20s linear infinite;
}

.box::after {
  filter: blur(40px);
}

@keyframes border {
  0%, 100% {
      background-position: 0 0;
  }

  50% {
      background-position: 300%;
  }
}

.path {
  stroke-dasharray: 60000;
  stroke-dashoffset: 60000;
  animation: dash 4.5s linear forwards, filling 5s ease-in forwards;
}


@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes filling {
  0%, 90% { fill: #000; fill-opacity: 0; }
  100% { fill: #000; fill-opacity: 1; }
}

#svgTitleContainer {
  position: absolute;
  width: min(75vw, 75dvh);
  height: min(75vw, 75dvh);
  color: #fff;
  font: 700 2rem 'Montserrat';
  line-height: 400px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 3px;
}

#svgLineContainer {
  position: absolute;
  width: min(75vw, 75dvh);
  height: min(75vw, 75dvh);
  color: #fff;
  font: 700 2rem 'Montserrat';
  line-height: 400px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 3px;
}

#imageContainer {
  display: flex;
  position: relative;
  width:100%; 
  height:100%;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.fade-in {
  animation: fadeIn ease 8s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  50% {opacity:0;}
  100% {opacity:1;}
}

@keyframes grow {
	to {
		transform: scale(1000);
	}
}

@keyframes fadeOut {
	0% {opacity:1;}
  50% {opacity:0.5;}
  100% {opacity:0;}

}

@keyframes remove {
  to {
    background: transparent
  }
}

.flash-container {
	animation: grow 0.1s 4s linear forwards;
	width: 20px;
	height: 20px;
	z-index: 4;
  margin: 0 auto;
}

.flash {
  animation: fadeOut 5s 4s linear forwards , remove 1s;
  background: radial-gradient(circle, white, transparent 10%);
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 100%;
}

.hidden {
  visibility: hidden;
}

.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 8dvh;
  width: 100%; 
  height: 84dvh; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
  align-items: center;
  align-content: center;
  justify-content: center;
}

.modal-content {
  background: linear-gradient(45deg, #8900f9 , #207cca , #28f5fc , #28f5fc , #d200f7 , #ff88f7 , #7a56c6 , #7a56c6 , #ff88f7 , #d200f7 , #28f5fc , #28f5fc , #207cca , #8900f9 );
  padding: 20px;
  border: 0.5vw solid #888;
  width: min(75vw, 75dvh);
  height: min(75vw, 75dvh);
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

.modalInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: min(70vw, 70dvh);
  height: min(70vw, 70dvh);
  color: #fff;  
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  align-self: flex-end;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#coverModalFit {
  position: relative;
  width: min(60vw, 60dvh);
  height: min(60vw, 60dvh);
  z-index: 1;
  border: 0.5vw solid #ede;
}

.modalLinkImage {
  height: min(5dvh, 7vw);
  object-fit: contain;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.2vw solid #000;

}