@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {

  --smallFont: calc(14px + 0.1vw);

  --mediumFont: calc(20px + 0.1vw);

  --largeFont: calc(30px + 0.1vw);

  --greenColor: #62a31d;



}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}



* {

  margin: 0;

  padding: 0;

  list-style: none;

}



a, a:hover, a:focus, a:active{

  text-decoration: none;

}



body {

  font-family: 'Montserrat', sans-serif;

  color: #ffffff;

  scroll-behavior: smooth;

  background-color: #000000;

}



/* Pasek nawigacyjny */



.navbar {

  position: fixed;

  padding: 50px;

  display: flex;

  justify-content: space-between;

  width: 100%;

  align-items: center;

  box-sizing: border-box;

  z-index: 900;

  transition: all 0.3s ease-in-out;

}



nav.sticky {

  background-color: rgba(0, 0, 0);

  padding: 25px;
  
  height: 90px;

}



nav.sticky .menu-btn.open{

  right: 25px;

}



.navbar a {

  color: #ffffff;

  text-shadow: 1px 1px 1px #000000;

  position: relative;

  letter-spacing: 0.5px;

  transition: all 0.3s ease-in-out;

  font-size: var(--smallFont);

  font-weight: 600;

}



.navbar .nav-links ul li a::after {

  content: '';

  position: absolute;

  background-color: var(--greenColor);

  height: 3px;

  width: 0;

  left: 0;

  bottom: -10px;

  transition: all 0.3s ease-in-out;

}



.navbar .nav-links ul li a:hover {

  color: var(--greenColor);

}



.navbar .nav-links ul li a:hover::after {

  width: 100%;

}



.navbar .logo {

  font-size: var(--largeFont);

  font-weight: bold;

  color: var(--greenColor);

  margin-right: 30px;

  margin-left: 25px;

  text-shadow: 2px 2px 2px #000000;

}



.navbar .nav-links ul {

  display: flex;

}



.navbar .nav-links ul li {

  margin: 0 25px;

}



/* Przycisk menu */



.menu-btn {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 35px;

  height: 35px;

  cursor: pointer;

  transition: all 0.3s ease-in-out;

  display: none;

}



.mobile-menu {

  margin-left: -100%;

}



.menu-btn-burger {

  width: 35px;

  height: 4px;

  background: #ffffff;

  transition: all 0.3s ease-in-out;

  border-radius: 5px;

}



.menu-btn-burger::before,

.menu-btn-burger::after {

  content: '';

  position: absolute;

  width: 35px;

  height: 4px;

  background: #ffffff;

  transition: all 0.3s ease-in-out;

  border-radius: 5px;

}



.menu-btn-burger::before {

  transform: translateY(-13px);

}



.menu-btn-burger::after {

  transform: translateY(13px);

}



/* Animacja przycisku menu */



.menu-btn.open .menu-btn-burger {

  background: transparent;

}



.menu-btn.open .menu-btn-burger::before {

  transform: rotate(45deg);

}



.menu-btn.open .menu-btn-burger::after {

  transform: rotate(-45deg);

}



/* Wersja mobila */



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

    .nav-links {

    top: 0;

    left: 0;

    position: fixed;

    width: 100%;

    height: 100vh;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(5px);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: all 0.3s ease-in-out;

    z-index: 2;

  }



  .nav-links .mobile-menu {

    margin-left: 0;

  }



  .nav-links ul {

    display: flex;

    flex-direction: column;

    align-items: center;

  }



  .navbar .menu-btn {

    display: flex;

    z-index: 2;

    width: 35px;

    height: 35px;

    transform: scale(0.8);

  }



  .navbar .nav-links ul li {

    margin: 25px 0;

    font-size: var(--mediumFont)

  }



  .open {

    position: fixed;

    right: 50px;

  }


  .navbar .logo {

    margin-left: 0;

  
  }

}