@font-face {
    font-family: "Silkscreen";
    src: url(../fonts/slkscr.ttf);
  }

  html, body {
      font-family: "Silkscreen";
      font-size: 2em;
      margin: 0;
      background: url('../img/brick.png')
  }

  .container {
      display: flex;
      flex-direction: column;
      max-width: 100vw;
      overflow:hidden;
      margin: 0 auto;
      position: relative;
  }

  .logo {
      height:350px;
      margin: 0 auto;
      max-width: 1000px;
  }

  .logo img {
      max-width: 1000px;
      height: auto;
      position: absolute;
      left: -9999px;
      right: -9999px;
      margin: 0 auto;
  }

  .thumb {
      display: inline-block;
      overflow:hidden;
      height: 200px;
      width: 200px;
      margin:5px;
  }

  .bigthumb {
      display: inline-block;
      overflow:hidden;
      height: 600px;
      width: 600px;
      margin:5px;
  }

  .bigthumb .album {
    height:600px;
    width:auto;
  }

  .thumb .landscape {
      height: 200px;
      width: auto;
  }

  .thumb .portrait {
      width: 200px;
      height: auto;
  }
  .thumb .right {
      float:right;
  }
  .thumb .center {
      margin-left:-25%;
  }
  .thumb .bottom {
      margin-top:-25%;
  }

  .bio .row {
      width: 630px;
      margin:0 auto;
      padding:0;
      align-items: center;
      text-align:center;
  }

  .bio {
      background-color: rgba(0, 0, 0, 0.6);
      font-size: 0.5rem;
      color: #ab0402;
      padding: 1rem;
      margin: -1rem auto 0;
      min-width: 630px;
      z-index: 1;
  }

  .foot {
      flex: 0 0 10%;
      margin: 0 auto;
      margin-top: 1rem;
      font-size: 1rem;
  }

  .foot a, h1 {
      fill: #ab0402;
      color: #ab0402; 
      text-decoration: none;
      text-shadow: -2px 2px 0px #000, -1px -1px 0px #fdfdb9;
      font-size: 1rem;
  }

  h1 {
    text-align: center;
  }

  .foot a:hover {
      fill: #00e531;
      color: #00e531;
  }

  .youtube {
      width:620px; 
      height:465px;
      padding:5px;
  }

  .bandcamp {
      border: 0; 
      width: 620px; 
      height: 120px;
      padding:5px;
  }
  svg {
      max-height:50px;
      max-width:50px;
      display:inline-block;
  }
  svg path {
      stroke: #ab0402;
      fill: #ab0402;
  }
  svg:hover path {
      stroke: #00e531;
      fill: #00e531;
  }
  /* styles for screen sizes smaller than 480px */
  @media only screen and (max-width: 680px) {
    .bio {
      font-size: 0.3rem;
      margin: 0 auto;
      min-width: 330px;
    }
    .thumb {
      height: 100px;
      width: 100px;
    }
    .bigthumb {
      height: 300px;
      width: 300px;
    }
    .bigthumb .album {
      height:300px;
      width:auto;
    }
    .thumb .portrait {
      width: 100px;
      height: auto;
    }
    .thumb .landscape {
      height: 100px;
      width: auto;
    }
    .bio .row {
      width: 330px;
    }
    .logo img {
      width: 600px;
      height: auto;
    }
    .logo {
      height:250px;
    }
    .foot {
      font-size: 0.8rem;
    }
    .youtube {
      width:320px; 
      height:240px;
      padding:5px;
    }
    .bandcamp {
      border: 0; 
      width: 320px; 
      padding:5px;
    }
    .h1 {
      font-size: 0.8rem;
    }
    svg {
        max-height:30px;
        max-width:30px;
        display:inline-block;
    }
  }