@font-face {
   font-display: swap;
   font-family: 'Source Code Pro';
   font-style: normal;
   font-weight: 400;
   src: url('fonts/source-code-pro-v22-latin-regular.woff2') format('woff2');
}

html {
   overflow-y: scroll;
}

body {
   font-family: 'Source Code Pro';
   max-width: 650px;
   margin: 0 auto;
   background-color: #241f1d;
   font-size: 16px;
   line-height: 150%;
   color: white;
   padding-top: 20px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 20px;
}

nav {
   max-width: 650px;
   width: 100%;
   margin: 0 auto;
}

h1 {
   font-weight: bold;
   font-size: 16px;
   margin-top: 0px;
   margin-bottom: 0px;
   display: inline;
}

summary {
   cursor: pointer;
}

summary:hover {
   color: lightgray !important;
}

a:link {
   color: white;
   text-decoration: underline;
}

a:active {
   color: white;
}

a:visited {
   color: white;
}

a:hover {
   color: lightgray !important;
}

.interner-link-style {
   text-align: end;
}

.interner-link-style a {
   color: white;
   text-underline-offset: 8px !important;
}

.interner-link-hoverstyle:hover {
   color: lightgray;
}

.sprachen-style {
   text-align: end;
   padding-top: 15px;
   padding-right: 20px;
   padding-left: 20px;
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   background: #241f1d;
   height: 60px;
   z-index: 999;
   box-sizing: border-box;
}

.sprachen-style a {
   padding-left: 8px;
   padding-right: 0px;
   text-underline-offset: 8px !important;
}

.sprachen-unterstrich-weg {
   text-decoration: none !important;
}

.postkarten-bilder-style {
   width: 100%;
   padding-top: 0px;
   padding-bottom: 0px;
   align-items: center;
}

.portfolio-bilder-style {
   padding-top: 0px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-auto-flow: dense;
   margin-left: auto;
   margin-right: auto;
}

.portfolio-bilder-style figure {
   position: relative;
   margin: 0;
}

.portfolio-bilder-style figure img {
   display: block;
   object-fit: contain;
   width: 100%;
   height: 100%;
   padding: 20px;
   box-sizing: border-box;
}

.musik-bilder-style {
   padding-top: 0px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   grid-auto-flow: dense;
   margin-left: auto;
   margin-right: auto;
}

.musik-bilder-style figure {
   position: relative;
   margin: 0;
}

.musik-bilder-style figure img {
   display: block;
   object-fit: contain;
   width: 100%;
   height: 100%;
   padding: 10px;
   box-sizing: border-box;
}

.zentriert {
   text-align: center;
}