@charset "UTF-8";
/* CSS Document */


p,h1{
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight: 40;
	
}


.Overskrift {
	color: blue;
	font-size: 80px;
	text-align: center;
}

* {
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
}

.menu-bar {
	display: flex;
	flex-direction: row;
	Align-items: center;
	justify-content: space-between;
  margin-bottom: 50px;
  text-shadow: 0 0 12px blue;
	Height: 110px;
	padding: 1rem;
	
}

.menu {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	
}

.menu > li{
	padding: 10px;
	overflow: hidden;
	
}

.menu-box {
	background: black;
	height: 100%;
	width: 30px;
	cursor: pointer;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.menu-icon, .menu-icon::before, .menu-icon::after {
	display: block;
	Background: blue;
	position: absolute;
	height: 4px;
	width: 30px;
	transition: transform 400ms;
	border-radius: 2px;
}

.menu-icon::before {
	content: "";
	margin-top: -8px;
	
}

.menu-icon::after {
	Content: "";
	margin-top: 8px;
	
}

#menu-activate:checked + .menu-box, .menu-icon::before {
	margin-top: 0px;
	transform: rotate(45deg);
}

#menu-activate:checked + .menu-box, .menu-icon {
	background: rgba(255, 255, 255, 0)
		
}

#menu-activate:checked + .menu-box, .menu-icon::after {
	margin-top: 0px;
	transform: rotate(-45deg)
}

#menu-activate {
	display: none;
}

@media (max-width: 700px){
	.menu-box {
		display: flex;
	}
	.menu {
		position: absolute;
		top: 0;
		margin-top: 100px;
		left: 0;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	
	#menu-activate ~ .menu li {
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		transition: height 400ms;
		display: none;
	}
	
	#menu-activate:checked ~.menu li {
		border: 1px solid #333;
		height:	2.5em;
		padding: 0.5em;
		transition: height 400ms;
		display: block;
	}
	
	.menu > li {
		display: flex;
		margin: 0;
		padding: 0.5em;
		width: 100%;
		color: white;
		background: #222;
	}
}	

.map{
	text-align: center;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: radial-gradient(circle at top, #0b1a2f, #050b16);
  font-family: 'Press Start 2P', monospace;
  color: white;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.how-to-play {
  text-align: center;
  padding: 80px 20px;
}

/* Titel */
.how-to-play h1 {
  color: #ffe600;
  font-size: 32px;
  margin-bottom: 25px;
  text-shadow: 0 0 20px #ffe600;
}

.subtitle {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 60px;
}

/* Kontroller titel */
.how-to-play h2 {
  color: #3aa0ff;
  margin-bottom: 40px;
  text-shadow: 0 0 12px #3aa0ff;
}

/* Grid */
.controls {
  display: grid;
  grid-template-columns: repeat(4, 220px);
  gap: 30px;
  justify-content: center;
}

/* Kort */
.control-card {
  background: #0c1b33;
  border-radius: 18px;
  padding: 30px 20px;
  border: 2px solid #3aa0ff;
  box-shadow: 0 0 30px rgba(58, 160, 255, 0.6);
}

/* Pil */
.arrow {
  font-size: 36px;
  color: #3aa0ff;
  margin-bottom: 20px;
  text-shadow: 0 0 12px #3aa0ff;
}

.control-card h3 {
  font-size: 14px;
  margin-bottom: 12px;
}

.control-card span {
  font-size: 10px;
  opacity: 0.8;
}

/* Mobil */
@media (max-width: 900px) {
  .controls {
    grid-template-columns: repeat(2, 220px);
  }
}

@media (max-width: 500px) {
  .controls {
    grid-template-columns: 1fr;
  }
}

.enemies {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

.enemies h1 {
  color: #ff4fd8;
  margin-bottom: 50px;
  text-shadow: 0 0 12px #ff4fd8;
}

.grid {
  display: grid;
 grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}


.card {
  background: #0c1b33;
  border: 2px solid #3aa0ff;
  border-radius: 18px;
  padding: 30px 20px;
  box-shadow: 0 0 25px rgba(58, 160, 255, 0.3);
}

.card img {
  width: 70px;
  height: auto;
  margin-bottom: 20px;
}

.card h2 {
  font-size: 14px;
  margin-bottom: 10px;
}

.card p {
  font-size: 10px;
  opacity: 0.85;
}

/* Mobil */
@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.powerups {
  padding: 80px 20px;
  text-align: center;
}

/* Titel */
.section-title {
  color: #ff4fd8;
  font-family: 'Press Start 2P', monospace;
  margin-bottom: 50px;
  text-shadow: 0 0 20px #ff4fd8;
}

/* Grid */
.powerup-grid {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  gap: 30px;
  justify-content: center;
}

/* Kort */
.powerup-card {
  background: #1b2a5b;
  border-radius: 18px;
  padding: 30px 25px;
  border: 2px solid #3aa0ff;
  box-shadow: 0 0 25px rgba(58, 160, 255, 0.4);
  text-align: left;
}

/* Ikoner */
.icon {
  font-size: 26px;
  margin-bottom: 20px;
}

.circle { color: #ffffff; }
.lightning { color: #ffe600; }
.star { color: #ff6fd8; }

.powerup-card h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  margin-bottom: 12px;
}

.powerup-card p {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.85;
}

/* Mobil */
@media (max-width: 1000px) {
  .powerup-grid {
    grid-template-columns: repeat(2, 320px);
  }
}

@media (max-width: 600px) {
  .powerup-grid {
    grid-template-columns: 1fr;
  }
}
.events {
  padding: 80px 20px;
  text-align: center;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  gap: 30px;
  justify-content: center;
}

/* Event kort */
.event-card {
  background: #1b2a5b;
  border-radius: 18px;
  padding: 30px 25px;
  border: 2px solid #3aa0ff;
  box-shadow: 0 0 25px rgba(58, 160, 255, 0.4);
  text-align: left;
}

.event-card h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  margin-bottom: 20px;
  color: #ff4fd8;
  text-shadow: 0 0 10px #ffeRed600;
}

.event-card ul {
  list-style: none;
  padding: 0;
}

.event-card li {
  font-size: 12px;
  margin-bottom: 10px;
  opacity: 0.9;
}

/* Mobil */
@media (max-width: 1000px) {
  .events-grid {
    grid-template-columns: repeat(2, 320px);
  }
}

@media (max-width: 600px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
}
.signup {
  padding: 80px 20px;
  text-align: center;
}

.signup-subtitle {
  font-size: 12px;
  margin-bottom: 40px;
  opacity: 0.85;
}

/* Formular */
.signup-form {
  max-width: 420px;
  margin: 0 auto;
  background: #1b2a5b;
  padding: 40px 30px;
  border-radius: 20px;
  border: 2px solid #3aa0ff;
  box-shadow: 0 0 30px rgba(58, 160, 255, 0.5);
  text-align: left;
}

/* Felter */
.form-group {
  margin-bottom: 22px;
}

label {
  display: block;
  font-size: 10px;
  margin-bottom: 8px;
  opacity: 0.9;
}

input,
select {
  width: 100%;
  padding: 12px;
  background: #0c1b33;
  border: 2px solid #3aa0ff;
  border-radius: 10px;
  color: white;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
}

input:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 12px #3aa0ff;
}

/* Knap */
.signup-btn {
  width: 100%;
  padding: 14px;
  background: #ffe600;
  border: none;
  border-radius: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 0 20px #ffe600;
}

.signup-btn:hover {
  background: #fff04d;
  box-shadow: 0 0 30px #ffe600;
}
#eve {
color: #ffe600;
  font-size: 32px;
  margin-bottom: 25px;
  text-shadow: 0 0 20px #ffe600;
}

#sup {
color: #ffe600;
  font-size: 32px;
  margin-bottom: 25px;
  text-shadow: 0 0 20px #ffe600;
}