body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
  margin: 0px;
  padding: 0px;
}

#container {
  width: 800px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: #4b0000;
}

/* header */
#header {
  height: 148px;
  background-color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  font-size: 50px;
  color: black;
  font-weight: bold;
}

.headerfoto {
  border: 0;
  ;
  width: 800px;
}

#header a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

#header a:hover {
  text-decoration: none;
  color: #af0d0d;
  font-weight: bold;
}

.div-container {
  display: flex;
}

.div-side {
  display: block;
  float: left;
  background-color: #b30606;
  width: 150px;
  color: white;
}

.div-main {
  display: block;
  float: left;
  width: 650px;
  background-color: #c99c9c;
}

.Discography {
  font-size: small;
  font-weight: bolder;
}

.bandcamp-player {
  border: 0;
  width: 300px;
  height: 637px;
}


.div-main a {
  color: black;
}

.div-main a:hover {
  color: #4b0000;
}

.spacer {
  padding: 10px;
}

.vertical-menu {
  width: 100%;
  /* Set a width if you like */
}

iframe {
  color: red;
}

.vertical-menu a {
  background-color: #b30606;
  /* Grey background color */
  color: white;
  /* Black text color */
  display: block;
  /* Make the links appear below each other */
  padding: 12px;
  /* Add some padding */
  text-decoration: none;
  /* Remove underline from links */
  border: 0 0 0 1;
}

.vertical-menu a:hover {
  background-color: #999;
  /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #999;
  /* Add a green color to the "active/current" link */
  color: white;
}

.vertical-menu a.main {
  background-color: #b30606;
  color: white;
  /* Black text color */
  font-weight: bolder;
}

.vertical-menu a.main:hover {
  background-color: #999;
  /* Dark grey background on mouse-over */
  font-weight: bolder;
}

/*footer*/
#footer {
  height: 80px;
  background-color: #4b0000;
  clear: both;
  color: #dda405;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

#footer a {
  text-decoration: none;
  color: #dda405;
}

#footer a:hover {
  color: #b30606;
}

#footer .small-text {
  font-size: 12px;
}

/*afbeeldingen*/
.sidebarphoto {
  width: 120px;
  border-width: thin;
}

.landscape-page-foto {
  max-width: 620px;
  max-height: 400px;
}

.small-foto-vk {
  max-width: 80px;
  max-height: 80px;
}

.small-foto-ls {
  max-width: 100px;
  max-height: 50px;
}

.normal-foto {
  max-width: 350px;
  max-height: 200px;
}

/* The navigation bar */
/* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
  width: 100%;
  background: #c99c9c;
  top: 0;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems {
  display: flex;
}

#hamitems a {
  flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  color: black;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#hamitems a:hover {
  background: #4b0000;
  color: white;
}

#hamitems .active {
  background: #4b0000;
  color: white;
}

/* (C) HIDE HAMBURGER */
#hamnav label,
#hamburger {
  display: none;
}

/* [ON SMALL SCREENS] */
@media only screen and (max-width: 768px) and (orientation: portrait) {

  /* (A) BREAK INTO VERTICAL MENU */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #b30606;
  }

  /* (B) SHOW HAMBURGER ICON */
  #hamnav label {
    display: inline-block;
    color: white;
    background: #b30606;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #hamitems {
    display: none;
  }

  #hamnav input:checked~#hamitems {
    display: block;
  }

  .div-side {
    display: block;
    float: left;
    width: 150px;
    color: white;
  }

  .div-main {
    display: block;
    float: left;
    width: 650px;
  }

  .column-left {
    float: left;
    width: 300px;
    text-align: center;
  }

  .column-right {
    float: left;
    width: 300px;
    text-align: center;
  }

  /* page layout smaller screens */
  #container {
    width: 300px;
  }

  #header {
    font-size: 100%;
    height: 140px;
    font-weight: bold;
  }

  .headerfoto {
    border: 0;
    ;
    width: 300px;
  }

  .div-side {
    width: 100px;
    font-size: small;
  }

  .div-main {
    width: 200px;
    font-size: small;
    word-wrap: break-word;
  }

  .column-left {
    width: 300px;
    text-align: center;
  }

  .column-right {
    width: 300px;
    text-align: center;
  }

  #youtubevideo {
    width: 180px;
    height: 120px;
  }

  #footer {
    font-size: 80%;
    height: 30px;
    font-weight: bold;
  }

  .normal-foto {
    max-width: 180px;
    max-height: 100px;
  }

  .landscape-page-foto {
    max-width: 180px;
    max-height: 200px;
  }

  .sidebarphoto {
    width: 80px;
  }

  .bandcamp-player {
    border: 0;
    width: 180px;
    height: 500px;
  }


}


/* blog */
article {
  background-color: #eee;
}

article h2 {
  text-align: left;
}

article header {
  border-style: hidden hidden solid hidden;
  border-width: 1px;
}

/* quotes on side bar */
.quote {
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
  font-style: italic;
  font-weight: bold;
}