@charset "utf-8";
/* CSS Document */
@font-face {
   font-family: Roboto;
   font-style: normal;
   font-weight: 100;
   src: url("fonts/Roboto/Roboto-Thin.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: italic;
   font-weight: 100;
   src: url("fonts/Roboto/Roboto-ThinItalic.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: normal;
   font-weight: 300;
   src: url("fonts/Roboto/Roboto-Light.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: italic;
   font-weight: 300;
   src: url("fonts/Roboto/Roboto-LightItalic.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: normal;
   font-weight: 400;
   src: url("fonts/Roboto/Roboto-Regular.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: normal;
   font-weight: 500;
   src: url("fonts/Roboto/Roboto-Medium.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: italic;
   font-weight: 500;
   src: url("fonts/Roboto/Roboto-MediumItalic.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: normal;
   font-weight: 700;
   src: url("fonts/Roboto/Roboto-Bold.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: italic;
   font-weight: 700;
   src: url("fonts/Roboto/Roboto-BoldItalic.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: normal;
   font-weight: 900;
   src: url("fonts/Roboto/Roboto-Black.ttf");
   font-display: swap;
}
@font-face {
   font-family: Roboto;
   font-style: italic;
   font-weight: 900;
   src: url("fonts/Roboto/Roboto-BlackItalic.ttf");
   font-display: swap;
}


/*--------------------------------------------------------------

                        COLOR START

---------------------------------------------------------------*/



body {
  background-color: var(--color-banner-bg);
}

.navbar {
  background-color: var(--color-bg-primary);
  box-shadow: 0px 0.17em 0.85em 0.17em var(--color-bg-primary);
}

.navbar a {
  color: var(--color-text-primary);
}

.content {
  background-color: var(--color-bg-primary);
}

.line {
  background-color: var(--color-line);
}

.background_dark {
  background-color: var(--color-bg-primary);
}

.background h1 {
  text-decoration-color: var(--color-bg-primary);
}

.background p {
  color: var(--color-text-primary);
}

.projects:active {
  background-color: var(--color-line);
}

.container {
  box-shadow: 2.295px 0.765em 0.765em var(--color-switch);
}

.project_widget h2,
.project_widget p,
.project_widget a {
  color: var(--color-text-primary);
  filter: drop-shadow(1.53px 1.53px var(--color-bg-primary));
}

.project_widget a:hover {
  color: var(--color-banner-text);
}

footer {
  background-color: var(--color-footer);
  box-shadow: 5px 5px 1em var(--color-accent);
}

footer a {
  color: var(--color-text-primary);
}

/*-----------------------------------------------------------------

                            COLOR END

-----------------------------------------------------------------*/



body{
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}
*{
   margin: 0;
   padding: 0;
}
.navbar{
   width: 100%;
    height: 8.5vmin;
    position: fixed;
    top: 0;
    z-index: 99;
    box-sizing: border-box;
    padding: 0 2vw 0 5vw;
    display: flex;
    flex-direction: row;
    box-shadow: 0px 0.17em 0.85em 0.17em #232323;
    line-height: 25.5px;
}
.navbar .logo{
   height: 6.885vmin;
   width: 0.765vmin;
   max-width: 11.475%;
   margin: auto 0;
   margin-right: auto;
   background-image: url("Fotos/logo.webp");
   background-repeat: no-repeat;
   background-position: center left;
   background-size: contain;
   cursor: pointer;
}
.navbar a{
   display: flex;
   height: 100%;
   text-decoration: none;
   font-family: Roboto;
   font-size: 2.295vmin;
   font-weight: 300;
   margin: auto 0;
   padding: 0 1.53vw;
   align-items: center;
}

#switch {
    width: 5vw;
    margin: 2vh 0 2vh 5vw;
    border-radius: 1vh;
}

.content{
   width: 100%;
   height: auto;
   margin-top: 38.25vh;
   padding-bottom: 6.12%;
   border-radius: 2.295vh 2.295vh 0 0;
   display: flex;
   justify-content: center;
   flex-direction: column;
   z-index: 90;

}

.line{
   width: 7.65%;
   height: 0.765vh;
   border-radius: 38.25vh;
   box-sizing: border-box;
   margin:1.53vh auto 3.825vh auto;
   min-height: 7.65px;
}

.background {
   position: fixed;
}

      .background_dark {
        height: 30vh;
        position: fixed;
        width: 100vw;
        z-index: -1;
        bottom: 0;
    }

.background h1{
   font-family: Roboto;
   font-weight: 500;
   margin: 11.475vmin 0 1.53vh 7.65vw;
   font-size: 6.12vw;
   text-decoration: underline;
   z-index: 1;
}
.background p{
   font-family: Roboto;
   font-weight: 300;
   font-size: 2.295vh;
   margin: 0 0 0 7.65vw;
   z-index: 3;
}
.background_image{
   width: 100%;
   height: 100vh;
   top: -10%;
   position:fixed;
   background-image: url("Fotos/background.webp");
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: cover;
   z-index: -1;
}

.last_projects{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 5%;
   box-sizing: border-box;
   justify-items: center;
   height: auto;
   padding: 0 5% 0 5%;
   
}

.container {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   border-radius: 2.295vmin;

}

.container:hover{
   filter: grayscale(100);
}

.project_widget {
   padding: 0 5% 5% 5%;
   margin-top: -5%;
}

.project_widget h2 {
   width: 90%;
   font-family: Roboto;
   font-weight: 450;
   font-size: 1.9125vmax;
   padding: 3%;
}

.project_widget p{
   width: 90%;
   font-family: Roboto;
   font-weight: 300;
   font-size: 1.1475vmax;
   padding: 3%;
}


.link img{
   width:100%;
   height: 80%;
   object-fit: cover;
   border-radius: 2.295vmin 2.295vmin 0 0;
}

footer {
	width: 100%;
	height: 8.5vmin;
	box-sizing: border-box;
	padding: 0 8.5%;
	display: flex;
	flex-direction: row;
	align-items: space-between;
	text-align: center;
	margin-top: auto;
}

.instagram {
   margin: 1.9125vmin auto;
   min-height: 22.1px;
   min-width: 22.1px;
   height: 3.825vmin;
   width: 3.825vmin;
   background-image: url("Fotos/Instagram_Glyph_Black.svg");
   background-repeat: no-repeat;
}
.impressum{
   margin: auto auto;
}
.datenschutz{
   margin: auto auto;
}
footer a{
   font-family: Roboto;
   font-size: 1em;
}

@media(max-width: 1000px),(max-width: 1200px) and (orientation: portrait) {

      #switch {
        width: 8vw;
        margin: 1.5vh 0 1.5vh 2vw;
        border-radius: .5vh;
    }
}

@media (max-width: 800px), (orientation: portrait) {

      #switch {
        width: 10vw;
        margin: 1.25vh 0 1.25vh 2vw;
        border-radius: .5vh;
    }


  .content {
    margin-top: 30vh;

}

  .background h1 {
   margin-top: 16vmin;

}
  .last_projects{
      grid-template-columns: 1fr 1fr;
   }

.web {
  padding-bottom: 10vh;
}

  .navbar .logo{
      height: 8vmin;
      width: 5vmin;
   }

}

@media(max-width: 600px) {
        .navbar{
      height: 12.75vmin;
        padding-left: 4.25vw;
        padding-right: 4.25vw;
   }
   .navbar a{
      font-size: 3vmin;
      font-weight: 300;
   }
   .navbar .logo{
      height: 10.71vmin;
      width: 7.65vmin;
   }
   

   .background h1 {
      font-size: 6.12vh;
margin: 20vmin 0 1.53vh 7.65vw;
   }

        .background p {
                margin: 0 3.825vw 0px 7.65vw;
         }

   .content {
      margin-top: 30vh;
      
   }

.line {
		width: 17%;
	}

.apps {
     padding-bottom: 5vh;

}

.web {
     padding-bottom: 25vh;

}
   .last_projects{
      grid-template-columns: 1fr;

   }


   .project_widget p {
      width: fit-content;
   font-size: 2vmax;
   }

   .project_widget h2 {
      width: fit-content;
      font-size: 2.2vmax
   }

        footer{
          height: 17vmin;
   }

footer a {
               font-size: 1.5em;

         }
   #impressum_footer{
      height: 15.3vmin;
   }
   .instagram{
      height: 7.65vmin;
      width: 7.65vmin;
      margin-top: 3.825vmin;
   }
   .impressum{
      font-size: 2vmin;
   }
   .datenschutz{
      font-size: 2vmin;
   }
}