,body {
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: 100% 100%;
	color: white;
}

/* Bakgrunden till sidan som kommer att visas upp */
.body {
    background-color: black; /* Standard bakgrunden till hemsidan */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

/* Döljer scrollbaren på webbsidan */
.body::-webkit-scrollbar {
  display: none;
}
/* Samlingsdiv för klocka och datum */
.datetime {
	padding-top: 1em; /* Sänker ned klockan och datumet för att den inte ska vara slimad mot toppen */
}

/* Miljonen till koden som är för informationskärmarna */
.CD {
    font-size: 15vw; /* Storleken på nedräkningen som kommer att ändras beroende på hur bred skärmen är */
	/*color: white;  Färgen till nedräkningen */
    text-align: center; /* Sätter nedräkningen i mitten av skärmen så att den är centrerad */
	font-family: 'Franklin Gothic', sans-serif; /* Lägger till foneten på siffrorna så att den visas med karlstads font */
	letter-spacing: 1vw; /* Sätter lite mellanrum mellan siffrorna så att inte vissa siffror inte sitter ihop */
	margin-top: 10vh;/*sätter lite distans mellan klockan och nedräkningen så att det ser bra ut på datorn och telefonen*/
	margin-bottom: 0px;/*tar bort margin på botten av nedräkningen för att inte störa obejet under*/
}

/* Den lilla texten som visar hur mycket kilo man slängt längst ned för informationskärmarna */
.KG{
    /*color: white;  Sätter färgen på kilomatsvinn som visas under nedräkningen */
    font-size: 3vw; /* Ändrar storleken på kilomatsvinn anpassat för skärmens storlek */
    transform: translateY(3vmax); /* Ändrar vart kilomatsvinn visas på Y-axeln anpassat för skärmens storlek */
    text-align: center; /* Sätter kilomatsvinn centrerat */
	font-family: 'Franklin Gothic', sans-serif; /* Lägger till fonten som karlstadskommun använder till kilomatsvinn texten */
	margin-top: 0px;/*Detta tar bort margin på toppen så att den kommer under nedräknings matgin*/
}

/* Karlstadskommun loggan på klocksidan för informationskärmarna */
.Karlstad {
    width:10vw; /* Sätter storleken på bredden som bilden kommer att ha anpassat efter skärmen */
	/*transform: translateY(1vh);/*Ändrar vart på skärmen bilden kommer att visas i höjden */ 
	display: block; /* Skapar ett block åt bilden som gör att man kan centrera den enklare */
	padding-bottom: 1em; /* Sätter upp bilden lite så att hemsidan inte är slimad till botten av Karlstadloggan */
	bottom: 0px;/*detta håller den på botten av skärmen*/
	position: fixed;/*denna gör så att bilden är på botten av skärmen på alla skärmar*/
	left: 50%;/*detta skickar bilden till vänster*/
	transform: translate(-50%, 0);/*detta centrear bilden så att den är i mitten på hemsidan*/
}

/* Klockan som visas högst upp på hemsidan */
.time {
	text-align: center; /* Sätter klockan i mitten av skärmen */
	/*color: white; Gör att klockans text visas som vit */
	font-family: 'Franklin Gothic', sans-serif; /* Lägger in fonten till klockan så att den använder karlstads font */
	font-size: 3.5vw; /* Visar storleken för klockan anpassat för skärmens storlek */
}

/* Datumet under klockan */
.date{
	text-align: center; /* Sätter datumet centrerat under klockan */
	/*color: white;  Får datumets text att visas som vit */
	font-family: 'Franklin Gothic', sans-serif; /* Lägger in fonten till klockan så att den använder karlstads font */
	font-size: 1.5vw; /* Sätter storleken på datumet anpassat till skärmens storlek */
}
.imgdiv{
	height: 150px;/*detta skalar ned diven som bilden längst ned på hemsidan har*/
	bottom: 0px;/*Detta gör att karlstadbilden på botten håller sig där*/
}
.main{
	height: 300px;/*Detta skalar ned diven som innehåller nedräkningen och matsvinn i kilo*/
}
@media only screen and (max-width: 600px){/*Detta gör att man kan specialisera hemsidan för ifall det är en telefon skärm eller om det är en datorskärm*/
	.Karlstad{
		width: 50vw;/*Detta skalar upp karlstadloggan så att man ser det lite bättre på telefon än datorskärm*/
		height: 15vh;/*detta gör att loggan inte ser så utdragen ut på längden och ser "Normal" ut*/
	}
	.CD{
		font-size: 20vw;/*Detta skalar upp den nedräknande talen så att det syns bättre och gör det till fokus av hemsidan*/
		margin-top: 15vh;/*Detta gör att nedräknande talet kommer ned lite på skärmen så att det inte sitter fast i toppen*/
	}
	.KG{
		font-size: 6vw;/*Denna gör texten för hur mycket mat man slängt för telefon blir större så att man kan se vad som står*/
	}
	.date{
		display: none;/*Tar bort datumet så att dom inte visas på telefonen eftersom det kommer vara lite onödig information eftersom man har allt i telefon*/
	}
	.time{
		display: none;/*Tar bort klockan så att den inte visas på telefonen eftersom det kommer vara lite onödig information eftersom man har allt i telefon*/
	}
}