/*

	Theme Name: Unbreakable Theme
	Theme URI: https://mlk.dev/themes/unbreakable
	Author: Matt Keith
	Author URI: https://mlk.dev/
	Description: Official custom WordPress theme for Unbreakable Artist & Creative

*/
@media (min-width: 0px) {
	:root {
		--pad: 16px;
		--text: 16px;
		--title: 24px;
	}
}
@media (min-width: 640px) {
	:root {
		--pad: 24px;
		--text: 18px;
		--title: 28px;
	}
}
@media (min-width: 960px) {
	:root {
		--pad: 32px;
		--text: 20px;
		--title: 32px;
	}
}
@media (min-width: 1280px) {
	:root {
		--pad: 40px;
		--text: 22px;
		--title: 36px;
	}
}
@media (min-width: 1600px) {
	:root {
		--pad: 48px;
		--text: 24px;
		--title: 40px;
	}
}
@media (min-width: 1920px) {
	:root {
		--pad: 56px;
		--text: 26px;
		--title: 44px;
	}
}

/* Root Background & Text Color */

html, body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	color: #000;
}
@media (prefers-color-scheme: dark) {
	html, body {
		background-color: #000;
		color: #FFF;
	}
}
:is(header, main, footer),
:is(header, main, footer) *,
:is(header, main, footer) *::before,
:is(header, main, footer) *::after {
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-size: var(--text);
	font-weight: 400;
}
:is(header, main, footer) :is(h1,h2,h3,h4,h5,h6) {
	margin: 0;
	padding: 0;
	line-height: 1;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: var(--title);
	font-weight: 700;
}

/* Skip Link */

body > a[href="#main"] {
	box-sizing: border-box;
	padding: calc(var(--pad) / 2) var(--pad);
	font-family: 'Roboto', sans-serif;
	font-size: var(--text);
	font-weight: 400;
	text-decoration: none;
	background: #000;
	color: #FFF;
	position: absolute;
	z-index: 2;
	left: 50%;
	transform: translate(-50%,-100%);
	transition: transform 0.25s;
}
body > a[href="#main"]:focus {
	transform: translate(-50%,0%);
}