*,
*::before,
*::after {
  box-sizing: border-box;
    margin: 0;
  padding: 0;
}

:root {
--go-main-color: #000000;
--go-font-color: #000000;
--gp-spacing: 15px
}

/* Roboto */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* oswald-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/oswald-v57-latin-700.woff2') format('woff2'); 
}

html {
  height: 100%;
}

body {
  position: relative;
  padding-bottom: 64px;
  min-height: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: var(--go-font-color);
  line-height: 1.5;
  max-width: 1920px;
  margin: 0 auto;
  background: url(../grafiken/drummer_grey.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}

.row {
	  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-spacing);

  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.5);
}

[class*="col-"] {
  padding: var(--gp-spacing);
}

.name {
  font-family: 'Oswald', sans-serif;
  text-align: center;
  font-size: 36px
}

#responsive-nav {
  display: none
}

.responsive-nav-label {
  display: inline-block;
  padding: var(--gp-spacing) 0 0 var(--gp-spacing);
  font-size: 1.5em
}

.nav {
  display: none;
   background-color: rgb(153, 204, 204);
  background-color: rgba(153, 204, 204);
}

input[type=checkbox]:checked~.nav {
  display: block
}

nav ul {
  list-style-type: none;
}

nav ul ul {
  padding-left: 40px
}

nav a {
  text-decoration: none;
  color: var(--go-main-color);
  display: block;
  padding: 10px;
}

nav a:hover {}

main a {
  color: var(--go-main-color);
}

main a:hover {
  text-decoration: none;
}

footer {
  background-color: rgb(153, 204, 204);
  background-color: rgba(153, 204, 204,);
  color: #fff;
  text-align: center;
}

footer a {
  color: #fff;
  text-align: center;
}

/*Allgemein*/

img {
  max-width: 100%;
  height: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Oswald', sans-serif;
  margin-bottom: var(--gp-spacing);
}

p {}

small {
  font-size: 90%
}

ol,
ul {
  list-style-position: inside
}

/*mozilo*/

.heading1 {
  font-size: 32px
}

.heading2 {
  font-size: 28px
}

.heading3 {
  font-size: 22px
}

.listitem {
  list-style-position: inside
}

.alignright {
  text-align: right
}

.alignleft {
  text-align: left
}

.aligncenter {
  text-align: center
}

table.contenttable {
  width: 100%;
  text-align: center;
  margin: var(--gp-spacing) 0
}

th.contenttable {
  background: var(--go-main-color);
  color: #fff;
  border-right: 1px solid;
  padding: var(--gp-spacing);
}

th.contenttable:last-child {
  border-right: none
}

td {
  padding: 10px;
  border-bottom: 1px solid var(--go-font-color)
}

.leftcontentimage {
  float: left
}

.rightcontentimage {
  float: right
}

.horizontalrule {
  margin: var(--gp-spacing) 0
}

:focus {
  outline: 3px solid var(--go-main-color);
  outline-offset: 2px;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
    .col-1 { grid-column: span 1; }
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }
  
  .row {
 grid-template-columns: repeat(12, 1fr);
 align-items: start;
    margin: var(--gp-spacing);
    background-color: transparent
  }
  .name {
    padding-top: 20px
  }
  .responsive-nav-label {
    display: none
  }
  .nav {
    display: block;
    border-radius: var(--gp-spacing);
  }
  nav {
  
  }
  nav ul {
    list-style-image: url('../grafiken/stick-icon.png');
  }
  nav ul ul {
    list-style-image: none;
  }
  nav a {
    padding: 0;
    display: inline;
  }
  nav a:hover {
    font-weight: 700
  }
  main {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: var(--gp-spacing);
  }
  footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }
}