/*

* "Sweet Meat" Pete's Ultimate Blues Name Generator
* Copyright (c) 2013-2025, Peter A. McKay
* Free to use under MIT license

*/


/* First, some styles for high-level elements and page structure... */

html {
  background: url('../img/mikkel-bech-guitar.jpg');
  background-position: bottom right;
  background-size: cover;
  background-attachment: fixed;
}

body {}

body, a, h1, h2, h3, h4, h5, h6, mark {
  color: #eeeee4;
  font-family: 'Roboto Slab', serif;
  font-weight: 350;
}

header, main, footer {}

header {height: 4rem} /* Using this element as a vertical spacer for now. */

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

section.row { /* Some styles for fields below the main generator area at the top of the page */
  margin: 25rem 0;
  padding: 5rem 4%;
}

mark, section.row {background: #021f3d}


/* Now let's style some children within the main and footer elements... */


#bng h1 {
  font-size: 6rem;
}

form {
  background: #eeeee4;
  padding: 2.5rem 2%;
  border-radius: 5px;
  color: black;
}

form * {max-width: 95%;}

form label {display:inline;}

#subbutton {
  background: #0E008F;
  font-size: 1.75rem;
  color: white;
  margin: 3rem 0;
}


footer img {
  position: relative;
  height: auto;
  max-height: 3rem;
}

nav {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  padding: 0.5rem 0;
}

nav>* {
  position: relative;
  top: 0.25rem;
  z-index: 20;
}

nav #textscreen {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  background: black;
  height: 100%;
  opacity: 0.8;
}

nav img {
  position: relative;
  top: 0.25rem;
}

nav #textlinks a {
  margin-right: 2rem;
}

#socials {
  text-align: right;
}

/* Finally, some media queries to help with display on mobile devices... */

@media (max-width: 1000px) {

  html, header, main {
    background: #021f3d;
  }

  header {height: 6rem} /* Using this element as a vertical spacer for now. */

  main>*, .container#bng {
    width: 100%;
    margin: 0 0 2rem 0;
    padding: 0 3%;
  }

.container#bng>* {
  width: 100%;
  margin: 2rem 0;
}

  #bng>*, #bng-output>*, #about>* {
    margin: 0;
    padding: 0;
    display: block;
    width: 93%;
}

  #bng, h1, h2, h3, h4, h5, h6 {text-align: center;}

  #about h2 {margin-bottom: 2rem}

  #bng h1 {
    font-size: 4.5rem;
  }

  #bng form {padding: 2rem 3%;}

  #bng-output figure {
    padding: 2rem 3%;
  }

  footer, nav {
    position: fixed;
    top:0;
    height: auto;
    max-height: 4rem;
  }


  nav #textscreen {
    opacity: 0.6;
  }

 nav #socials {
   text-align: center;
 }

} /* End media query for 950px breakpoint */


@media (max-width: 600px) {

  *, h1, h2, h3, h4, h5, h6 {text-align: left}

  #textlinks {padding: 0 3%}


  #socials {display: none;}

}