/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  /* 
      Change favorite color
      Default: hsl(162, 100%, 40%)
      Orange: hsl(14, 100%, 65%) - Blue: hsl(210, 100%, 70%)
      Pink: hsl(356, 100%, 75%) - Purple: hsl(250, 100%, 75%)
      Tuerkis: hsla(181, 95%, 30%, 1) - baby bleu: hsla(181, 95%, 46%, 1)
      auch blau: hsla(187, 100%, 37%, 1) - hsla(187, 100%, 14%, 1)
      dunkelrot hsla(340, 82%, 35%, 1)
      grau hsla(0, 0%, 44%, 1)
      hsla(181, 95%, 23%, 1)
      hsla(231, 44%, 63%)
      lila 262 , 47 , 62
      blaugrau 201 , 15 , 62
      rubin 340 , 82 , 46
      turkis blau 174 , 63 , 50
      braun 16 , 18 , 56\
      231 , 44 , 63

      For more colors visit: https://colors.dopely.top/color-pedia
      -> Choose any color 
      -> click on tab (Color Conversion)
      -> Copy the color mode (HSL)
  */

  --hue: 181;
  --first-color: hsl(var(--hue), 95%, 30%);
  --first-color-alt: hsl(var(--hue), 56%, 35%);
  --title-color: hsl(228, 8%, 95%);
  --text-color: hsl(228, 8%, 65%);
  --body-color: hsl(228, 15%, 20%);
  --container-color: hsl(228, 15%, 15%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --biggest-font-size: 2rem;
  --bigger-font-size: 1.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

.projekt-container {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
  
img {
  border: 3px solid whitesmoke;
}

h2 {
  color: var(--title-color);
}
  
.projekt-screenshot img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
  
.projekt-beschreibung {
  width: 500px;
  padding-left: 80px;
}
  
.projekt-beschreibung h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--title-color);
}
  
.projekt-beschreibung p {
  font-size: var(--normal-font-size);
  line-height: 1.5;
  color: hsl(228, 8%, 65%);
}

.section#project2{
  padding-block: 2rem 2rem;
}

.section#project3{
  padding-block: 2rem 2rem;
}

.section#project4{
  padding-block: 2rem 2rem;
}

.section#project5{
  padding-block: 2rem 2rem;
}


  
@media screen and (max-width: 1000px) {
  .projekt-screenshot img{
    /* padding: 0px 20px; */
    width: 100%;
    height: auto;
  }

  img {
    border: 2px solid whitesmoke;
  }

  .projekt-screenshot {
    padding: 0px 30px;
  }

  .projekt-beschreibung {
    padding: 30px 30px;
  }

  .projekt-beschreibung p {
    font-size: var(--normal-font-size);
    color: var(--text-color);
  }

  h2 {
    color: var(--title-color);
  }
}

@media screen and (max-width: 530px) {
  img {
    border: 1px solid whitesmoke;
  }

  h2 {
    color: var(--title-color);
  }

  .projekt-beschreibung p {
    font-size: var(--normal-font-size);
    color: var(--text-color);
  }

}