@import "typography.css";
@import "global.css";

html {
  font-size: 62.5%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.hide{
  display: none;
}

body {
  font-size: 2rem;
  font-family: 'Montserrat';
  font-weight: 400;
  color: #2b2b2b;
  margin: 0;
  padding: 0;
  background-color: white;
  background-size:cover;
  align-items: center;
  justify-content: center;
}

.comingSoon {
  font-size: 3rem;
  margin-bottom: 1rem;
  padding: 0 2rem;
}

canvas { 
	display: block; 
	position: fixed;
	z-index: -1; 
	left: 0; 
	top: 0;
}

.div-header-home {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 100vh; */
  height: 100%;
  position: absolute;
}

.home-header{
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  /* background-image: url("../assets/img/testbg.jpg");
  background-position: center;
  background-attachment: fixed; */
}

.current{
  color: white;
  letter-spacing: 0.2rem;
  opacity: 0.8;
}

nav {
  display: flex;
  justify-content: center;
  padding-top: 5rem;
}

.white-nav {
  color: white;
  transition: 0.3s opacity;
}

.white-nav:hover {
  opacity: 1;
}

nav > a {
  padding: 0.3rem;
  color: black;
  opacity: 0.8;
  text-decoration: none;
}

.footer {
  color: white;
  height: 50rem;
  position: relative;
  z-index: 1;
  /* grid-gap: 2rem; */
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 2rem 40% auto 40% 2rem;
  grid-template-areas:
  ". discover . contactje ."
  ". follow . contactje .";
  margin: 0 auto;
  max-width: 85rem;
  margin-top: 13rem;
}

.discover__article {
  grid-area: discover;
}

.contact__article {
  grid-area: contactje;
}

/* .music__article {
  grid-area: music;
} */

.text__footer {
  line-height: 2.9rem;
  font-size: 1.6rem;
  opacity: 0.8;
  margin-top: 2rem;
}

.card-image__footer {
  margin-left: -2rem;
  margin-top: 3rem;
}

section {
  position: relative;
  z-index: 1;
  background-color: white;
}

.footer-div_sm {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: 3rem;
  bottom: 0;
  position: fixed;
}

.footer-div_sm > a {
  margin: 1.5rem;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.footer-div_sm > a:hover {
  opacity: 1;
}

.div_sm {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  width: 100%;
  padding-bottom: 3rem;
  bottom: 0;
}

.div_sm > a {
  margin: 1.5rem;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.div_sm > a:hover {
  opacity: 1;
}

.headertext-div {
 display: flex;
 position: relative;
 top: 35%;
 flex-direction: column;
 align-items: center;
}

.header-btn {
  z-index: 2;
  position: relative;
  top: 45%;
}

.section1-header {
  height: 100vh;
}

.broodtekst-style {
  line-height: 3rem;
  margin-bottom: 4rem;
}

.accumulation_homepage__title {
  font-family: 'Montserrat';
  font-weight: 500;
  font-size: 7rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  letter-spacing: 0.9rem;
}

.firefly-title_h2 {
  font-family: 'Montserrat';
  font-weight: 600;
  color: #1B3446;
  font-size: 3.5rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.4rem;
}

.homeHeader-text {
  margin: 0 1rem;
  opacity: 0.5;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  text-align: center;
  margin-top: 2rem;
  line-height: 3rem;
  animation-name: fade;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  padding: 0 2rem;
}

@keyframes fade {
  0% {
    opacity: 0.3
  } 
  100% {
    opacity: 0.5
  }

}

.section-firefly {
  /* height: 100vh; */
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  /* display: grid;
  column-gap: 4rem; */
  /* grid-template-columns: 10% 0.3fr 1.5fr 10%;
  grid-template-rows: 1fr;
  grid-template-areas: ". cover title ."; */
  padding-top: 10rem;
  padding-bottom: 10rem;
}



.firefly-title {
  grid-area: title;
  align-self: center;
  margin-left: 6rem;
}

.firefly-description {
  margin-top: 10rem;
}

.cover-img {
  grid-area: cover;
  justify-content: center;
  align-self: center;
  justify-self: center;
}

.introbutton{
  display: flex;
  justify-content: center;
  padding-top: 3rem;
}

.intro{
  display: flex;
  justify-content: center;
}

.italic {
  font-style: italic;
}

.underline {
  border-bottom: 0.2rem solid #2b2b2b
}

.artist_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 9rem;
}

.artist__name {
  margin-top: 2rem;
  margin-bottom: 4rem;
  font-size: 1.5rem;
  max-width: 15rem;
  text-align: center;
  line-height: 2.2rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1rem;
}

.artist__thanks {
  margin-top: 10rem;
  margin-bottom: 4rem;
  font-size: 1.3rem;
  max-width: 60rem;
  text-align: center;
  line-height: 3rem;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.1rem;
  padding: 2rem 3rem;
  border: 0.1rem solid #2b2b2b;
}

.thanks_bold {
  font-size: 1.5rem;
  font-weight: 600;
}

.artist__qualities::before {
  content:"";
  background-color: black;
  width: 0.1rem;
  height: 2rem;
  position: absolute;
  top: -3rem;
  left: 50%;
}

.artist__qualities {
  position: relative;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 2.2rem;
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  opacity: 0.8;
}

.accum-intro {
  font-family: 'Montserrat';
  font-weight: 500;
  padding: 8rem 0rem;
  line-height: 4.6rem;
  text-align: center;
  max-width: 63rem;
  font-size: 2.7rem;
}

.acc-introsection {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 70rem;
}

.acc-artistsection {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /* height: 100rem; */
}

.quote{
  color: #ececec;
  font-size: 3rem;
  letter-spacing: 0.3rem;
  justify-content: center;
  display: flex;
  align-items: center;
  align-self: center;
  height: 100%;
}

.listen{
  background-color: transparent;
  border: 0.2rem solid #2b2b2b;
  padding: 1.5rem 6rem;
  margin: 3rem;
  margin-left: 0rem;
  transition: 0.4s;
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: bold;
}

.link{
  color: #2b2b2b;
  text-decoration: none;
}

.link:hover{
  color: #ececec;
}

.active-nav {
  opacity: 1;
  color: white;
  text-decoration: none;
}

.selected{
  background-color: #2b2b2b;
  color: #ececec;
}

.listen:hover{
  color: #ececec;
  background-color: #2b2b2b;
  border: 0.2rem solid #2b2b2b;
  opacity: 0.9;
}

.listen:focus{
  outline: none;
}

.player{
 display: flex;
 flex-direction: column;
 align-items: center;
 padding-top: 4rem;
}

.artists_container {
  max-width: 90rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "alexander maxim nastya sergey";
  grid-gap: 6rem;
}

.alexander {
  grid-area: alexander;
}
.maxim {
  grid-area: maxim;
}
.nastya {
  grid-area: nastya;
}
.sergey {
  grid-area: sergey;
}

.linkdotted {
  color: #2b2b2b;
  text-decoration: none;
}

.armen {
  color: #8477E3;
  text-decoration: none;
  border-bottom: 0.1rem solid #8477E3;
}

.progress__filled {
  width:50%;
  height:10px;
  background-image: linear-gradient(to left, #FF3467, #FF7597);
  flex:0;
  flex-basis:0%;
  border-radius: 4rem;
}

.progress{
  margin-top: 2rem;
  margin-bottom: 2rem;
  flex:10;
  position: relative;
  display:flex;
  flex-direction: row;
  flex-basis:100%;
  height:10px;
  transition: 0.3s;
  background: #582C45;
  cursor:ew-resize;
  border-radius: 4rem;
}

.muziekbalk{
  display: flex;
  width: 40rem;
}

.player__button{
  border:0;
  background-color: white;
  line-height:1;
  color:white;
  text-align: center;
  outline:0;
  padding: 0;
  cursor:pointer;
  max-width:5rem;
  width: 5rem;
  height: 5rem;
  font-size: 1.3rem;
  border-radius: 50%;
  opacity: 0.8;
  transition:0.3s;
}

.player__button:hover{
  opacity: 1;
}

.skip{
  width: 3rem;
  height: 3rem;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}

.player__button:focus {
  border-color: #FF3467;
  outline: none;
}

.playbuttons{
  display: flex;
  justify-content: center;
  align-items: center;
}

.balkcontainer{
  height: 5rem;
}

.balkjes1{
  width: 0.5rem;
  height: 2rem;
  background-color: grey;
}

.balkjes2{
  width: 0.5rem;
  height: 1rem;
  background-color: #FF3467;
}

.balkjes3{
  width: 0.5rem;
  height: 1rem;
  padding: 1rem;
  background-color: grey;
}

.startAnimation{
  animation-name: balk;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.startAnimation2{
  animation-name: balk2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes balk {
  to{
    height: 4rem;
  }
}

@keyframes balk2 {
  to{
    height: 3rem;
  }
}

@keyframes balk3 {
  to{
    height: 6rem;
  }
}

.balkenveel{
  display: flex;
  justify-content: center;
}

input[type=range] {
  -webkit-appearance: none;
  background:transparent;
  width: 4rem;
  margin: 0 1rem;
}
input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 50%;
  height: 0.54rem;
  cursor: pointer;
  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0), 0 0 0.1rem rgba(13, 13, 13, 0);
  background: #FF3467;
  opacity: 0.5;
  border-radius: 4rem;
  transition: all 0.1s;

}
input[type=range]::-webkit-slider-thumb {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.5rem;
  box-shadow:0 0 0.2rem rgba(0,0,0,0.2);
  transition: 0.3s;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  opacity: 1;
  background: #FF3467;
}

.africaCont{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar {
  margin: 0 2rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.6rem;
}

.africa{
  border-radius: 50%;
  margin-top: 2rem;
}

.titel-song{
  font-weight: bold;
  font-size: 2rem;
}

.microfoon{
  margin-bottom: -0.7rem;
  justify-content: flex-end;
}

.geluid{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 40rem;
}

.li-songs {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem;
}

.playlist{
  width:4rem;
  height: 4rem;
  font-size: 1rem;
}


/* .song::after{
  content:"";
  background-color: grey;
  opacity: 0.2;
  height: 0.1rem;
  width: 50rem;
  bottom: -1rem;
  left: 0;
  position: absolute;
} */



.timeDiv{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: flex-end;
  width: 30rem;

}

.buttonAndTitel{
  display: flex;
}

/* FORMULIER */

.formulier{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.label-name{
  font-size: 3rem;
  text-align: center;
  margin-top: 15rem;
  color: #28241E;
}

.input-name{
  background-color: transparent;
  border: 0rem solid transparent;
  border-bottom: 0.2rem solid #EB5637;
  font-size: 3rem;
  padding-top: 2rem;
  color: #28241E;
}

.input-name:focus{
  outline: none;
}

strong{
  font-weight: 500;
  color:#EB5637;
}

.submit{
  background-color: #EB5637;
  color: #B74030;
  border: none;
  margin-top: 4rem;
  font-size: 3rem;
  text-transform: lowercase;
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  }

  .choice-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 50rem;

  }

  .choice{
    font-size: 1.8rem;
    margin: 1rem;
    background-color: rgba(0, 0,0, 0.04);
    border-radius: 1.7rem;
    padding: 1rem 2rem 1rem 2rem;
  }

  .choice:hover{
    background-color: rgba(0, 0,0, 0.09);
  }

  /* input[type="checkbox"] {
    display: none;
  } */

  input[type="checkbox"]+label {
    position: relative;
    display: flex;
    align-items: center;
    /* color: #9e9e9e; */
    transition: color 250ms;
    cursor: pointer;
  }

  /* input[type="checkbox"]+label:hover, input[type="checkbox"]:focus+label {
    color: #1d2224;
  } */

  /* input[type="checkbox"]:checked+label {
    color: black;
  } */

  input[type="checkbox"]:checked+label>span {
    border: 1.3rem solid #FF3467;
    animation: shrink-bounce 200ms;
  }


  .credit_false {
    display: none;
  }

  .credit_true {
    display: grid;
  }


/* SLIDESHOW */
.slideshow-container{
  max-width: 100rem;
  position: relative;
  margin: 0 auto;
}

.mySlides{
  display: none;
}

.prev, .next{
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -2.2rem;
  padding: 1.6rem;
  color: white;
  font-weight: bold;
  font-size: 1.8rem;
  transition: 0.6s ease;
  border-radius: 0 0.3rem 0.3rem 0;
}

.next{
  right: 0;
  border-radius: 0.3rem 0 0 0.3rem;
}

.prev:hover, .next:hover{
  background-color: rgba(0, 0, 0, 0.8);
}

.text{
  color: #f2f2f2;
  font-size: 1.5rem;
  padding: 0.8rem 1.2rem;
  position: absolute;
  bottom: 0.8rem;
  width: 100%;
  text-align: center;
}

.numbertext{
  color: #f2f2f2;
font-size: 1.2rem;
padding: 0.8rem 1.2rem;
position: absolute;
top: 0;
}

.dot {
  cursor: pointer;
  height: 1.5rem;
  width: 1.5rem;
  margin: 0 0.2rem;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.button-play  {
	color: black;
	background-color: transparent;
	display: flex;
	justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 2rem;
  border: none;
}

.button-play:focus {
  outline: transparent;
}

.subtitle-song{
  font-weight: bold;
  font-size: 1.5rem;
  padding-bottom: 0.3rem;
  }

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

.text-container-song {
  padding-left: 2rem;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.accum-quote::before {
  content: "";
  height: 0.1rem;
  width: 2rem;
  position: absolute;
  margin-left: -2.5rem;
  margin-top: 0.9rem;
  background-color: black;
  
}

@media only screen and (max-width: 414px) {
  .firefly-title {
    margin-left: 0rem;
    position: relative;
    margin-top: 10rem;
  }



  .firefly-title:before {
    content:"";
    background-color: black;
    width: 0.1rem;
    height: 4rem;
    top: -7rem;
    position: absolute;
  }

  .accumulation_homepage__title{
    font-size: 2.3rem;
    letter-spacing: 0.5rem;
    font-weight: 600;
  }

  .homeHeader-text {
    font-size: 1.2rem;
    max-width: 30rem;
  }

  .accum-intro {
    margin: 0rem 2rem;
    padding: 6rem 0;
    line-height: 3.6rem;
    font-size: 2rem;
    text-align: center;
  }

  .cover-img {
    width: 80vw;
  } 

  .broodtekst-style {
    padding: 2rem 1rem 3rem 1rem;
    text-align: left;
  }

  .section-firefly {
    /* height: 150vh; */
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
}


  .nav_onepager {
    display: none;
  }

  .headertext-div {
    display: flex;
    position: relative;
    top: 35%;
    flex-direction: column;
    align-items: center;
   }

   .header-btn {
     display: none;
   }

   .div_sm {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    height: 20%;
    width: 70%;
    padding-bottom: 3rem;
    bottom: 2rem;
    position: absolute;
  }




.card-image__footer {
  margin-left: 0;
  margin-top: 3rem;
}

/* .music__article {
  margin-top: 6rem;
} */

.artists_container {
  max-width: 60rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "alexander"
  "maxim"
  "nastya"
  "sergey";
  grid-gap: 10rem;
}

.artist_div {
  margin-top: 1rem;
}

.acc-artistsection {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.theArtists {
  margin-bottom: 8rem;
}
}


@media only screen and (max-width: 319px) {
  /* .footer {
    height: 130rem;
    color: white;
    position: relative;
    z-index: 1;
    grid-gap: 0;
    display: grid;
    grid-template-rows: 6rem auto auto 2rem;
    grid-template-columns: 0.5rem 1fr 0.5rem;
    grid-template-areas:  ". . ."
    ". donate ."
    ". contact ."
  } */

  .copyright {
    text-align: center;
    line-height: 2rem;
  }
}

/* and (min-width: 700px) */
@media only screen and (max-width: 1120px) and (min-width: 415px) {
  /* .cover-img {
    width: 20rem;
  } */

  .broodtekst-style {
    padding: 2rem 3rem 3rem 3rem;
  }
}

@media only screen and (max-width: 589px){
  .footer {
    height: 90rem;
    color: white;
    position: relative;
    z-index: 1;
    grid-gap: 0;
    display: grid;
    grid-template-rows: 30rem 20rem 20rem;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "discover"
    "follow"
    "contactje"
  }

  .article__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 35rem;
    margin: auto;
  }

}

@media only screen and (max-width: 710px) and (min-width: 590px){
  .footer {
    height: 60rem;
    color: white;
    position: relative;
    z-index: 1;
    grid-gap: 2rem;
    display: grid;
    grid-template-rows: 20rem 20rem;
    grid-template-columns: 2rem 1fr 1fr 2rem;
    grid-template-areas:
    ". discover follow ."
    ". contactje contactje .";
    margin-top: 10rem;
  }

  .article__footer {
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center;
    text-align: center; */
    /* max-width: 35rem; */
  }

}
@media only screen and (max-width: 910px) and (min-width: 415px){
    .section-firefly {
      /* height: 150vh; */
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: 0;
  }

  .cover-img {
    width: 60vw;
  } 

  .theArtists {
    margin-bottom: 8rem;
  }

  .firefly-title {
    margin: 0;
    margin-top: 10rem;
    position: relative;
  }

  .firefly-title:before {
    content:"";
    background-color: black;
    width: 0.1rem;
    height: 4rem;
    top: -7rem;
    position: absolute;
  }

  .artists_container {
    max-width: 90rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "alexander maxim "
    "nastya sergey";
    grid-gap: 10rem;
  }

  .artist_div {
    margin-top: 1rem;
  }

  .acc-artistsection {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}

@media only screen and (max-width: 830px) {
.credits_info {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  width: 83vw;
  grid-template-areas: "records"
  "thanks"
  "mixing"
  "artwork"
  "copyrightSong";
}

.mixed {
  grid-area: mixing;
  justify-self: center;
  text-align: center;
}

.artwork {
  grid-area: artwork;
  justify-self: center;
  text-align: center;
}

.thanks {
  grid-area: thanks;
  justify-self: center;
  text-align: center;
}

.recordings {
  grid-area: records;
  justify-self: center;
  text-align: center;
}
}


@media only screen and (min-width: 830px) {
  .credits_info {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    width: 80vw;
    grid-template-areas: "records thanks"
    "mixing artwork"
    "copyrightSong copyrightSong";
  }

  .mixed {
    grid-area: mixing;
  }
  
  .artwork {
    grid-area: artwork;
    justify-self: flex-end;
    text-align: end;
  }
  
  .thanks {
    grid-area: thanks;
    justify-self: flex-end;
    text-align: end;
  }
  
  .recordings {
    grid-area: records;
  }
}

@media only screen and (max-width: 830px) and (min-width: 415px) {
  .accumulation_homepage__title{
    font-size: 3.5rem;
  }

  .nav_onepager {
    display: none;
  }

  .accum-intro {
    margin: 2rem 2rem;
    line-height: 3.6rem;
    font-size: 2rem;
    text-align: center;
  }

  .homeHeader-text {
    font-size: 0.9;
  }

  .headertext-div {
    display: flex;
    position: relative;
    top: 35%;
    flex-direction: column;
    align-items: center;
   }

   .header-btn {
    z-index: 2;
    position: relative;
    top: 50%;
  }
}

/* 
@media all and (orientation:landscape) {

  .header-btn {
    display: none;
  }
} */


/* MUSIC */
.playBig {
  background-color: transparent;
  border: none;
  opacity: 0.8;
}

.playBig:focus {
  outline: transparent;
}

.playBig:hover {
  outline: transparent;
  opacity: 1;
}

.player-div {
  display: flex;
  align-items: flex-start;
  grid-area: player;
}

.song-container {
  grid-area: songs;
}

.music-body {
  height: 100%;
  background: mix(#3f3251, #002025, 70%);
  background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
  background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
  background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
}

.main-songpage {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 10rem 1.5fr 0.5fr 10rem;
  grid-gap: 3rem;
  grid-template-rows: 1fr;
  grid-template-areas: ". player songs .";
  margin-top: 10rem;
}

.songtitle-big {
  font-family: 'Montserrat';
  font-weight: 600;
  color: white;
  font-size: 3rem;
}

.song-description {
  color:white;
  opacity: 0.7;
  font-size: 1.6rem;
  line-height: 2.3rem;
  max-width: 50rem;
}

.song-image {
  border-radius: 50%;
  border: 0.2rem solid #FF3467;
}

.title-song {
  font-family: 'Montserrat';
  font-weight: 600;
  padding-bottom: 0.7rem;
  font-size: 2rem;
  color: white;
}

.song-list{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.sm-div__footer {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-content: center;
  width: 25rem;
}

.sm-div__footer > a {
  opacity: 0.8;
  transition: 0.2s opacity;
}

.sm-div__footer > a:hover {
  opacity: 1;
}

.sm-a__footer > img {
  margin-bottom: 2rem;
}

.volume {
  padding-bottom: 0.4rem;
}

.titleandvolume-container {
  display: flex;
  justify-content: space-between;
}

.volume-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-header {
  height: 70vh;
  background-image: url('/src/assets/img/photos/group.jpg');
  background-size: cover;
}

.about-nav {
  height: 3rem;
}

.pink-bg_btn {
  width: 6rem;
  background-color: green;
  height: 6rem;
  border-radius:4rem;
  transition: width 0.2s;
}

.pink-bg_btn:hover {
  width: 25rem;
}

.contact-mail__footer {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 3rem;
}

.number__footer {
  margin-top: 2rem;
}

.release_div {
  position: absolute;
  transform: rotate(-90deg);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  top: 4rem;
  right: 2rem;
}

.release2020 {
  font-size: 3rem;
}

.release_text {
  font-size: 1.5rem;
  opacity: 0.7;
  padding-right: 0.3rem;
}

.logo-nav {
  position: absolute;
  left: 0;
  margin: 4rem;
}

.newalbum {
  text-transform: uppercase;
  letter-spacing: 0.6rem;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  margin-left: 0.2rem;
}

.copyright {
  background-color: white;
  color: #08222C;
  height: 7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 1.3rem;
}

.copyright > h2 {
  opacity: 0.7
}

.h2_footer {
  color: #B6ACFF;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 3rem;
}

.nav_onepager {
  z-index: 3;
}

.portfolio-link {
  color: #8477E3;
  border: 0.1rem solid #8477E3;
  border-radius: 2rem;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  font-weight: 400;
  text-decoration: none;
  padding: 1rem 2rem 1rem 4rem;
  margin-top: 0;
  text-transform: uppercase;
  transition: 0.2s all ease-in-out;
  position: relative;
}

.portfolio-link::before {
  content: "";
  background-image: url("../assets/img/icons/link.svg");
  width: 2rem;
  height: 2rem;
  position: absolute;
  background-repeat: no-repeat;
  top: 25%;
  left: 1.4rem;
}


.portfolio-link:hover {
  color: white;
  background-color: #8477E3;
}

.portfolio-link:hover::before {
  content: "";
  background-image: url("../assets/img/icons/whiteLink.svg");
  
  width: 2rem;
  height: 2rem;
  position: absolute;
  background-repeat: no-repeat;
  top: 25%;
  left: 1.4rem;
}

.name_credits {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 1.3rem;
  line-height: 2.2rem;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.1rem;
}

.h4__title {
 color: #FF3467;
 font-weight: 600;
 letter-spacing: 0.04rem;
 margin-top: 2rem;
 line-height: 3rem;
}

.credits_btn {
  border: none;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 0.1rem solid #2B2B2B;
  background-color: transparent;
  font-family: 'Montserrat';
  margin-bottom: 2rem;
  color: #2B2B2B;
}

.credits_btn:focus {
  outline: transparent;
}


/* .credits__label {
  padding: 0.5rem;

  margin-top: 6rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
} */

.credits__label {
  color: #8477E3;
  border: 0.1rem solid #8477E3;
  border-radius: 2rem;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  font-weight: 400;
  text-decoration: none;
  padding: 1rem 2rem;
  margin-top: 8rem;
  text-transform: uppercase;
  transition: 0.2s all ease-in-out;
  position: relative;
  opacity: 1;
  margin-bottom: 4rem;
}


.credits__label:hover {
  color: white;
  background-color: #8477E3;
}

.dropdown {
  margin-left: 1rem;
  /* animation: MoveUpDown 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; */

}

@keyframes MoveUpDown {
  0%, 100% {
    margin-bottom: 0;
    margin-top: 0.5rem;
  }
  50% {
    margin-top: -0.5rem;
  }
} 






.infoCopyright {
  font-size: 1.3rem;
  letter-spacing: 0.03rem;
  text-align:center;
  margin-top: 2rem;
  line-height: 3rem;;
  max-width: 50rem;
}

.copyrightinfo__div {
  grid-area: copyrightSong;
  justify-self: center;
  max-width: 60rem;
  line-height: 2rem;
  margin-top: 6rem;
}


.credits_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10rem;
}


.theArtists {
  margin-top: 10rem;
}




.fade-in {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.fade-in.appear {
  opacity: 1;
  
}

.at_mail {
  margin-bottom: -0.3rem;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  height: 120%;
}

.follow__article {
  grid-area: follow;
}