/*
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Qwitcher Grypen', cursive;

font-family: 'Alex Brush', cursive;
font-family: 'Qwitcher Grypen', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Montserrat', sans-serif;

*/


@font-face {
  font-family: 'Albertus Nova', serif;
  src: url('./fonts/AlbertusNova/AlbertusNova.woff2') format('woff2'),
  src: url('./fonts/AlbertusNova/AlbertusNova-Bold.woff2') format('woff2'),
  src: url('./fonts/AlbertusNova/AlbertusNovaLight.woff2') format('woff2'),
  src: url('./fonts/AlbertusNova/AlbertusNovaThin.woff2') format('woff2'),
  src: url('./fonts/AlbertusNova/AlbertusNovaBlack.woff2') format('woff2');
  font-display: swap; /* Recommended for better performance */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat', sans-serif;
  src: url('./fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), 
  src: url('./fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'),
  src: url('./fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');

  font-display: swap; /* Recommended for better performance */
  font-weight: normal;
  font-style: normal;
}


:root
{

	--logo-font-family: 'Albertus Nova', serif;
	--styled-font-family: 'Albertus Nova';
	--title-font-family: 'Albertus Nova';
	--base-font-family: 'Montserrat', sans-serif;
	
	--color-accent1: #2874A6; /* blue */
	--color-accent2: #8FD4D7; /* blue */
	--color-accent3: #EAFAF1;
	
	--color-gray-lightest: #F4F6F7;
	--color-gray-lighter: #F0F3F4;
	--color-gray-light: #ECF0F1;
	--color-gray-base: #D0D3D4;
	--color-gray-dark: #B3B6B7;
	--color-gray-darker: #979A9A;
	--color-gray-darkest: #434343 ;

	--color-blue-lightest: #A9CCE3;
	--color-blue-lighter: #7FB3D5;
	--color-blue-light: #5499C7;
	--color-blue-base: #2980B9;
	--color-blue-dark: #1F618D;
	--color-blue-darker: #1A5276;
	--color-blue-darkest: #154360;

	--color-gold: #F4D03F;

	--color-dhl-yellow: #FFCC00;
	--color-dhl-red: #D40511;

	--vyd-color-blue: #00447C;
	--vyd-color-red: #990000;
	--vyd-color-gray-dark: #575755;
	--vyd-color-blue: #00447C;


	--sm-font-size: 10px;
	--md-font-size: 14px;
	--lg-font-size: 21px;
	--xl-font-size: 32px;
	--2x-font-size: 36px;
	--3x-font-size: 48px;
	--4x-font-size: 64px;

	--border-radius: 10px;
	--opacity: 0.8;
	--border-radius: 10px;
	--padding: 10px;

	--alert-success-font-color: #3A744B;
	--alert-info-font-color: #356C89;
	--alert-warning-font-color: #7F6000; 
	--alert-error-font-color: #AB414A;

	--alert-success-background: #DEF0D8;
	--alert-info-background: #D9EDF6;
	--alert-warning-background: #FDF8E4;
	--alert-error-background: #F2DEDF;

}

*, ::before, ::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}
::placeholder {
  color: lightgray;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}



/* base styles (mobile-first) */
html {font-size: 20px;}
h1{ font-size: 2rem }
span{font-size: 1rem;}


/* Adjust for larger screens */
@media only screen and (min-width : 768px)
{
	html { font-size: 20px;}

}

/* Adjust for even larger screens */
@media only screen and (min-width : 1200px)
{
	html { font-size: 20px;}
}

/* ---------------------------------------------------*/
html, body
	{
		width: 100%;
		height: 100%;

		font-family: var(--base-font-family);
		font-weight: 400;
		box-sizing: border-box;

	}


body 
{ 
	width: 100vw;
	height: 100vh;

	
	background: var(--color-gray-light);
	
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: flex-start;
	

	overflow: auto;

}
h1 {font-size: 3rem; }
h2 {font-size: 2rem;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1rem;}
h5 {font-size: 0.75rem;}
h6 {font-size: 0.5rem;}

a 
{
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;

}
a:hover
{
	font-weight: 800;

}

label
{
   font-size: 0.8rem;
   font-family: var(--base-font-family);
   font-weight: 600;
   color: var(--color-gray-darker);
   
}

input
{
   outline: none;
   border: none;
   
   border-bottom: 1px solid var(--color-gray-darker);
   padding: 0.2rem 0.5rem 0.5rem 0.5rem;

   font-family: var(--base-font-family);
   font-size: 1rem;
   font-weight: 500;
   letter-spacing: 0.5px;
   border-radius: 0px;
}
input:focus
{
    border-bottom: 2px solid var(--color-accent1);
    background: var(--color-gray--lightest);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input::placeholder 
{
    font-size: 0.8rem;
}

button
{
	min-width: 80px;
	font-family: var(--base-font-family);
	padding: 0.5rem 1rem;
	background: var(--color-accent1);
	border-radius: 8px;
	border: none;
	color: white;
	font-weight: 600;

	text-transform: uppercase;
	letter-spacing: 0.5px;

	font-size: 0.65rem;
	cursor: pointer; 
	text-overflow: ellipsis;
}
button:hover
{
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.38);
	transform: translate(0, -3px);
}
button.outlined,
button.secondary
{
	background: white;
	border: 2px solid var(--color-accent1);
	color: var(--color-accent1);
}
button.tertiary
{
	background: transparent;
	border: 2px solid transparent;
	color: var(--color-accent1);

	
}
button.md
{
	padding: 0.5rem 1rem;

}
button.sm
{
	padding: 0.3rem 0.5rem;
	font-size: .6rem;
}
span.primary-text
{
	font-weight: 700;
	font-size: 1.0rem;
	letter-spacing: 0.5px;
}
span.secondary-text
{
	font-size: 0.8rem;
	color: var(--color-gray-darker);
}
span.tertiary-text
{
	font-size: 0.6rem;
	color: var(--color-gray-darker);
	text-transform: uppercase;
}


/*----------------------------------------------------*/

span.alert
{
	padding: 0.5rem 1.5rem;
	border-radius: 0.5rem;
}
span.info 
{
	color: var(--alert-info-font-color);
	background: var(--alert-info-background);
}
span.success
{
	color: var(--alert-sucess-font-color);
	background: var(--alert-sucess-background);
}
span.error
{
	color: var(--alert-error-font-color);
	background: var(--alert-error-background);
	
}
span.warning
{
	color: var(--alert-warning-font-color);
	background: var(--alert-warning-background);
	padding: 0.5rem;
}


/*----------------------------------------------------*/

ul {
	list-style-type: none; 
}