/*
>>================================================================================>
Site Variables
>>================================================================================>
*/

/*
Fonts
>>------------->
*/

@font-face {
	font-family: 'BigNoodleTitling';
	src: url('../fonts/BigNoodleTitling-Oblique.woff2') format('woff2'), url('../fonts/BigNoodleTitling-Oblique.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'BigNoodleTitling';
	src: url('../fonts/BigNoodleTitling.woff2') format('woff2'), url('../fonts/BigNoodleTitling.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'soccer_scoreboardregular';
	src: url('../fonts/soccer-scoreboard-webfont.woff2') format('woff2'), url('../fonts/soccer-scoreboard-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

$font_primary: aktiv-grotesk, sans-serif;
$font_secondary: 'BigNoodleTitling', sans-serif;
$font_score: 'soccer_scoreboardregular', sans-serif;

/*
Font Weights
>>------------->
*/

$weight_regular: 400;
$weight_medium: 500;
$weight_semibold: 600;
$weight_bold: 700;

/*
Colors
>>------------->
*/

$color_white: #ffffff;
$color_black: #000000;
$color_purple: #310167;
$color_purple_alt: #2c005a;
$color_purple_2: #200140;
$color_blue: #6200ea;
$color_pink: #f32b94;
$color_placeholder: red;

/*
Breakpoints
>>------------->
*/

$breakpoint_desktop: 768px;
$breakpoint_mobile: ($breakpoint_desktop - 1);

/*
Wireframe
>>------------->
*/

$site_width: 1198px;
$padding_desktop: 55px;
$padding_mobile: 20px;

/*
All Resolutions 
>>------------->
*/

$color_text_selection: $color_pink;

/* Text Highlight Color */

::-moz-selection {
	background: $color_text_selection;
	color: $color_white;
}

::selection {
	background: $color_text_selection;
	color: $color_white;
}

::-moz-selection {
	background: $color_text_selection;
	color: $color_white;
}

body {
	font-family: $font_primary;
	font-weight: $weight_regular;
	background-color: $color_purple;
	color: $color_white;

	/* Page Loading */

	&:before {
		position: fixed;
		content: '';
		width: 100%;
		height: 100%;
		background-color: $color_purple;
		z-index: 1000;
		transition: opacity 500ms ease, visibility 500ms ease;
		top: 0;
		left: 0;
	}

	@at-root &.page-loaded:before {
		opacity: 0;
		visibility: hidden;
	}
}

main {
	position: relative;
	overflow: hidden;
}

a {
	color: inherit;
}

.pink {
	color: $color_pink;
}
