/*------------------------------------STANDARD EGENSKAPER-------------------------------------------*/



.now {
  background-color: black;
}


  body{
  margin: 0; /*Nullstiller margin og padding til 0*/
  padding: 0;
  background-color: rgb(44, 41, 41);
  background-image: repeating-linear-gradient(rgb(189, 207, 54),rgb(76, 171, 8)); /*Overgang av farger*/
  

 

 
}








/*------------NAVBARD ,-----index-----------------*/


.logo h1{
  
  
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; /*Skrifttype*/
  font-variant: small-caps;
  font-size: 38px; /*Størrelse*/

 


  text-shadow: -1px 0 rgb(222, 212, 212), 0 1px rgb(210, 198, 198), 1px 0 rgb(101, 43, 43), 0 -1px rgb(193, 47, 47); 


  

 
 
}





nav{


  min-height: 10px;
  border-bottom: #96930b 4px solid;

  padding: 9px 30px;
  display: flex; /*Sier ifra om bruk av flex*/
  align-items: center; /*Justerer de i midten*/
  justify-content: space-between; /*Lage plass i mellom*/

  



 
      background-image: repeating-linear-gradient(rgb(178, 165, 20),rgb(5, 119, 131)); /*Bakgrunnsgradient på nav*/
      

     
  
  
}





nav li{ /*Redigering av listene i nav*/
  text-transform: uppercase;
}


nav ul{ 

  display: flex;
  gap: 3px; /*Mellomrom*/




}


nav ul li{
  list-style-type: none; /*ingen dekorasjoner*/
}



nav ul li a{
  text-decoration: none;
  color: rgb(243, 252, 252);
}

li a:hover { /*Hva som skjer når du har musepekeren over*/
  background-color: #b68d12;
}

li a { /*Selve teksten*/
  display: block; /*Gjør at nav bar blir trykkbar*/
 
  text-align: center; /*Sentrerer i midten*/
  padding: 12px 16px;
  text-decoration: none; /*Tar vekk understrekene til lenkene*/
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  border: solid 3px rgb(255, 223, 12);
  border-radius: 10px;
}











/*------------------------Hoveddel  del av nettsiden---------------------*/

.container{ /*Selve container til hovedellen*/


  width: 80%; /*Maks 80 prosent*/
  margin: auto; 
  overflow: hidden; 



}









/*--------------Showcase---------------------------*/



#showcase{ 

  background-image: url(Bilder/Skog.jpg); /*Bakgrunnsbilde på showcase*/



  min-height: 300px; /*Minimum høyde*/;

  text-align: center; /*Text sentrert i midten */

  color: white; /*Tekst hvit*/
  
}


#showcase h1 { /*Overskrift til showcase*/

  margin-top: 100px;
  font-size: 40px; /*Skriftstørrelse*/
  margin-bottom: 10px;
  font-family: sans-serif; /*Skrifftype*/

}


#showcase p { /*Tekst av showcase*/
  font-size: 20px;
}



#newsletter {

  padding: 5px;
  color: white;
  background-image: repeating-linear-gradient(rgb(85, 196, 48),rgb(86, 164, 7)); /*Bakgrunnsovergang*/
  text-align: center; /*Sentrert i midten*/
  
  
 

}

#newsletter h1{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*Skrifftype*/
}


.cards-container{
  display: flex; /*Melder om bruk av flex*/
  justify-content: center; /*Justert i midten*/
  flex-wrap: wrap;

  
}








/*CARDS-------------------------------------------------*/




.cards{


  width: 300px;
  margin: 10px;
  background-image: radial-gradient(rgb(44, 130, 44),rgb(146, 146, 18));
  border-radius: 20px;
  transition: 0.2s;
  border: 3px solid black;
  overflow: hidden;
 

 


}


.card-img img{
  width: 100%;
  border-radius: 10px; /*Kantlinjer rundt bildene*/
 
}


.card-body h2{

  text-align: center; /*Sentrerer overskrift i midten*/

}


.card-body p{
  text-align: justify;
  margin-bottom: 10px;
  padding: 5px;
}


.cards:hover{ /*Holder musepekeren over*/

  box-shadow: 3.9px 7.8px 7.8px hsl(0deg 0% 0% / 0.38);



}


/*----------------responsivitet-------------------------------*/


/* Standard styles for navbar */
nav {
  /* Your existing styles */
}

/* Styles for larger screens */
@media screen and (min-width: 768px) {
  nav ul {
    /* Additional styles for larger screens */
  }
}

/* Styles for smaller screens */
@media screen and (max-width: 767px) {
  nav {
    flex-direction: column; /* Stack items vertically */
  }
  nav ul {
 
    flex-direction: column;
    background-color: rgba(154, 195, 33, 0.9); /* Background color for mobile nav */
    position: absolute;
    top: 60px; /* Adjust this value as needed */
    left: 0;
    width: 100%;
    padding: 10px;
  }
  nav ul.active {
    display: flex; /* Show the list when active */
  }
  nav li {
    margin-bottom: 10px; /* Spacing between menu items */
  }
}