/*Bakgrunden är i en ljusbrun nyans, där alla headar har teckensnittet nedan*/
body {
	font-family: "monotype corsiva", "comic sans ms", cursive;
	background-color: #d3c7c3;
	padding: 10px;
    margin: 0 auto;
    width: 80%;}
/*Tanken var att jag skulle använda mig av koden nedan så att menyraden i mobilen skulle bli i en lista nedåt, men det blev
 en jätte liten lista nedåt även i datorn, men har den kvar till senare.*/
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
/*@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;}*/	

/*Jag vill att sidan ska fungera även i mobilen, ungefär så som den gör på datorn*/
@media screen and (max-width: 600px) {
mobile-text {
    text-align: center !important;}
}

/*Meny raden i mitten, på mobilen flyttar den sig nedåt något*/	
nav {
	text-align: center; 
    padding: 5px;
    margin: 0px;}
/*Menyn som ligger mellan list tags med 60px storlek på */	
li {
   font-size: 60px;
   display: inline;
   padding: 5px;}
/*Texten har en nyans av mörkare brun*/	
h1, h2, h3, p {	
    color: #3b2f2b;
	text-align: center;}
/*Headens olika storlekar*/
h1 {
    font-size: 48px;}
	
h2 {
    font-size: 32px;}
	
h3 {
    font-size: 24px;}	
/*Storlek på brödtexten och teckensnitt*/
p {
   font-size: 18px;
   font-family: "times new roman", georgia, serif;
   text-align: center;}	

 /*En linje som skiljer av mellan tikarna, planerade kullar och längst ner på varje sida.*/  
hr {
    
	color: brown;
    width: 50%;
	margin-top: 50px;
	margin-bottom: 15px;}
	
/*Bilder för att dom ska betee sig rätt och inte ligga som en röra på sidan*/
img {
	margin: auto;
	padding: 2px;
    max-width: 100%;
    min-width: 300px;
    height: auto;}
	
img.medium {
    max-width: 100%;
    min-width: 300px;
    height: auto;
   }

img.align-center {
	display: block;
	margin: 0 auto}	

img.small {
    max-width: 100%;
    min-width: 300px;
    height: auto;}	
/*Storleken på meny knappar, även mail, pil upp och länkar*/		   
a  {
    font-size: 35px;}
/*Försökte få meny knapparna att ändra lite färg när man klickar på dom*/	
a:link {
	color: #9521BF;
    text-decoration: none;}
a:visited {
    color: #2D56F0;}
a:hover {
	color: #DC3256;
    text-decoration: underline;}
a:active {
    color: yellow;}	
	
form {
     text-align: center;}
	  
/*Längst ner på varje sida under hr tagen för att få till copyright symbolen c, texten ligger så klart centrerad i 18px*/	 
footer {
        text-align: center;
		font-size: 18px;}