body {
	margin: 0;
  	font-family: Arial, sans-serif;
  	background-color: #0D0931;
}

img {
  	max-width: 100%; /* Skaler billeder til deres container */
  	height: auto;
	display: block;
	margin: 0 auto;
}

.content {
      	max-width: 600px;
      	margin: 0 auto; 
      	text-align: center;
      	padding: 0 20px;
}

section {
  	padding: 2rem;
}
    
.section-1 {
      	color: #FB37FF; 
	font-size: 1.2em;
	background: rgb(26,17,96);
	background: radial-gradient(circle, rgba(26,17,96,1) 0%, rgba(10,8,57,1) 88%);
}

.section-2 {
      	background-color: #FB37FF;
      	color: #0D0931; 
	font-size: 1.2em;
}
  
.section-3 {
      	background-color: #0D0931;
      	color: #82D9FF; 
        font-size: 1.2em;
	padding-bottom: 60px;
}

.section-4 {
      	background-color: #333;
	background: rgb(26,17,96);
	background: radial-gradient(circle, rgba(26,17,96,1) 0%, rgba(10,8,57,1) 88%);
      	color: #FB37FF; 
	font-size: 1.2em;
	padding-bottom: 60px;
}

.section-5 {
      	background-color: #0D0931;
      	color: #82D9FF; 
     	font-size: 1.2em;
	margin-left: 150px;
	margin-right:150px;
	padding-top: 60px;
	
}

.section-6 {
	align-items: center;	
}


.section-shadow-top {
		background: rgb(26,17,96);
		background: rgb(251,55,255);
		background: linear-gradient(0deg, rgba(251,55,255,1) 0%, rgba(251,55,255,1) 53%, rgba(255,255,255,1) 55%, rgba(251,55,255,1) 57%, rgba(26,17,96,0.8) 94%);
		position: relative; /* Positionering af pseudoelement*/
}

.section-shadow-bottom {
		background: rgb(251,55,255);
		background: linear-gradient(180deg, rgba(251,55,255,1) 0%, rgba(251,55,255,1) 53%, rgba(255,255,255,1) 55%, rgba(251,55,255,1) 57%, rgba(13,9,49,0.8) 94%);
		position: relative; /* Positionering af pseudoelement*/
}

footer {
	color: #82D9FF;
	text-align: center;
	font-size: 0.8em;
	padding: 1rem;
}


.booking button {
	font-family: Sen, Arial;
      	font-size: 1.0em;
      	padding: 10px 20px;
      	background-color: #82D9FF;
      	color: 0D0931;
      	border: none;
      	border-radius: 5px;
  	cursor: pointer;
	display: block;
	margin: 0 auto;
}

.booking button:hover {
	background-color: #FB37FF;
}

.arcade {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tre kolonner */
  gap: 1rem;
  margin: 0 auto;
}

.card {
  	background: #82D9FF;
  	padding: 0.3rem;
  	text-align: center;
  	border: 1px solid #82D9FF;
	box-shadow: 0 0 20px rgba(30, 144, 255, 1);
  	border-radius: 10px;
}

/* Media queries for responsivitet */
@media (max-width: 768px) {
  .arcade {
    grid-template-columns: repeat(2, 1fr); /* To kolonner på tablets */
  }

  section {
    padding: 1.5rem; /* Reducer padding */
  }

  .content {
    padding: 0 1rem; /* Tilføj indre margin på mindre skærme */
  }
}

@media (max-width: 480px) {
  .arcade {
    grid-template-columns: 1fr; /* En kolonne på mobil */
  }

  .booking button {
    width: 100%; /* Gør knappen fuld bredde */
  }

  section {
    padding: 1rem; /* Mindre padding på mobil */
  }
}