/**
*	Common CSS file.
*/

@import "app.fonts.css" ;
@import "app.reset.css" ;
@import "app.helpers.css" ;

/* some values and dark style colors */
@import "vars-dark.css" ;

/* media sets */
@media all
{
	.page-break {
		display: none ;
	}
}

@media print
{
	* {
		color: black ;
		background: white ;
		_border: 1px solid ;
	}
	@page {
		margin: 0.5cm 0 0 0 ;
	}
	.page-break {
		display: block ;
		page-break-before: always ;
	}
	.no-print {
		display: none ;
	}
}

/* global sets */
* {
	font-family: NotoMono, OpenSans, Helvetica ;
	font-size: 1rem ;
	letter-spacing: 0.02rem ;
}

/* Site layout styles */
.container
{
	display: flex ;
	flex-flow: column wrap ;
	align-items: center ;
	justify-content: center ;
	width: 100% ;
	_border: 2px solid salmon ;
}

.container header
{
	max-width: 100% ;
	padding: 1em ;
	_border: 2px solid salmon ;
}

.container header img
{
	width: 100% ;
	margin-bottom: 1em ;
	_border: 2px solid salmon ;
}

#avatar
{
	background: silver ;
	border-radius: 100% ;
	_border: 5px solid black ;
}

.container social
{
	position: absolute ;
	z-index: 100 ;
	color: inherit ;
	_border: 2px solid salmon ;
}

#social-icon
{
	max-width: 36px ;
	margin: 0 ;
	_border: 2px solid salmon ;
}

.container contact
{
	max-width: 100% ;
	_border: 2px solid salmon ;
}

.container footer
{
	_border: 2px solid salmon ;
}

/* Main styles for the web site */
body
{
	color: var( --fore-color );
	background: var( --back-color );
}

code, pre
{
	font-family: monospace ;
	font-size: 1em ;
}

code
{
	background: var( --opt-back-color );
	border-radius: var( --universal-border-radius );
	padding: calc( var( --universal-padding ) / 4 ) calc( var( --universal-padding ) / 2 );
}

pre
{
	overflow: auto ;
	background: var( --opt-back-color );
	padding: calc( 1.5 * var( --universal-padding ) );
	margin: var( --universal-margin );
	border: 0.05rem solid var( --opt-border-color );
	border-left: 0.25rem solid var( --pre-color );
	border-radius: 0 var( --universal-border-radius ) var( --universal-border-radius ) 0 ;
}

hr
{
	box-sizing: content-box ;
	border: 0 ;
	line-height: 1.25em ;
	margin: var( --universal-margin );
	height: 0.0625rem ;
	background: linear-gradient( to right, transparent, var( --border-color ) 20%, var( --border-color ) 80%, transparent );
}

form
{
	background: var( --form-back-color );
	color: var( --form-fore-color );
	border: 0.06rem solid var( --form-border-color );
	border-radius: var( --universal-border-radius );
	margin: var( --universal-margin );
	padding: calc( 2 * var( --universal-padding ) ) var( --universal-padding );
}

fieldset
{
	border: 0.06rem solid var( --form-border-color );
	border-radius: var( --universal-border-radius );
	margin: calc( var( --universal-margin ) / 4 );
	padding: var( --universal-padding );
}

legend
{
	box-sizing: border-box ;
	display: table ;
	max-width: 100% ;
	white-space: normal ;
	font-weight: bold ;
	padding: calc( var( --universal-padding ) / 2 );
}

label
{
	padding: var( --universal-padding );
}

input, textarea, select
{
	box-sizing: border-box ;
	background: var( --input-back-color );
	color: var( --input-fore-color );
	border: 0.06rem solid var( --input-border-color );
	border-radius: var( --universal-border-radius );
	margin: calc( var( --universal-margin) / 2 );
	padding: var( --universal-padding ) calc( 1.5 * var( --universal-padding ) );
	outline: none ;
}

input[type="color"]
{
	background: var( --input-back-color );
	color: var( --input-fore-color );
	border: 0.06rem solid var( --input-border-color );
	border-radius: var( --universal-border-radius );
}

select
{
	max-width: 100% ;
}

option
{
	overflow: hidden ;
	text-overflow: ellipsis ;
	border-radius: var( --universal-border-radius );
	padding: 0.2em 0.6em 0.2em 0.6em ;
}

button
{
	overflow: visible ;
	text-transform: none ;
}

button, [type="button"], [type="submit"], [type="reset"],
a.button, label.button, .button,
a[role="button"], label[role="button"], [role="button"]
{
	display: inline-block ;
	background: var( --button-back-color ) ;
	color: var( --button-fore-color );
	border: 0.06rem solid var( --button-border-color );
	border-radius: var( --universal-border-radius );
	padding: var( --universal-padding ) calc( 1.5 * var( --universal-padding ) );
	margin: var( --universal-margin );
	text-decoration: none ;
	cursor: pointer ;
}

button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover,
[type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
a.button:hover, a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
a[role="button"]:hover, a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus,
[role="button"]:hover, [role="button"]:focus
{
	background: var( --button-hover-back-color );
	border-color: var( --button-hover-border-color );
}

input:disabled, input[disabled], textarea:disabled, textarea[disabled],
select:disabled, select[disabled], button:disabled, button[disabled],
.button:disabled, .button[disabled],
[role="button"]:disabled, [role="button"][disabled]
{
	cursor: not-allowed ;
	opacity: 0.75 ;
}

mark
{
	background: var( --mark-back-color );
	color: var( --mark-fore-color );
	font-size: 0.95em ;
	line-height: 1em ;
	border-radius: var( --universal-border-radius );
	padding: calc( var( --universal-padding) / 6 ) calc( var( --universal-padding ) / 2 );
}

.spinner
{
	display: inline-block ;
	margin: var( --universal-margin );
	animation: anim-rotate 1.2s linear infinite ;
}

/** EOF **/