/* TODO Choose which font */
/* @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap');

@font-face
{
	font-family: "Helvetica Neue";
	font-weight: 300;
	font-display: swap;
	font-stretch: 200%;
	src:
		local("Helvetica Neue"),
		url("/fonts/HelveticaNeueRoman.woff2") format("woff2");
}

:root
{
    --white: #FFF;
    --yellow: #ffd900;
    --risalto-red-light: #AA0000;
    --risalto-red-light-opacity02: rgba(170, 0, 0, 0.2);
    --risalto-red-dark: #880000;
    --risalto-beige-light: #f5f5f5;
    --risalto-grey-ultralight: #949494;
    --risalto-grey-light: #666666;
    --risalto-greyed-out: #a7a7a7;
    --risalto-grey: #555555;
    --risalto-grey-dark: #1e1e23;

	--red-error-msg-bg: #f0e4e4;
	--red-error-msg-border: #b12828;

    --font-size-s: 0.75rem;
    --font-size-m: 1rem;
    --font-size-l: 1.2rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
}

html
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: "Radio Canada", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--risalto-grey);
}

.main-font,
h1, h2, h3, h4, h5,
#navbar
{
  font-family: "Rajdhani", sans-serif;
}

nav ul,
footer ul,
#categories-list ul
{
	padding: 0;
	list-style-type: none;
}

a {
  text-decoration: none;
}

.container {
	max-width: 1200px;
	margin: auto;
	padding: 0 25px;
}

#page-content
{
	flex: 1;
	margin-top: -71px;
}

/* BUTTONS */
.button-main,
.button-main-reverse,
.button-secondary,
.button-tertiary
{
	box-sizing: border-box;
	outline: none;
	font-family: inherit;
	padding: 0.5rem 1.6rem;
	border-radius: 0.3rem;
	font-weight: 400;
	font-size: 1rem;
	text-align: center;
	width: fit-content;
	cursor: pointer;
}

.button-main
{
	color: #fff;
	border: 1px solid #aa0000;

	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 4px 8px rgba(0, 0, 0, 0.25);
	background: linear-gradient(145deg, #bc0000, var(--risalto-red-dark));
}

.button-main-reverse
{
	background-color: #fff;
	color: var(--risalto-red-light);
	border: 1px solid var(--risalto-red-light);
	/* TODO(Ivi) ask Matteo: "why cursor: initial;?"!!! hahaha */
	/* cursor: initial; */

  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12), 
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 3px rgba(0, 0, 0, 0.08) inset; 
}

.button-secondary
{
	border: 1px solid #dedede;
	color: var(--risalto-grey);

	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 4px 8px rgba(0, 0, 0, 0.2);
	background: linear-gradient(145deg, #efefef, #d8d8d8);
}

.button-tertiary
{
  background-color: #fff;
	color: var(--risalto-grey);
	border: 1px solid #e6e6e6;

  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12), 
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 3px rgba(0, 0, 0, 0.08) inset; 
}
/* BUTTONS END */

/* DIVIDER */
.divider {
	display: flex;
	justify-content: center;
	align-items: center;
}

.divider span {
	display: flex;
	width: 80px;
	height: 2px;
	background-color: var(--risalto-grey-dark);
}

.divider .flag-icon {
	margin: 0 15px;
}

.divider img {
	height: 35px;
}
/* DIVIDER END */