/*
the asterisk selector is used to select Everything at once, meaning
it it used to apply global style settings that will effect Every 
individual element.
*/
* {
	box-sizing: border-box;
  /*box-sizing: border-box causes border and padding to be included in 
  total width and height. there is basically no downside to this*/

}


/*
@media is used to define different styles and layouts changes based on screen size.
these are SUPER useful, but it is often better to design a more adaptive 
original layout and use these primarily if you need 2 versions of your site
because for whatever reason the specific site concept does not translate to
mobile (or desktop if you start with mobile) without being layed out in an entirely 
different way, as opposed to making small adjustments.
*/
@media screen and (max-width: 480px) {

}


html {
  scroll-behavior: smooth;
  /*scroll-behavior: smooth is an accessibility feature that reduces
  eyestrain during specific scrolling animations. usually no reason not apply it here.*/

  font-size: 62.5%;
  /*putting font-size: 62.5% on html tag helps us convert px to rem,
  which overall makes it simpler to design adaptive webpages.

  16px is the default font size in web browsers. 
  therefore: without changing anything, 1.0rem will render as 16px, 
  changing the font size like this makes converting pixel values to rem values easier. 
  the conversion to rem will now look like: 
  1.0rem will render as 10px,
  1.6rem will render as 16px (16/10=1.6).*/

  --margin-xxs: 0.4rem;
  --margin-xs: 0.6rem;
  --margin-s: 1.2rem;
  --margin-m: 1.6rem;
  --margin-l: 2.0rem;
  --margin-xl: 2.8rem;
  --margin-xxl: 4.0rem;

  --fontsize-xxs: 0.4rem;
  --fontsize-xs: 0.6rem;
  --fontsize-s: 1.2rem;
  --fontsize-m: 1.6rem;
  --fontsize-l: 2.0rem;
  --fontsize-xl: 2.8rem;
  --fontsize-xxl: 4.0rem;


  /*im currently experimenting with these variables to theoretically make it easier 
  to play around with spacing and design:-)*/
}

body {
  background: black;
  display: flex;
  justify-content: center;
}

a {
  color: #F3EF3D;
}

.largetext {
  font-size: 5rem;
}

#centerblock {
  background: black;
  width: 60%;
  color: white;
  
}

#mainflexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#metagirllogo {
  width: 100%;
}

#youtubeembed {
  width: 100%; 
  height: 500px;
}

#mainblurb {
  font-size: 1.8rem;
  margin: 2%;
  width: 50%;
}

#rightsidebar {
  width: 45%;
  margin-right: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 0%;
}

#bandcampembed {
  width: 100%; 
  height: 500px;
}

#tracklist {
  width: 100%;
}

#albumcover2 {
  width: 100%;
}

@media screen and (max-width: 950px) {

  #centerblock {
    width: 98%;
  }
}

@media screen and (max-width: 665px) {

  #mainflexbox {
  flex-direction: column-reverse;
}

  #rightsidebar, #mainblurb {
    width: 100%;
  }
}