*
{
  margin: 0;
  padding: 0;
}
html
{
  font-family: Verdana, Arial, sans-serif;
  font-size: calc(10px + 1vw);
}
body
{
  background-image: linear-gradient(hsl(220, 70%, 15%), 90%, hsl(65, 100%, 50%));
}
h1
{
  font-size: 2.5rem;
}
h2
{
  margin-bottom: 10px;
  font-size: 1.4rem;
}
h3
{
  text-align: center;
  margin: 5px 0 5px 0;
  font-size: 1.2rem;
}
h4
{
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.1rem;
}
p
{
  font-size: 0.7rem;
}
ul
{
  list-style-type: none;
}
a
{
  text-decoration: none;
  color: inherit;
}
a:hover
{
  color: hsl(200, 70%, 60%);
}
img
{
  width: 100%;
}
nav
{
  position: fixed;
  top: 0;
  height: calc(35px + 1vw);
  z-index: 999;
  background-color: hsl(200, 70%, 60%);
  width: 100%;
  text-align: center;
  font-weight: bold;
  border: 1px solid hsl(220, 70%, 15%);
  border-left: 0;
}
nav ul
{
  height: 100%;
  display: flex;
}
nav li
{
  display: flex;
  height: 100%;
  width: 25%;
  align-items: center;
  justify-content: space-around;
  border-left: 1px solid hsl(220, 70%, 15%);
}
nav a
{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}
nav a:hover
{
  background-color: hsl(220, 70%, 15%);
  color: hsl(65, 70%, 50%);
}
header
{
  margin-top: calc(35px + 1vw);
  text-align: center;
  background-color:hsl(260, 70%, 10%);
  color: #FFF;
  padding: 5px;
}
header a:hover
{
  color: blue;
}
main
{
  display: flex;
  justify-content: center;
}
fieldset
{
  max-width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
legend
{
  color:hsl(104, 70%, 41%);
}
label
{
  font-size: 0.8rem;
}
textarea
{
  resize: none;
}
input, textarea
{
  margin: 2%;
  margin-left: 0;
  margin-right: 0;
}
#suggest_form #suggest_submit
{
  max-width: 20%;
}
footer
{
  color: hsl(253, 100%, 35%);
  background-color: hsl(22, 100%, 65%);
}
.recents ul
{
  border: 1px solid #000;
  border-bottom: 0;
}
.recents li
{
  border-bottom: 1px solid #000;
}
.recents li a:hover
{
  background-color: hsl(253, 100%, 35%);
}
.recents a
{
  padding: 10px;
  display: block;
}
.recents h3
{
  font-size: 0.9rem;
}
#wrapper
{
  max-width: 600px;
  border-radius: 15px;
}
#featalbum, #featartist, #recentsubmissions, #recentactivity, #suggest_div, #about, #suggest_main, #submit, #disc_boards, #disc_thread, #articles, #analysis, #bio
{
  margin: 10px;
  padding: 10px;
  box-shadow: 8px 8px 8px rgb(36, 36, 36);
}
#featalbum
{
  color: hsl(65, 70%, 50%);
  background-color: hsl(220, 70%, 15%);
  padding-right: 16px;
}
#featalbum img
{
  border: 3px outset hsl(51, 54%, 39%);
}
#featartist
{
  color: hsl(65, 70%, 50%);
  background-color: hsl(181, 70%, 24%);
}
#recentsubmissions
{
  color: hsl(220, 70%, 15%);
  background-color: hsl(143, 70%, 33%);
}
#recentsubmissions h3
{
  grid-column: 1/2;
  grid-row: 2/3;
  margin: 10px 0 0 0;
}
#recentsubmissions h4
{
  grid-column: 1/2;
  grid-row: 3/4;
  font-size: 0.65rem;
  margin: 0;
}
#recentsubmissions p
{
  padding-left: 10px;
  grid-column: 2/3;
  grid-row: 1/4;
}
#recentsubmissions a
{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto auto;
}
#recentsubmissions img
{
  border: 1px solid #000;
  grid-column: 1/2;
  grid-row: 1/2;
}
#recentactivity
{
  color: hsl(220, 70%, 15%);
  background-color: hsl(104, 70%, 41%);
}
#recentactivity h3
{
  text-align: left;
}
#recentactivity img
{
  float: left;
  margin-right: 5px;
  border: 1px solid #000;
  width: calc(35px + 1vw);
}
#suggest_div
{
  color: hsl(220, 70%, 15%);
  background-color: hsl(65, 70%, 50%);
}
#suggest_main
{
  color: hsl(65, 70%, 50%);
  background-color:hsl(220, 70%, 15%);
}
#about
{
  color:hsl(65, 70%, 50%);
  background-color:hsl(220, 70%, 15%);
}
#about h2
{
  background-color:hsl(260, 70%, 10%);
  padding: 10px;
}
#about p
{
  text-align: center;
}
#submit
{
  color: hsl(65, 70%, 50%);
  background-color: hsl(220, 70%, 15%);
}
input[type=submit]
{
  margin: 10px;
  padding: 5px;
  width: 100px;
  background-color: hsl(65, 100%, 50%);
  color: hsl(220, 70%, 15%);
  box-shadow: 5px 5px 5px #000;
  border: 3px outset hsl(200, 70%, 60%);
}
#disc_boards
{
  color: hsl(65, 70%, 50%);
  background-color:hsl(220, 70%, 15%);
}
#disc_thread
{
  color: hsl(65, 70%, 50%);
  background-color:hsl(220, 70%, 15%);
}
#articles
{
  color: hsl(65, 70%, 50%);
  background-color:hsl(220, 70%, 15%);
}
#articles h3
{
  font-size: 0.9rem;
  text-align: left;
  display: inline;
}
#articles h4
{
  font-size: 0.8rem;
  display: inline;
}
#articles p
{
  margin-top: 5px;
}
#articles ul
{
  border: 1px solid #000;
  border-bottom: 0;
}
#articles li
{
  border-bottom: 1px solid #000;
  overflow: hidden;
}
#articles a:hover
{
  background-color: hsl(253, 100%, 35%);
}
#articles a
{
  padding: 10px;
  display: block;
  height: 100%;
}
#articles img
{
  float: left;
  margin-right: 5px;
  border: 1px solid #000;
  width: 80px;
}
.album_article
{
  background-color: hsl(51, 54%, 39%);
  color:hsl(220, 70%, 15%);
  height: 100px;
}
.artist_article
{
  background-color: hsl(181, 70%, 24%);
  height: 105px;
}
#analysis
{
  color: hsl(65, 70%, 50%);
  background-color:hsl(220, 70%, 15%);
  padding-right: 16px;
}
#analysis img
{
  border: 3px outset hsl(51, 54%, 39%);
}
#analysis h2
{
  text-align: center;
}
#analysis p
{
  margin: 2%;
}
#analysis ul
{
  list-style-type: disc;
  padding-left: 3%;
}
#analysis #tracklist
{
  text-align: center;
  list-style-type: none;
  padding-left: 0;
}
#analysis ol
{
  margin-left: 8%;
}
#analysis ol li::marker
{
  font-size: 1.1rem;;
}
#analysis ol h4
{
  text-align: left;
  font-size: 1.1rem;
}
#analysis h4
{
  text-align: center;
  font-size: 0.8rem;
}
#analysis h5
{
  margin: 2% 0 2% 0;
}
#analysis ol iframe
{
  min-width: 350px;
}
#bio
{
  color: hsl(65, 70%, 50%);
  background-color:hsl(220, 70%, 15%);
}
#bio h3
{
  font-size: 1rem;
  padding-top: 10px;
}
#bio ul
{
  text-align: center;
}
#bio li
{
  display: inline;
}
#bio dd
{
  margin-left: 8%;
}
#discography
{
  max-width: 100%;
  text-align: center;
}
#discography th, td
{
  padding: 3px;
  font-size: 0.7rem;
}
#discography td
{
  overflow: hidden;
}
#discography td:has(img)
{
  padding: 0;
}
#discography img
{
  max-width: calc(100px + 1vw);
  display: block;
}
.linked
{
  background-color: hsl(253, 100%, 35%);
  color: hsl(200, 70%, 60%);
}
.linked:hover
{
  background-color: hsl(143, 70%, 33%);
  color: hsl(220, 70%, 15%);
}
.linked a
{
  display: block;
  margin: -10em;
  padding: 10em;
}
.linked a:hover
{
  color: inherit;
}
@media (min-width: 1000px)
{
  html
  {
    font-size: 18px;
  }
  #wrapper
  {
    display: flex;
    padding: 20px;
    margin: 30px;
    max-width: 2000px;
    background-color: hsl(253, 100%, 35%);
  }
  #col1
  {
    order: 1;
    width: 25%;
  }
  #col2
  {
    order: 2;
    width: 50%;
  }
  #col3
  {
    order: 3;
    width: 25%;
  }
  #recentsubmissions h3
  {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  #recentsubmissions h4
  {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  #recentsubmissions p
  {
    grid-column: 1/2;
    grid-row: 4/5;
  }
  #recentsubmissions a
  {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
  }
  #recentsubmissions img
  {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  fieldset
  {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 15px;
  }
  input, textarea
  {
    margin: 0;
  }
  #suggest_form fieldset
  {
    grid-template-rows: auto auto auto;
    grid-template-areas: "email_label email_input"
                         "text_label  text_input"
                         "spacer      submit_input";
  }
  label[for=suggest_email]
  {
    grid-area: email_label;
  }
  label[for=suggest_text]
  {
    grid-area: text_label;
  }
  #suggest_form #spacer
  {
    grid-area: spacer;
  }
  #suggest_form #suggest_email
  {
    grid-area: email_input;
  }
  #suggest_form #suggest_text
  {
    grid-area: text_input;
  }
  #suggest_form #suggest_submit
  {
    grid-area: submit_input;
    max-width: 100px;
  }
}
@media (min-width: 1400px)
{
  #recentsubmissions h3
  {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  #recentsubmissions h4
  {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  #recentsubmissions p
  {
    grid-column: 2/3;
    grid-row: 1/4;
  }
  #recentsubmissions a
  {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
  }
  #recentsubmissions img
  {
    grid-column: 1/2;
    grid-row: 1/2;
  }
}