@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:wght@200&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* Här ovan lägger jag in typsnitt till webbsidan... */

/* ----------------------------------------------------------------------------------------------------- */
/* OBS OBS OBS OBS OBS !!!! Detta är CSS för BÅDE "Om mig-sidan" OCH ANALYS !!!! OBS OBS OBS OBS OBS !!! */
/* ----------------------------------------------------------------------------------------------------- */

.center {  /* För att centrera table med fler element */
  margin-left: auto;
  margin-right: auto;
}

body {
	background-color: #dbe8eb;
}

.navbar { /* Här ställer jag in navigationsbaren */
	text-align: center;
	position: static; /* Jag vill ha navigationsbaren högst upp, fast position */
	top: 2%; /* Placeringen av navbaren, 2% från sidans "topp" */
	overflow: hidden; /* "Överflödet" göms */
}

.navbar a {
	font-family: "Fira Sans", sans-serif;
	padding-top: 1%;
}

.buttonNavbar { /* Konfigurerar varje knapp som ligger i navigationsbaren */
	background-color: #eab676; /* Vald bakgrundsfärg för varje knapp */
	/* För framtiden, om 4 knappar: width: 23%; /* Bredd på varje knapp */
	width: 43%;  /* Vid användning av 2 knappar i navbar */
	height: 3vw;  /* Knappens höjd anges, 3% av "viewport width" */
	border-style: solid; /* Ram runt */
	border-radius: 3%;	   /* Ram rundning */
	border-color: #eab676;		/* Ram färg */
	float: left;					   /* Ska "flyta" åt vänster på sidan/i diven */
	font-size: 2vw;		/* Textstorlek */
	margin-right: 0.5%;
}

.buttonNavbar:hover {   /* Vad som händer då man håller musen över knappen... */
	background-color: orange;		/* Den ändrar färg. */
}

.nuvarande {		/* Färgar knappen för sidan vi befinner oss på. Knappen som har class "nuvarande", läggs annan färg på knappen "Start" om vi är på startsidan */
	background-color: #e28743;
}

/* ----------------------------------------- */
/* Här slutar konfigurationen av navbaren... */
/* ----------------------------------------- */

.textTopp {
	margin-top: 10%; /* Avstånd mot sidans "topp" */
	text-align: center; /* Centrering text */
}

.rubrik {
	text-align: center; 
}

h1 { /* Ställer in hur rubrik1 ska se ut */
	font-family: "Raleway", system-ui;
	font-size: 5vw;
}

.underRubrik {
	text-align: center;   /* Texten centreras i div:en */
}

h2 { /* Ställer in hur rubrik2 ska se ut */
	font-family: "Raleway", system-ui;
	font-size: 2vw;
}

.intro {
	text-align: center;
}

.introBild { /* Konfigurerar bilden på mig */
	width: 33%; /* Bildens storlek */
	border-radius: 33%; /* Lägger rundade hörn på bilden */
	padding: 1% 0% 3%;
}

.textCenter {
	border-style: solid;  /* Border = ram runt allt inom denna div */
	border-radius: 13%;    /* Lite rundning av hörn... */
	border-color: black;    /* Svart ram... */
	padding-top: 2%;		  /* Fyllning uppåt för att ge lite space */
	padding-bottom: 2%;			/* Och nedåt... */
	text-align: center;			 /* Text mitten */
	width: 70%;					   /* Bestämd bredd på div... */
}

.textCenter p {
	margin-left: 12%;		/* Texten ska "tryckas in" från sidorna, avstånd från höger/vänster kant... */
	margin-right: 12%;
}

h3 {	/* Ställer in hur rubrik3 ska se ut */
	font-family: "Fira Sans", sans-serif;
	font-size: 2vw;
}

h4 {	/* Ställer in hur rubrik4 ska se ut */
	 font-family: "Roboto", system-ui;
}

.text p {   /* Styr texten i div "text", "paragraf-text" */
	font-family: "Fira Sans", sans-serif;  /* Typsnitt bestäms.. */
	text-align: center;  /* Och textstorlek.. */
	margin: 0% 1% 0%;   /* Marginal upp 0, vänster/höger 1%, ned 0. */
}



table {		/* Konfigurerar tabellen... */
	margin-top: 5%;   /* Marginal till sidans topp */
	margin-bottom: 5%;   /* Och botten... */
	border-style: solid;   /* Ram runt... */
	border-radius: 0%;      /* Ramens "rundning" */
	border-color: black;     /* Svart ram */
	width: 80%;               /* 80% av sidan tar ramen upp... */
}

th {	/* Tabellens "heading", rubrik */ 
	background-color: white;  /* Bakgrundsfärg */
}

tr {  /* Tabellens rader */
	border-style: solid;	/* Ram */
	border-radius: 0%;		 /* "Rundning" ram */
	border-color: black;		/* Ram färg */
	background-color: #abdbe3;	   /* Bakgrundfärg för tabellens rader */
}

td {	/* Tabellens data - komlumner på raderna */
	border-style: solid;	/* Ram */
	border-radius: 0%;		 /* "Rundning" ram */
	border-color: black;		/* Ram färg */
	background-color: #76b5c5;    /* Bakgrundfärg för tabellens kollumner */
	text-align: center; 		   /* Centrering text i kollumnen */
	padding-top: 3%;				/* "Packning" upp.. */
	padding-bottom: 3%;				  /* Och ned... */
}

.bildKvardat { /* Styr bilden, 100% av storleken */
	width: 100%;
}

.lankar {   /* Styr länkarna "Relaterade länkar" i footer */ 
	margin-left: 60%;	/* De ska börja mitt i sidan, "50% in" */
	width: 40%;   /* Ska ta upp 100%. (så namn och datum hamnar under längst ned på sidan. */
	padding-bottom: 3%;   /* Packning nedåt */
}

.padding {
	padding: 1% 2% 1%;  /* "Packning" vänster upp/ned höger */
}

.lankLankar a {   /* Bakgrundsfärg länk "opåverkad" */
	background-color: lightgoldenrodyellow;
}

.lankLankar a:hover {    /* Vid musen ovanför länken ändras bakgrundsfärgen... */
	background-color: orange;
}

footer {  /* Sidans "fot" */
	position: static;  /* Statisk, sitter "fast" längst ned..... */
	bottom: 1px;    /* 1 px från botten */
}

.knappLank {    /* Knapparna med länkar... */
	font-family: "Roboto", system-ui;  /* Typsnitt och storlek */
	font-size: 2vw;   /* Fontstorlek */
}

.footerStorre {  /* Gör rubriken för "Relaterade länkar" större med annant typsnitt */
	font-size: 2vw;  /* Storlek */
	font-family: "Fira Sans", system-ui; /* Typsnitt */
	font-weight: 700;   /* "Tjocklek text" */
	font-style: normal;   /* Stil på texten */
	margin-right: 3%;	/* Marginal höger*/
}

.ikon {	/* Konfigurerar FontAwesome-ikonerna */
	font-size: 200%;	/* Storlek ikoner */
	margin-right: 2%;	/* Mellanrum till texten i samma "i-class" åt höger */
	margin-left: 5%;    /* Putta bort div åt vänster... */
}

.fa-linkedin {
	color: dodgerblue;   /* Ikonens (Linkedin) färg */
}

.fa-file {
	color: tomato;    /* Ikonens ("CV-ikonen") färg */
	padding-bottom: 3%;
}

#logotype {		/* Logotypen */
	width: 30%;  /* Storlek/bredd */
	float: left;	/* "Håll åt vänster" */
	margin-left: 3%;	/* Marginal till vänster "kant" */
}

.mellanrum {
	margin-right: 7%;     /* Litet mellanrum mellan länkarna ;) */
}


/* ----------------- Ställer in analys-sidans specifika rubriker ----------------- */

.uppgiften {   /* Här styrs "uppgift-sidan" */
	text-align: left;	/* Text ska "tryckas" till vänster i diven */
	width: 80%;   /* Diven tar upp 80% av skärmen */
	margin-left: 10%;	/* Med liten marginal/avstånd från vänster sida skärm - är då i mitten på hela sidan */
}

.h2uppgift {  /* Styr rubrikerna... */
	font-size: 150%; /* Typsnitt text */
	font-family: "Roboto", system-ui;   /* Typsnitt text */
	font-weight: 300;   /* "Tjocklek" text */
}

.h3uppgift {
	font-size: 130%;
	font-family: "Roboto", system-ui;   /* Typsnitt text */
	font-weight: 500;   /* "Tjocklek" text */  
	font-style: italic;   /* Säger att texten ska vara kursiv */
	background-color: lightgrey;    /* Bakgrund för rubriken - blir hela sidans bredd i.o.m. div:ens konfiguration. Detalj för tydligare rubriker / skilja stycken åt enklare */
}

.lankLankar p { /* För paragraf-taggen på analys-sidan, dvs all text exkl. rubriker och så */
	font-size: 110%;
}