@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins: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&family=Quicksand:wght@300&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
html {
  padding: 0;
	margin: 0;
    background-image: radial-gradient(rgba(192, 193, 217, 0.121), transparent 0), /* polka dots */
                    radial-gradient(rgb(192, 193, 217, 0.121) 20%, transparent 0),
                    linear-gradient(to top, #141C4B ,#080719); 
                    
  background-size: 5px 5px, /* polka dots */
                   5px 5px,
                   100% 100%; /* your gradient */

  background-position: 0 0, 15px 15px;
}

hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  width: 100%;
}

værktøjer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  width: 100%;
}

h1 {
  font-family: 'roboto';
  font-weight: 200;
  font-size: 34px;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0;
}

om {
  font-family: 'roboto';
   display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  font-style: italic;
  font-size: 48px;
  color: #fff;
  text-align: center;
  margin-top: 0px;
  padding: 0;
  margin: 0;
  width: 70vw;
}

nav ul {
  display: flex;
  font-family: 'roboto';
  font-weight: 300;
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
	flex-wrap: wrap; 
	max-width: 100%;
  padding: 0;
	margin: 0;	
 background-image: linear-gradient(to top, #141c4b00 ,#080719, #080719); }

nav ul,
nav li {
  padding-right: 40px;
  padding-left: 40px;
	display: flex;
  gap: 20px;
  justify-content: center;
  list-style-type:none
}
nav li:last-child {
   border-bottom: none;
}
nav a {
  
	text-decoration: none;
	color: inherit;
	display: block;
	font-size: 1rem;
}
nav a:hover {
  zoom: 115%;
  transition-delay: 0ms;
  text-decoration: underline;
	color: #fff;
}
nav li {
  padding: 0;
	margin: 0;	
	position: relative;
	line-height: 60px;
	color: #fff;
	text-align: center;
}  
nav input,
nav label {
  
	display: none;
	width: 36px; 
	height: 36px; 
	background: #555; 
	color: #fff; 
	text-align: center; 
	line-height: 36px;
	font-size: 1rem;
	border-radius: 2px;
  
} 
nav label {
   position: absolute; 
   top: 8px; 
   right: 8px; 
   transition: .4s;
}
nav label:hover {cursor:pointer;}
nav label:before {
	font-family: FontAwesome;
	font-size: 24px;
	content: "\f0c9";
	text-align: center;
  
}

/************* MEDIA QUERIES **************/

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

  
   nav {
    transform: translateY(150px);
      position: relative;
   }
	nav ul {
		transform: translateY(-9rem);
      transition: all .5s;
      position: absolute;
      width: 100%;
      top: 0;
  position: absolute;
  left: 0;
  right: 0;
	display: flex; 
	flex-wrap: wrap; 
	max-width: 100%;
  padding: 0;
	margin: 0;	
 background-color: #080719;
 gap: 0px;
	}
	nav li {
		flex: none; 
		width: 100%;
		border-bottom: solid 1px #5c638a;
	} 
	nav input[type="checkbox"]:checked + ul  {
		transform: translateY(-45rem);
		width: 100%;
		background: #999;   
      transition: all .5s;
	}
	nav label{
    transform: translateY(-9rem);
      display: block;
   }  
	nav input[type="checkbox"]:checked + ul li:nth-child(1){
		transform: translateY(-9rem);
    background: #777; 
		color: #fff;
	}  
  
}