/*---Copyright by Simon Duerr---*/

/*Define Layout Attributes*/

/*root attributes*/
:root {

  /*sizes*/
  --mini: 0.5em;
  --small: 1em;
  --medium: 2em;
  --large: 3em;
  
  /*gaps*/
  --gap-navigation: 4em;

  /*padding*/
  --content-padding: 1.2em;

  /*height*/
  --logo-max-height: 100px;

  /*radius*/
  --logo-radius: 3em;
  --content-radius: 1em;
  --icon-radius: 45%;

  /*shadows*/
  --shadow-default: 0 4px 12px rgba(0,0,0,0.15);
}

/*---header---*/

/*Layout Logo*/
/*Desktop*/
.layout-logo img {
  margin-top: var(--small);
  max-height: var(--logo-max-height);
  border-radius: var(--logo-radius);
}
/*Small Laptops, Tablets*/
@media (max-width: 450px)  {
  .layout-logo img{
    width: auto;
    max-width: 250px;
    height: auto;
  }
}
/*Small Mobile Displays*/
  @media (max-width: 300px)  {
    .layout-logo img{
      display: none;
    }
}

/*Navigation*/
/*Desktop*/
.layout-navigation{
  align-items: center;
}

.layout-navigation ul{
  display: flex;
  gap: var(--gap-navigation);
  margin: var(--small);
  padding-bottom: var(--small);
}
.layout-navigation ul li a{
  transition: all 0.3s ease-in-out;
}

.layout-navigation ul li a:hover{
  color: var(--red);
}
/*Tablets, Small Laptops, Mobiles*/
/*Hamburger Button for the Hamburger Menu*/
.hamburger{
  cursor: pointer;
  background: none;
  border: none;
  margin: var(--small);
  padding-bottom: var(--small);
  /*hidden until Media is activated*/
  display: none;
}

@media (max-width: 900px){
  .layout-navigation ul {
    /*hide navigation list on smaller screens*/
    display: none;
  }
  /* displaymobile Hamburger Menu*/
  .layout-navigation ul.active{
    display: block;
    text-align: left;
  }
  .hamburger{
    /*set Hamburger to visible*/
    display: block;
  }
}

/*---main---*/
.content-block {
    padding: var(--content-padding);
    margin: var(--small);
    border-radius: var(--content-radius);
    box-shadow: var(--shadow-default);
    word-wrap: break-word;
}


/*Secion About Us - Die 4 Values*/
.content-list li{
  margin: var(--small);
  padding: var(--small);
  border-radius: var(--content-radius)
}

.content-button{
  cursor: pointer;
  padding: var(--small);
  border-radius: var(--logo-radius);
  border: none;
  box-shadow: var(--shadow-default);
}

.content-button:hover{
  background-color: var(--green);
}

/*---footer---*/

/*email me Icon*/
.email-me{
  right: 40px;
  bottom: 40px;
  position:fixed;
  padding: var(--mini);
  border-radius: var(--icon-radius);
  box-shadow: var(--shadow-default);
}

.email-me:hover{
  background-color: var(--green)
}