@font-face {
	font-family: "Gotham-Medium";
	src: url("Gotham-Medium.woff2");
}

*{
  box-sizing: border-box;
}

  html {
  height: 100%;
  overflow: scroll;
  }



                body {
                  background: black;
                  min-height: 100%;
                }


          /*navbar*/

                .nav-wrapper{
                  display: flex;
                  justify-content: space-between;
                  padding:30px;
                  font-family: "Gotham-Medium";
                  align-items: center;
                }

                .nav-wrapper .left-side {
                  padding-left: 30px;
                  font-size: 20px;
                  text-transform: uppercase;
                }

                .nav-wrapper .left-side a {
                  display: inline-block;
                  margin-left: 30px;
                  color: white;
                  text-decoration: none;
                }

                .nav-wrapper .right-side {
                  font-size: 60px;
                  color: white;
                }


                .nav-wrapper .left-side a:hover {
                  color: #8a8a8a;
                  border-bottom: 1px solid #8a8a8a;
                  transition: .5s ease-in-out;
                }

                .container{
                  border-bottom: 1px solid white;
                }


          /*photo/text*/

                .box_1 {
                  display: flex;
                  width: 91.5%;
                  margin: auto;
                }

                .portraitimage {
                  flex: 0 0 30%;
                }

                .portrait{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  margin-top: 50px;
                }

                .portraittext{
                  flex: 1 1 auto;
                  font-family: "Gotham-Medium";
                  color: white;
                  font-size: 20px;
                  padding-left: 2.5%;
                  margin-top: 50px;
                  line-height: 145%;
                }

  /*drawings*/
                .box_2 {
                  display: flex;
                  flex-wrap: wrap;
                  width: 91.5%;
                  margin: auto;
                  padding-bottom: 100px;
                }

                .zeichnung {
                  flex: 0 0 35%;
                  object-fit: cover;
                }

                .zeichnung-01{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  margin-top: 50px;
                }

                .zeichnungs-beschreibung{
                  flex: 0 0 65%;
                  font-family: "Gotham-Medium";
                  color: white;
                  font-size: 20px;
                  padding-left: 2.5%;
                  margin-top: 50px;
                  line-height: 145%;
                }

                .header-beschreibung {
                  font-size: 25px;
                  text-transform: uppercase;
                }



                .header-liste{
                  text-transform: uppercase;
                  padding-top: 50px;
                  /* text-decoration: underline; */
                  border-bottom: 1px solid white;
                  margin-bottom: 15px;
                }

                .liste{
                  padding-left: 2%;
                  margin:0px;
                }



    /*Text Layout*/

                h2.Gotham-Medium {
                  font-family: "Gotham-Medium";
                  font-size: 25px;
                  color: white;
                  display: block;
                  margin-top: 75px;
                  margin-bottom: 10px;
                  padding-left: 75px;
                  padding-top: 75px;
                  border-top: 1px solid white;
                  text-transform: uppercase;
                }

                h3.Gotham-Medium {
                  font-family: "Gotham-Medium";
                  font-size: 25px;
                  color: white;
                  display: block;
                  margin-top: 75px;
                  margin-bottom: 10px;
                  padding-left: 75px;
                  padding-top: 75px;
                  text-transform: uppercase;
                }

                p {
                  font-family: "Gotham-Medium";
                  font-size: 20px;
                  color: white;
                  display: block;
                  margin-top: 0px;
                  margin-bottom: 50px;
                  padding-left: 75px;
                  padding-top: 0px;
                  line-height: 145%;
                }





            /* Flexboxen in der Gallerie */

                  .gallery {
                    display: flex;
                    width: 91.5%;
                    margin: auto;
                  }

            /* zwei gleichgroße Boxen projects */

                  .gallery-item-2 {
                    flex: 0 0 50%;
                    padding: 10px;
                  }

                  .gallery-item-2 img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }

              /* drei gleichgroße Boxen projects */

                  .gallery-item-3 {
                    flex: 0 0 33.33%;
                    padding: 10px;
                  }

                  .gallery-item-3 img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }

              /* mittige Box projects */
                  .zentriert {
                    display: block;
                    margin: 0 auto;
                    max-width: 40%;
                  }



              /* Anpassung an kleinere Screens*/

              @media screen and (max-width: 770px){

                    h2.Gotham-Medium {
                      font-size: 11px;
                      margin-bottom: 3px;
                      margin-top: 25px;
                      padding-left: 15.258px;
                      padding-top: 25px;
                    }

                    h3.Gotham-Medium {
                      font-size: 11px;
                      margin-bottom: 3px;
                      margin-top: 25px;
                      padding-left: 15.258px;
                      padding-top: 25px;
                    }

                    h3.Gotham-Medium.ohne-linie{
                      padding-top: 0px;
                      margin-top: 50px;
                      padding-left: 15.258px;
                    }

                    p {
                      font-size: 8.5px;
                      padding-right: 130px;
                      padding-left: 15.258px;
                      margin-bottom: 20px;
                    }

                    .box_2 {
                      padding-bottom: 10px;
                    }

                    .zeichnung-01 {
                      width: 50%;
                      height: auto;
                    }

                    .portraittext {
                      font-size: 8.5px;
                      padding-left: 15px;
                    }

                    .zeichnungs-beschreibung {
                      font-size: 8.5px;
                      padding-left: 0;
                      margin-top: 0px;
                    }

                    .header-beschreibung {
                      font-size: 11px;
                      padding-top: 20px;
                    }

                    .header-liste {
                      padding-top: 30px;
                    }

                    .gallery-item-2 {
                    padding-top: 0px;
                    }

                    .gallery-item-3 {
                    padding-top: 0px;
                    }

                    .zentriert {
                    padding-top: 0px;
                    }

                    .nav-wrapper .right-side {
                      font-size: 36px;
                    }

                    .nav-wrapper .left-side {
                      font-size: 11px;
                      margin-left: 0;
                      display: flex;
                      flex-direction: column;
                    }

                    .left-side a {margin-bottom: 10px;}

                    .zeichnungs-beschreibung {flex: 1 1 100%;}

                    .zeichnung {flex: 1 1 100%;}

                }