@charset "UTF-8";
/* CSS Document */
html { box-sizing: border-box; } * { box-sizing: inherit; } /* Box-sizing */ 

.header {
  display: flex; /* hur elementen förhåller sig till varandra i diven */
  padding: 20px; /* lite padding */
  text-align: center; /* centererar text */
  background: #333; /* svart bakgrund */
  color: white; /* white text color */
}

body {
	font-family: Helvetica, Arial, sans-serif; /* Se index */
		
}
/* Ökar textfonten <h1> och gör den till smallcaps */
 h1 {
  font-size: 40px; 
  font-variant-caps: small-caps;
  font-weight: bold;
	 padding-left: 20px;
	 padding-top: 20px;
	}

/* Färg mm för navigationsbaren */
.navbar {
  display: flex;
  overflow: hidden; /* gömmer overflow */
  background-color: #CB0505; /* Röd backgrund color som knytnäven */
}

/* Style the navigation bar links */
.navbar a {
  float: left; /* Säkerställer att länkarna ligger sida vid sida */
  display: block; /* Ändrar utseendet till ett block för resopnsiv sida (se nedan) */
  color: white; /* White text color */
  text-align: center; /* Center the text */
  padding: 14px 20px; /* Lite padding */
  text-decoration: none; /* Tar bort underlinen */
}


/* highlita aktivt menyval styr med  javaskrip via css */
.navbar a.selected {
  background-color: #ddd; /* ändrar färg på blocket */
  color: black; /* ändrar färg på texten till svart */
  font-weight: bold
}

/* Right-aligned länk */
.navbar a.right {
  margin-left: auto; /* flyttar länken till höger */
}

/* ändrar färg vid hover */
.navbar a:hover {
  background-color: #ddd; /* ändrar färg på blocket */
  color: black; /* ändrar färg på texten till svart */
}

/* Column container */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* skapar två olika 70% bred och 30% bred kolumner sida vid sida */

/* Main column */
.main {
  flex: 70%; /* Set the width of the main content */
  background-color: white; /* White background color */
  padding: 20px; /* Some padding */
}
/* Sidebar/right column */
.side {
  flex: 30%; /* Set the width of the sidebar */
  background-color: #f1f1f1; /* Grey background color */
  padding: 20px; /* Some padding */
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar {
    flex-direction: column;	  /* ändrar nav till koloíumn vid mindre än 400 px */
  } 
  .navbar a {
    width: 100%;
  }
}

.main a { 	color: #CB0505;
	text-decoration: none;
}

.side a { 	color: #CB0505;
	text-decoration: none;
}
.footer {
  padding: 5px; /* Lite padding */
  text-align: center; /* Center text*/
  background: #CB0505; /* Svart ljus */
  color: white; /* vit text color */
}

.footer a {
  color: white; /* vit text color */
  text-align: center; /* centrear text */
  padding:  0px 0px; /* Lite padding */
  text-decoration: none; /* Tar bort underlinen */
	
}
/* ändrar färg vid hover */
.footer a:hover {
	 background-color: #ddd;
	color: #000000; 
	padding-left: 15px; padding-right: 15px; /* lite padding */ 
}


/* Flyttar Loggan 
#logga { position:  fixed; top: 5px; left: 5px;} */

.header-image { background-image: url("Logga_farg_wadokai_sv_bakg_70px.png"); /* Inte den bästa lösningen för mobiler */ 
	background-position: left; 
	background-repeat: no-repeat;
	position: relative;
	top: 40px;
	left: 0px;
	
}