@charset "utf-8";

/*
 ************************************************
	joinReleases main.css
 ***********************************************/

/* Variable font *******************************/
@font-face {
	font-family: 'Default-Font';
	src: url('./font/LibreFranklin-VariableFont_wght.ttf');
	font-weight: 300 900;
}

@font-face {
	font-family: 'Default-Font-Italic';
	src: url('./font/LibreFranklin-Italic-VariableFont_wght.ttf');
	font-weight: 300 900;
}

:root {
	/* Global font size/weight */
	--body-font-size: 16px;
	--body-font-weight: 480;
	--body-line-height: 1.7;
	/* Media Small Screen */
	--sm-body-font-size: 14px;
	--sm-body-font-weight: 440;
	--sm-body-line-height: 1.6;
	/* Media Very Small Screen */
	--vsm-body-font-size: 12px;
	--vsm-body-font-weight: 400;
	--vsm-body-line-height: 1.4;
	/* colors */
	--body-background: #FFFFFF;
	--body-color: #333333
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	font-size: var(--body-font-size);
}

body {
	font-family: 'Default-Font', sans-serif;
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	background-color: var(--body-background);
	color: var(--body-color);
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

/* Shared search icon frame/search */
li.search-nav>a,
.search-button {
	background-repeat: no-repeat;
	background-size: contain;
}

li.search-nav>a:hover,
.search-button:hover {
	background-image: url(../img/button_search.hover.svg);
}

/**********************************
	Small Screen
**********************************/
@media only screen and (max-width: 1440px) {

	html,
	body {
		font-size: var(--sm-body-font-size);
	}

	body {
		font-weight: var(--sm-body-font-weight);
		line-height: var(--sm-body-line-height);
	}
}

/**********************************
	Very Small Screen
**********************************/
@media only screen and (max-width: 1366px) {

	html,
	body {
		font-size: var(--vsm-body-font-size);
	}

	body {
		font-weight: var(--vsm-body-font-weight);
		line-height: var(--vsm-body-line-height);
	}
}

/**********************************
	Tablet
**********************************/
@media only screen and (max-device-width: 1080px) {

	html,
	body {
		font-size: var(--body-font-size);
	}

	body {
		font-weight: var(--body-font-weight);
		line-height: var(--body-line-height);
	}
}

/**********************************
	Phone
**********************************/
@media only screen and (max-device-width: 767px) {

	html,
	body {
		font-size: var(--body-font-size);
	}

	body {
		font-weight: var(--body-font-weight);
		line-height: var(--body-line-height);
	}
}