body {
	font-family: 'DMSans', sans-serif;
	margin: 0;
	padding: 0;
	background-color: #000; /* Svart bakgrund */
	color: #fff; /* Vit textfärg */

}

main {
	padding: 20px;
	text-align: center;
}
nav {
	padding: 20px;
	text-align: center;
}

header img {
	width: 400px;
	height: auto;
	display: block;
	margin: 0 auto;
}


h1 {
	font-family: 'BrunoAce', sans-serif;
	font-size: 1.8em; /* Större rubriktext */
	letter-spacing: 0.36em; /* ökar spacing */
}	

h2 {
	font-family: 'BrunoAce', sans-serif;
	font-size: 1.8em; /* Större rubriktext */
	letter-spacing: 0.36em; /* ökar spacing */
}	

h3 {
	font-family: 'BrunoAce', sans-serif;
	font-size: 1.4em; /* Större rubriktext */
	letter-spacing: 0.36em; /* ökar spacing */
}

h4 {
	font-family: 'DMSans', sans-serif;
	font-size: 1.2em; /* Större rubriktext */
	letter-spacing: 0.08em; /* ökar spacing */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #000;
    text-align: center;
    position: relative;
}

.italic-text {
	font-family: 'DMSans', sans-serif;
	font-style: italic;
}
	
.bold-text {
	font-family: 'DMSans', sans-serif;
	font-weight: bold;
}

.hamburger {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 40px; /* Justera storleken på hamburgaren *

    color: #fff; /* Vita streck */
    border: none; /* Ta bort eventuell kantlinje */
    padding: 10px; /* Justera padding efter behov */
    border-radius: 5px; /* Rundade hörn */
}

.hamburger.active {
    font-size: 40px; /* Samma storlek som den ursprungliga */
    background-color: #000; /* Svart bakgrund */
    color: #fff; /* Vita streck */
}

nav a {
	margin: 0 15px;
	text-decoration: none;
	color: #fff;
}

.nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px; /* Justera positionen efter behov */
    right: 10px;
    border-radius: 5px;
}

.nav-menu a {
    text-decoration: none;
    padding: 10px;
    display: block;
}

.nav-menu.show {
    display: flex;
    color: #fff;
}

.menu {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.right-align {
	text-align: right;
}

.left-align {
	text-align: left;
}

.section {
	padding: 0px;
	text-align: left;
}

.section h2 {
	margin-left: 0px; /* Rubrikerna 30 px från vänster */
}

.section p {
	margin-left: 0px; /* Justera detta värde efter behov */
} 

.section img {
	width: 100%; /* Bilden täcker 100% av sidan */
	height: auto;
 	display: block;
	margin: 0 auto; /* Centrerad bild */
}

#section1 img {
	max-width: 900px;
	width: 100%;
	height: auto;
}

footer {
	padding: 20px;
	text-align: center;
}

.event {
	display: flex;
	flex-wrap: wrap; /* Gör eventen responsiva */
	align-items: flex-start; /* Linjera rubriken med överkanten på bilden */
	margin-bottom: 60px; /* Mer mellanrum mellan eventen */
}

.event img {
	width: 100%; /* Bilden täcker 40% av bredden */
	max-width: 350px; /* Justera bildens maxbredd */
	height: auto;
	margin: 0 40px; /* Mer mellanrum mellan bild och text när bilden är till vänster */
}

.event-content {
	flex: 1;
	width: 50%; /* Textblocken täcker 40% av bredden */
	text-align: left; /* Texten linjerar med vänsterkanten på kolumnen */
}

.event-content h3 {
	margin: 0;
	font-size: 1.5em; /* Större rubriktext */
}

.event-content h4 {
	margin: 5px 0;
	font-size: 1.2em; /* Större underrubriktext */
}

.event-content p {
	margin: 10px 0;
	letter-spacing: 0.08em; /* ökar spacing */
}

.columns {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap; /* Gör kolumnerna responsiva */
}

.column {
	width: 30%; /* Justera bredden på kolumnerna efter behov */
	text-align: left; /* Vänsterställ texten i kolumnen */
	margin-left: 10%; /* Justera marginalen för att placera kolumnerna korrekt */
}
	
.column:nth-child(1) {
	margin-left: 10%; /* Justera marginalen för att placera kolumn 1 korrekt */
}
	
.column:nth-child(2) {
	margin-right: 20%; /* Justera marginalen för att placera kolumn 2 längre till vänster */
}

.column.centered-text {
	text-align: center;
	}	

.social-icons {
	display: flex;
	justify-content: center; /* Centrerar ikonerna horisontellt */
	align-items: center; /* Centrerar ikonerna vertikalt */
	gap: 10px; /* Lägg till mellanrum mellan ikonerna */
	flex-wrap: nowrap; /* Förhindrar att ikonerna bryts till nästa rad */
}

.social-icon {
	width: 40px; /* Sätt önskad bredd */
	height: 40px; /* Sätt önskad höjd */
	display: block; /* Se till att ikonerna visas som blockelement */
}

.responsive-img {
	max-width: 50%;
	height: auto;
}


p {
	font-family: 'DMSans', sans-serif;
	font-size: 1.2em; /* Större rubriktext */
	letter-spacing: 0.08em; /* ökar spacing */
	line-height: 1.1;       /* gör texten luftig och lättläst */
}



/* Media query för mobila enheter */

@media (max-width: 768px) {

	body {
		margin: 0; /* Remove margin on mobile devices */
	}

	main {
		padding: 5px;
		text-align: center;
	}

	.responsive-logo {
		width: 100%;
		height: auto;
		max-width: 250px; /* Justera maxbredden efter behov */
	}

	.nav-menu {
		width: 100%;
		right: 0;
	}
	.hamburger {
		font-size: 30px;
		background: none;
		border: none;
		color: #fff;
		cursor: pointer;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.hamburger.active {
		font-size: 30px; /* Ensure the font size remains the same */
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 10px;
		right: 10px;
		background-color: #000;
		border-radius: 5px;
	}

	.section {
		padding: 0px;
	}

	.section h2 {
		margin-left: 0px;
	}

	.section p {
		margin-left: 0px;
	} 

	.event {
		flex-direction: column; /* Ändra riktningen till kolumn på mobila enheter */
		align-items: center; /* Centrera eventen på mobila enheter */
	}

	.event img {
		margin: 0 auto; /* Centrera bilden utan marginal */
		display: block; /* Gör bilden till ett blockelement för att centrera den */
		margin-bottom: 10px; /* Lägg till bottensmarginal för att separera bilden från texten */
	}

	.event-content {
		text-align: center; /* Centrera texten på mobila enheter */
		width: 100%; /* Textblocken täcker 40% av bredden */
	}

	.right-align {
		text-align: center; /* Centrera texten för event 2 på mobila enheter */
	}

	.column {
		width: 100%; /* Kolumnerna tar upp hela bredden på skärmen */
		margin-left: 0%; /* Ta bort vänstermarginalen på mobila enheter */
		margin-right: 0%; /* Ta bort högermarginalen på mobila enheter */
	    }

	.column:nth-child(1) {
		margin-left: 0%; /* Justera marginalen för att placera kolumn 1 korrekt */
	}
	
	.column:nth-child(2) {
		margin-right: 0%; /* Justera marginalen för att placera kolumn 2 längre till vänster */
	}

}





/* Fonter */

@font-face {
    font-family: 'BrunoAce';
    src: url('fonts/BrunoAce-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DMSans';
    src: url('fonts/DMSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'DMSans';
    src: url('fonts/DMSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'DMSans';
    src: url('fonts/DMSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'DMSans';
    src: url('fonts/DMSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'DMSans';
    src: url('fonts/DMSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'DMSans';
    src: url('fonts/DMSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}