* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  animation-timing-function: ease-in-out;
}

html {
  scroll-behavior: smooth;
  background-color:rgb(255,255,255);
}

a {
  text-decoration:none;
  color:rgb(40,40,40);
  font-family:Arial, sans-serif;
  text-shadow:0.05rem 0.1rem 0 rgba(0,0,0,0.3);
}

section a:hover {
  color:rgb(90,90,90);
  text-shadow:0.1rem 0.08rem 0 rgba(0,0,0,0.2);
  text-decoration: underline;
}

body {
  background-color:rgb(255,255,255);
  background-image:url("../img/bg.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size:contain;
  background-attachment: fixed;
  min-height:100vh;
  color:rgb(60,60,60);
  font-family:Arial, sans-serif;
  font-size:1.2rem;
  text-shadow:0.05rem 0.1rem 0 rgba(0,0,0,0.3);
}

nav {
  float:left;
  width:18rem;
  background-image:linear-gradient(90deg, rgba(80,80,80), rgba(60,60,60));
  position:fixed;
  height:max(100vh, 100%);
  margin:0;
  padding:0;
  z-index:2;
  transition:0.1s;
}

nav ul {
  display:flex;
  flex-direction: column;
  width:100%;
  height:100vh;
  justify-content: space-around;
  padding:0;
  margin:0;
}

nav li {
  display:flex;
  height:100%;
  padding:0;
  margin:0;
  flex-grow:2;
  flex-grow:2;
  align-items:center; 
  border-bottom:1px solid rgba(255,255,255,0.1);
  border-top:1px solid rgba(0,0,0,0.3);
}


nav li:nth-of-type(1) {
  border-top:none;
}

nav li:last-of-type {
  border-bottom:none;
}

nav a {
  color:rgb(220,220,220);
  font-weight: bold;
  font-size:2rem;
  text-shadow:0.2rem 0.2rem 0 rgba(0,0,0,0.3);
  flex-grow:2;
  padding-right:2rem;
  display:flex;
  align-items:center; 
  justify-content: flex-end;
  height:100%;
  text-align:right;
  transition:0.3s;
}


nav a:hover {
  background:rgba(255,255,255,0.1);  
}

nav a.active {
  z-index:5;
  position:relative;
  background-image:linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,1));
  color:rgb(0,80,0);
  text-shadow:0.1=05rem 0.1rem 0 rgba(0,0,0,0.8);
}

hr {
  width:calc(80vw - 10rem);
  display:block;
  margin:0 auto;
  border:none;
  height:1px;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(0,50,0,1), rgba(255,255,255,0.2));
}


section {
  min-height:100vh;
  float:right;
  width:calc(100% - 18rem);
  display:flex;
  flex-direction:column;
  align-items: center;
  padding:2rem 1rem;
  justify-content: center;
  z-index:3;
  position: relative;
}

h1 {
  margin:0;
  padding:0;
  font-size:4rem;
  color:rgb(0,80,0);
  text-shadow:0.1rem 0.1rem 0 rgba(0,0,0,0.8);
}

#start img {
  height:min(25vh, 436px);
}

#start p {
 font-size:1.5rem;
 padding:0 3rem;
 text-align:justify;
 margin-top:2rem;
 width:min(70vw, 100rem);
}

#komponenty {
  display:flex;
}

#komponenty .komponentyCalosc {
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}


#komponenty .komponentyKolumna {
  display:flex;
  flex-direction: column;
  align-items:center;
}

#komponenty .komponent {
  display:flex;
  flex-direction: column;
  align-items:center;
  margin:1rem;
  padding:1rem;
  transition:0.3s;
  border-radius:1rem;
  cursor:pointer;
}

#komponenty .komponent:hover {
  background:rgba(0,80,0,1);
  color:rgba(255,255,255,1);
  box-shadow:0.5rem 0.5rem 0 rgba(0,0,0,0.3);
}

#komponenty img {
  max-width:30vw;
  border:0.3rem solid rgba(0,0,0,0.7);
  border-radius:1rem;
  box-shadow:0.5rem 0.5rem 0 rgba(0,0,0,0.3);
  margin:1vw;
}

#komponenty span {
  margin:0 1rem;
  text-align: center;
}

#zastosowanie p {
  text-align: center;
  margin:1rem;
}

#wspolpraca {
  display:flex;
  align-items:center;
  flex-direction:row;
  justify-content: space-around;
}

#wspolpraca img {
  width:min(15vw, 10rem);
  max-height:300px;
  margin:1rem;
}

#manewry {
  display:flex;
  align-items:center;
  flex-direction:row;
  justify-content: space-evenly;
  width:100%;
}

#manewry img {
  max-width:calc(15vw - 1rem);
  border:0.3rem solid rgba(0,0,0,0.7);
  border-radius:1rem;
  box-shadow:0.5rem 0.5rem 0 rgba(0,0,0,0.3);
}

#prasa ul {
  list-style-type:none;
}

#prasa p {
  margin:1rem;
}

#prasa a {
  display:block;
  padding: 0.5rem 1rem;
  border-radius:0.3rem;
  transition:0.2s;
}

#prasa a:hover {
  background:rgba(0,80,0,1);
  color:rgba(255,255,255,1);
  box-shadow:0.5rem 0.5rem 0 rgba(0,0,0,0.3);
}

#opinie .opinie{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#opinie .opinia {
  display:grid;
  margin:1rem 0;
  width:90%;
  grid-template-rows: auto 2rem auto;
  grid-template-columns: calc(min(15vw, 20rem) + 2rem) auto;
  grid-template-areas: 
    "photo quote"
    "photo name"
    "photo group";
  padding:1rem;
  border-radius:1rem;
}

#opinie .opinia:nth-of-type(2n) {
  background:rgba(0,80,0,0.2);
  grid-template-columns:auto calc(min(15vw, 20rem) + 2rem);
  grid-template-areas: 
    "quote photo"
    "name photo"
    "group photo";
}

#opinie .opinia img {
  grid-area:photo;
  width:min(15vw, 20rem);
  border-radius:min(15vw, 20rem);
  box-shadow:0.2rem 0.2rem 0 0.3rem rgba(0,0,0,0.3);
  border:0.3rem solid rgba(0,80,0,1);
  align-items: bottom;
}

#opinie .opinia p {
  grid-area:quote;
  align-self: end;
  font-style: italic;
  padding-bottom:0.5rem;
}

#opinie .opinia b {
  align-self:end;
  padding-left:3rem;
}

#opinie .opinia span {
  align-self:start;
  padding-left:2rem;
}


#kontakt h2 {
  margin-top:1rem;
}

#kontakt a {
  display:block;
  background-color:rgba(0,0,0,0.1);
  border-radius:1rem;
  padding:1rem 3rem 1rem 3rem;
  margin:1rem;
  background-image:url("../img/mail.png");
  background-size:3.5rem;
  background-position:-5rem 0;
  background-repeat:no-repeat;
  transition:0.3s;
  border:2px solid rgba(255,255,255,0.7);
}

#kontakt a:nth-of-type(1) {
  background-image:url("../img/www.png");
}

#kontakt a:hover {
  background-color:rgba(0,80,0,1);
  background-position:1rem 0;
  color:rgba(255,255,255,1);
  box-shadow:0.5rem 0.5rem 0 rgba(0,0,0,0.3);
  padding:1rem 3rem 1rem 6rem;
  text-decoration:none;
  
}

@media screen and (max-height:30rem) {
  nav {
    width:10rem;
  }
  nav a {
    font-size:1rem;
    text-shadow:0.1rem 0.1rem 0 rgba(0,0,0,0.3);
  }
  
  section {
    
    width:calc(100% - 10rem);
  }
}

@media screen and (max-width: 65rem) {
  body {
    font-size:1rem;
    text-shadow:0.03rem 0.05rem 0 rgba(0,0,0,0.3);
  }
  
  a {
    text-shadow:0.05rem 0.03rem 0 rgba(0,0,0,0.3);
  }
  
  nav {
    position:fixed;
    top:0;
    left:0;
    z-index:6;
    box-shadow:0 0 1rem rgba(0,0,0,0.5);
  }
  
  nav.closed {
    width:5rem;
    height:5rem;
    overflow:hidden;
    background-color:rgba(60,60,60);
    border-radius:0 0 2rem 0;
    background-image:url("../img/menu.png");
    background-size:2rem;
    background-position:center;
    background-repeat:no-repeat;
    cursor:pointer;
  }
  
  nav a {
    transition:0.1s;
  }
  
  nav.closed ul {
    height:0;
    overflow:hidden;
  }
  
  nav.closed a {
    opacity:0;
    font-size:0px;
  }
  
  section {
    width:100%;
  }

  #start p {
    font-size:1rem;
    width:min(95vw, 100rem);
   }
  
  #komponenty .komponentyCalosc {
    display:flex;
    flex-direction: column;
  }
  
  #komponenty img {
    max-width:60vw;
    border:0.3rem solid rgba(0,0,0,0.7);
    border-radius:1rem;
    box-shadow:0.5rem 0.5rem 0 rgba(0,0,0,0.3);
    margin:1vw;
  }
  
  #kontakt a {
    background-size:3.2rem;
  }
  
  h1 {
    font-size:3rem;
  }

  #manewry {
    display:grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
  }
  
  #manewry img {
    max-width:calc(40vw - 1rem);
    border:0.2rem solid rgba(0,0,0,0.7);
    border-radius:0.3rem;
    margin-bottom:1rem;
  }
  
  #opinie .opinia {
    display:flex;
    flex-direction:column;
    align-items: center;
  }
  
  #opinie .opinia img {
    width:min(60vw, 20rem);
    border-radius:min(60vw, 20rem);
    margin-bottom:1rem;
  }
  
  #opinie .opinia span {
    align-self:end;
  }

}