:root {
	--ff-primary: Arial, Helvetica, sans-serif;
	--ff-secondary: Bungee, cursive;
	--ff-accent: Bungee Shade, cursive;

	--fs-link-primary: 1.2rem;
	--fc-link-primary: rgb(11, 84, 153);
	--fc-link-hover: rgb(0, 0, 0);

	--bg-primary: rgb(255, 255, 255);
	--bg-chooseARoof: rgb(246, 226, 156);
}

/* Box sising rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
nav,
ul,
li,
dd {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--ff-primary);
}


/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

.site {
	background: var(--bg-primary);
	display: grid;
	grid-template-columns: 0% 1fr 0%;
}
header {
	z-index: 999;
	display: grid;
	grid-template-columns: 0% 1fr 0%;
	background: var(--bg-primary);
	position: fixed;
	width: 100%;
}

nav {
	display: grid;
	grid-template-columns: auto minmax(300px, 1fr) 1fr;
	background-color: white;

}
nav img {
	grid-column: 1/2;
	height: 80px;
}
nav ul {
	grid-column: 2/4;
	display: flex;
	justify-content: start;
	
}
nav li {
	display: block;
	position: relative;
	top: 70%;
	margin-left: 1em;
}
/* REMOVE LISTE STYLE ON ul element*/
nav ul {
	list-style: none;
}
/*Remove padding*/
nav, ul, li {
	padding: 0;
}

nav a {
	color: var(--fc-link-primary);
	text-decoration: none;
	font-size: var(--fs-link-primary);
	text-transform: uppercase;
}
nav a:hover {
	color: var(--fc-link-hover);
}
.main-content {
	margin-top: 5rem;
	grid-column: 2/3;
	background-color: var(--bg-primary);
}
.side-to-side {
	margin: 1rem 0.5rem;
	padding: 1rem;
}

.side-to-side-75 {
	position:relative;
	margin: 0 auto 2rem auto;
	padding: 2rem;
	width: 75%;
	display: flex;
	justify-content: center;
}
.side-to-side-100 {
	position:relative;
	margin: 0 0 2rem 0;
	padding: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}
.side-to-side-100 p {
	position: absolute;
	top: 40%;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color: white;
}
.side-to-side-75 img {
	width: 75%;
}
.side-to-side-100 img {
	width: 100%;
}

.reklam {
	background: rgb(243, 113, 57);
}

.footer {
	padding: 1rem;
	grid-column: 2/3;
	background: rgb(78, 78, 78);
	text-align: center;
}


/* formDiv - Formulär Div*/
.formDiv {
	margin: 1rem;
	padding: 1rem;
	border-radius: 1rem;

	font-family: var(--ff-primary);
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid black;
}
.formDiv label, input, textarea, button{
	grid-column: 1/1;
	width: 100%;
}
.formDiv .checkDiv {
	display: grid;
	grid-template-columns: 5% 1fr;
}
.formDiv .checkDiv label {
	margin-left: 0.5rem;
	grid-column: 2/3;
	font-size: 1rem;
}
.formDiv .checkDiv input {
	grid-column: 1/2;
}
.formDiv label {
	font-size: small;
}
.formDiv input, button {
	margin-bottom: 10px;
	padding: 0.3rem;
	font-size: 1rem;
	border-radius: .2rem;
}
.formDiv textarea {
	resize: vertical;
	max-width: 50%;
}

/* tjansterDiv - Div som används till tjänster*/
.tjanstDiv {
	display: grid;
	grid-template-columns: 5% 1fr auto;
	gap: 0.5rem;
	padding: .5rem;
	background: var(--bg-primary);
}
.cardTjanst {
	position: relative;
	grid-column: 2/2;
	margin: 0rem;
	padding: 0rem;
	border: 1px solid black;
	border-radius: 0rem;
	max-width: 300px;

	font-family: var(--ff-primary);
	
}
.cardTjanst img {
	width: 100%;
}
.cardTjanst .rubrik {
	background-color: orange;
	padding: .5rem;
	font-size: 1rem;
	position: absolute;
	top: 1%;
	left: 1%;
}
.cardTjanst .brodText{
	align-items: top;
	padding: .5rem;
}


/* chooseARoof - Div som används till att välja tak*/
.chooseARoof {
	gap: 0.5rem;
	padding: .5rem;
	font-family: var(--ff-primary);
	background: var(--bg-chooseARoof);
}
.chooseARoof .rubrik {
	font-size: 2rem;
	text-align: center;
}
.chooseARoof .brodText{
	font-size: 1.3rem;
	text-align: center;
}
.chooseARoof .cardHolder {
	display: grid;
	grid-template-columns: 8% 1fr auto;
}
.chooseARoof .card {
	grid-column: 2/2;
	margin-top: 20px;
	max-width: 300px;
}
.chooseARoof .card img {
	max-width: 100%;
}
.chooseARoof .card .rubrik{
	font-size: 1rem;
	text-align: left;
}
.chooseARoof .card .brodText {
	font-size: 1rem;
}













/* color */

.goldBrown {
	background: rgb(151, 88, 36);
}

.lightOrange {
	background: rgb(255, 122, 50);
}
.Orange {
	background: rgb(255, 125, 50);
}
.lightBlue {
	background: rgb(134, 174, 238);
}

.midGrey {
	background: darkgrey;
}

.darkGrey {
	background: rgb(98, 98, 98);
}

/* Shadows */

.shadow-under-10 {
	box-shadow: 0px 5px 5px -0px rgb(102, 102, 102);
}

/* Fonter och storlekar*/
.rubrik {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	font-weight: bold;
}
.brodtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1rem;
	font-weight: normal;
}
.center {
	text-align: center;
}




@media(min-width: 600px) {
	.site, header, .main-content{
		background: rgb(255, 255, 255);
	}
	.masterhead img {
		height: 100px;
	}
	.tjanstDiv{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		padding: .5rem;
		background: var(--bg-primary);
	}
	.chooseARoof .cardHolder{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		padding: .5rem;
	}
}

/*
@media(max-width: 600px) {
	.site, header, .main-content{
		background: rgb(145, 132, 17);
	}
	.masterhead {
		grid-template-columns: auto minmax(200px, 1fr) 1fr;
	}
	.masterhead img {
		height: 80px;
	}
	
	.main-content {
		margin-top: 7rem;
		grid-column: 2/3;
	}
}
*/