@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,500,600,700|Lora:400i');

$nav-bar-height: 3.5em;

$color-darkbg: #34495e;
$color-darkbg-highlight: #2c3e50;
$color-graybg: #7f8c8d;
$color-graytext: #ecf0f1;

$min-width: 380px;

@import "nav.scss";
@import "footer.scss";
@import "music.scss";
@import "movies.scss";

body {
  margin: 0;
  min-width: $min-width;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1em;
}
#tab-container { font-size: 1.5em; }

// EM media queries for relative sizing
@media screen and (max-width: 900px) {
  #tab-container { font-size: 1.25em; }
}
@media screen and (max-width: 600px) {
  #tab-container { font-size: 1em; }
}
@media screen and (max-width: 400px) {
  #tab-container { font-size: 0.9em; }
}

#tab-container {
  overflow: auto;
  .bg {
    background-color: #bdc3c7;
    padding-top: $nav-bar-height;
    height: 14em;
    background: radial-gradient(circle at 10%, #C0E538 5%, #C4D440 12%, #FFC312 30%, #B0D213 50%, #B53471 80%);
    background-size: 400% 400%;
    animation: bgmove 40s cubic-bezier(0.1,0.1,0.75,1) infinite;
  }
  .tab { text-align: center; display: none; } // defaults inactive
  .active { display: block; }
  .header {
    margin-top: -10em;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 8em;
    h1 {
      margin: 0;
      font-weight: 300;
      color: white;
      text-align: center;
      position: relative;
      font-size: 2em;
      height: 2em;
    }
  }
  .column {
    float: left;
    width: 50%;
    padding-bottom: 4em;
    p {
      display: inline-block;
      font-size: .8em;
      margin: 0.4em 0 0.4em 0;
    }
    h3{ margin: 0.7em 0 0.7em 0; }
    h4,h5,h6{ margin: 0.3em 0 0.3em 0; }
    @media screen and (max-width: 600px) { float: none; width: 100%; }
  }
  .body {
    display: inline-block;
    padding: 0 4em 0 4em;
    max-width: 1000px;
    text-align: left;
  }
  @media screen and (max-width: 900px) {
    .body { max-width: 600px; }
  }
  @media screen and (max-width: 700px) {
    .body { max-width: 400px; }
  }
  @media screen and (max-width: 500px) {
    .body { max-width: 340px; }
  }
}
@keyframes bgmove {
  0% {   background-position: 0% 0%; }
  25% {  background-position: 40% 0%;}
  50% {  background-position: 100% 0%;}
  75% {  background-position: 60% 0%;}
  100% { background-position: 0% 0%; }
}