/* 
	Theme name: Crille 2023
	Theme URI: http://crille.org
	Description: Enkelt tema i grått. Språkstödet är dumpat, så du kan förhoppningsvis lite Svenska. Responsivt och testkört på många upplösningar. Handkodat från start till mål.
	Copyright: GPL v3.0
	Version: 1.0
	Author: Christian Ohlsson
	Author URI: https://crille.org
	Tags: responsive, simple, clean, dark
*/
:root {
	--blue: #007bff;
	--darkblue: #171717;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--lighttext: #e6e6e6;
	--linkcolor: #75b6e7;
	--dark: #121212;
}
*,
::after,
::before {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
}
@font-face {
	font-family: Selawik;
	src: url("/fonts/selawik.woff") format("woff"), url("/fonts/selawik.woff2") format("woff2");
}
@font-face {
	font-family: SelawikSemiBold;
	src: url("/fonts/selawik-semibold.woff") format("woff"),
		url("/fonts/selawik-semibold.woff2") format("woff2");
}
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
   scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: Selawik, sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--dark);
	background-color: var(--white);
}
main {
	display: block;
}
address,
blockquote,
dl,
figure,
form,
iframe,
p,
pre,
table {
	margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: SelawikSemiBold, sans-serif;
	font-size: inherit;
	line-height: 1.3;
	font-weight: 600;
	margin: 0;
	padding-top: 1rem;
}
h1 {
	font-size: 2.4rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.6rem;
}
h4 {
	font-size: 1.4rem;
}
h5 {
	font-size: 1.3rem;
}
h6 {
	font-size: 1.2rem;
}
ol,
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ol li,
ul li {
	line-height: 1.5;
}
ol,
ul {
	margin-left: 3em;
}
ul {
	list-style: square;
}
ul ul {
	list-style: circle;
}
ol {
	list-style: decimal;
}
ol ol {
	list-style: lower-alpha;
}
p {
	margin-bottom: 1.5rem;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-justify {
	text-align: justify;
}
.text-lowercase {
	text-transform: lowercase;
}
.text-uppercase {
	text-transform: uppercase;
}
.text-capitalize {
	text-transform: capitalize;
}
nav ul {
	list-style: none;
	display: inline-block;
	margin: 0;
	padding: 0;
}
nav ul li {
	display: inline;
	line-height: 1rem;
}
nav ul li {
	text-decoration: none;
	padding: 1rem;
	display: inline-block;
}
nav ul li:hover {
	background-color: var(--light);
	color: var(--light);
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}
dt {
	font-weight: 700;
}
dd {
	margin-left: 0;
}
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	border-top-width: 1px;
	margin: 0;
	clear: both;
	color: var(--dark);
}
pre {
	font-family: monospace, monospace;
	font-size: inherit;
}
address {
	font-style: inherit;
}
a {
	background-color: transparent;
	text-decoration: underline;
	color: var(--primary);
}
abbr[title] {
	text-decoration: underline;
	text-decoration: underline dotted;
}
b,
strong {
	font-weight: bolder;
}
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: inherit;
}
small {
	font-size: 80%;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
embed,
iframe,
img,
object {
	vertical-align: bottom;
}
button,
input,
optgroup,
select,
textarea {
	vertical-align: middle;
	color: inherit;
	font: inherit;
	background: 0 0;
	padding: 0;
	margin: 0;
	outline: 0;
	border-radius: 0;
	text-align: inherit;
}
[type="checkbox"] {
	-webkit-appearance: checkbox;
	appearance: checkbox;
}
[type="radio"] {
	-webkit-appearance: radio;
	appearance: radio;
}
button,
input {
	overflow: visible;
}
button,
select {
	text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font-weight: 600;
	background: var(--primary);
	border: thin solid #337ab7;
	padding: 0.5rem 1.3rem;
	color: var(--light);
	font-size: 1.1rem;
	letter-spacing: 1px;
}
button:hover {
	background: #3232ec;
}
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled],
button[disabled] {
	cursor: default;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
	border-style: none;
	padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
	outline: 1px dotted ButtonText;
}
[type="text"],
select {
	border: thin solid var(--gray-dark);
	padding: 2px 10px;
}
select::-ms-expand {
	display: none;
}
option {
	padding: 0;
}
fieldset {
	margin: 0;
	padding: 0;
	min-width: 0;
}
legend {
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}
progress {
	vertical-align: baseline;
}
textarea {
	overflow: auto;
	border: thin solid var(--gray-dark);
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
[type="search"] {
	outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}
label[for] {
	cursor: pointer;
}
[type="file"] {
	border: thin solid var(--gray-dark);
}
details {
	display: block;
}
summary {
	display: list-item;
}
[contenteditable] {
	outline: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption {
	text-align: left;
}
td,
th {
	vertical-align: top;
	padding: 0;
}
th {
	text-align: left;
	font-weight: 700;
}
template {
	display: none;
}
[hidden] {
	display: none;
}
/* ************************************************************* */
/*   MAIN LAYOUT  */
/* ************************************************************* */
body {
	background-color: var(--darkblue);
	color: var(--lighttext);
}
.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
}
header.main {
	margin-bottom: 40px;
	padding-top: 10px;
	border-bottom: 2px solid var(--orange);
}
article header {
	margin-bottom: 40px;
	padding-top: 10px;
}
header .container {
	display: flex;
	justify-content: space-between;
}
main {
	display: grid;
	grid-template-columns: 2fr 5fr 2fr;
	grid-template-areas: "side1 sect side2";
	column-gap: 50px;
}
main article {
	margin-bottom: 30px;
	border-bottom: 2px solid var(--orange);
	padding-bottom: 40px;
}
article img {
	max-width: 100%;
	height: auto;
}

section {
	grid-area: sect;
}
.side1 {
	grid-area: side1;
}
.side2 {
	grid-area: side2;
}
aside ul {
	margin-left: 40px;
}

a:hover {
	color: var(--success);
}
/* ************************************************************* */
/*   SINGLE POST */
/* ************************************************************* */
.single main {
	grid-template-columns: 1fr;
	grid-template-areas: "sect";
}
.single article {
	max-width: 1000px;
	margin: 0 auto;
}
pre {
	background-color: var(--gray-dark);
	padding: 20px;
	margin: 20px;
	white-space: pre-wrap;
}

/* ************************************************************* */
/*   FOOTER  */
/* ************************************************************* */
footer {
	border-top: 2px solid var(--orange);
	background-color: #212426;
	padding: 100px 0;
	margin-top: 100px;
}
footer .container {
	display: grid;
	grid-template-columns: 1fr 2fr 3fr;
	grid-template-areas: "bild text info";
}
footer .bild {
	grid-area: bild;
	width: 100%;
}
footer .text {
	grid-area: text;
	text-align: center;
}
footer .info {
	grid-area: info;
}

/* ************************************************************* */
/*   SPOTIFY WIDGET */
/* ************************************************************* */
#spotify img {
	width: 100%;
	height: 100%;
}

/* ************************************************************* */
/*   SÖKRUTAN */
/* ************************************************************* */
#search-area {
	margin-top: 25px;
}
#searchform input[type="text"] {
	padding: 10px;
	border: 1px solid grey;
	float: left;
	width: 80%;
}
#searchform ::placeholder {
	color: var(--lighttext);
}
#searchform button {
	float: left;
	width: 40px;
	padding: 10px;
	background: #2196f3;
	color: white;
	font-size: 17px;
	border: 1px solid grey;
	border-left: none;
	cursor: pointer;
}

#searchform button:hover {
	background: #0b7dda;
}

#searchform::after {
	content: "";
	clear: both;
	display: table;
}

/* ************************************************************* */
/*   PAGESCAN */
/* ************************************************************* */
.pageScan {
	background-color: #212426;
	text-align: center;
	padding-bottom: 1px;
}

/* ************************************************************* */
/*   NAVIGATION */
/* ************************************************************* */
nav a {
	text-transform: uppercase;
	color: var(--lighttext);
	text-decoration: none;
}
nav a:hover {
	color: var(--darkblue);
	text-decoration: underline;
}

/* ************************************************************* */
/*   WIDGETS */
/* ************************************************************* */
.widget {
	margin-bottom: 50px;
}
.widget h3 {
	margin-bottom: 10px;
}
#archives-dropdown-2 {
	color: var(--lighttext);
	background-color: var(--darkblue);
}

/* ************************************************************* */
/*   MEDIA QUERIES */
/* ************************************************************* */
@media (max-width: 1400px) {
	.container {
		width: 100%;
	}
}
@media (max-width: 1200px) {
	main {
		grid-template-columns: 3fr 1fr;
		grid-template-areas:
			"sect side2"
			"sect side1";
	}
}
@media (max-width: 950px) {
	footer .container {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"info info"
			"bild text";
	}
}
@media (max-width: 800px) {
	header .container {
		flex-direction: column;
		text-align: center;
	}
}
@media (max-width: 750px) {
	main {
		grid-template-columns: 1fr;
		grid-template-areas:
			"sect"
			"side1"
			"side2";
	}
	footer .container {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"bild text"
			"info info";
		row-gap: 50px;
	}
}
@media (max-width: 500px) {
	footer .container {
		display: flex;
		flex-direction: column;
	}
	footer .bild {
		text-align: center;
		margin: 0;
	}
	footer .visningsbild {
		width: 90%;
	}
	footer .text {
		margin: 40px 0;
	}
}

@media (max-width: 400px) {
	article h2 {
		font-size: 1.4rem;
	}
	#spotify img {
		width: 200px;
		height: 200px;
	}
}

/* ************************************************************* */
/*   LIGHT / DARK MODE */
/* ************************************************************* */
@media (prefers-color-scheme: light) {
	body,
	nav a,
	.pageScan,
	.widget h3,
	#archives-dropdown-2,
	#searchform ::placeholder,
	footer {
		background: var(--lighttext);
		color: var(--darkblue);
	}
}