body {
    background: linear-gradient(-45deg,#35577D, #141E30);
    color: whitesmoke;
}

.bandfoto {
    display: block;
    margin: auto;
    width: 75%;
    height: auto;
}

.foto {
    display: block;
    margin: auto;
    width: 150px;
}

h1, h2, h3, h4 {
    font-family: Rockwell;
    text-align: center;
}

h2 {
    margin-top: 50px;
}

.slogan {
    text-transform: uppercase;
}

.navigation {
    width: 100%;
    margin: auto;
    font-family: 'Trebuchet MS';
    text-align: center;
    color: whitesmoke;
    padding: 50px 0;
    box-shadow: 0px 0px 0px #dedede;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

.navigation a {
    padding: 3%;
}

a:link{
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
    text-decoration: none;
}

a:hover{
    background-color: grey;
}

.HInfo {
    margin-top: 200px;
}

.HGigs {
    margin-top: 200px;
}

.HPics {
    margin-top: 200px;
}

.HVideos{
    margin-top: 200px;
}

.video-frame{
    text-align: center;
    margin: auto;
    margin-top: 50px;
}

.gigs {
    width: 75%;
    margin: auto;
    font-family: 'Trebuchet MS';
    text-align: center;
    color: whitesmoke;
}

.bandinfo-section {
    font-family: 'Trebuchet MS';
    text-align: center;
    width: 75%;
    margin: auto;
    color: whitesmoke;
}

.news-section {
    font-family: 'Trebuchet MS';
    text-align: center;
    width: 75%;
    margin: auto;
    color: whitesmoke;
}
.impressum-section p {
    font-family: 'Trebuchet MS';
    text-align: center;
    color: whitesmoke;
}

table, th, td {
    border: 1px solid;
    border-color: whitesmoke;
    padding: 15px;
    text-align: left;
}

.scroll-container {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
/* Create four equal columns that sits next to each other */
.column {
    align-items: center;
    margin: auto;
    flex: 30%;
    max-width: 30%;
    padding: 0 4px;
  }
  
.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }