/* Leaston Font */
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

:root {
	/* Example with Leaston University configuration */
	/* Customize your page title below*/
	--main-FR-title-01: "Attestations numériques blockchain";
	--main-FR-title-02: "de Leaston University";
	--university-name: "Leaston University";
	--main-EN-title-01: "Blockchain digital credentials";
	--main-EN-title-02: "of Leaston University";
	/* Comment or uncomment this part to change presentation */
	/* To get the right "--svg-css-filter" to color squares on mobile : */
	/* Paste your "--main-color-dark-01" (#005e7a) in the "Target color" edit : */
	/* https://codepen.io/sosuke/pen/Pjoqqp and clic "Compute Filters"*/
	/* Then copy / paste the filter value from "invert(...)" to "contrast(...)" */
	--main-font: "Montserrat", sans-serif;
	--main-color-dark-01: #005e7a;
	--svg-css-filter: invert(15%) sepia(94%) saturate(3065%) hue-rotate(179deg)
		brightness(93%) contrast(101%);
	--main-color-light-01: #00adef;
	--main-black-01: #070f12;
	--main-gray-light-01: #fafafa;
	--color-main-title-01: white;
	--color-main-title-02: white;
	--logo: url("./img/leaston-logo.svg");
	--header-img: url("./img/leaston-header-img.jpg");
	--header-img-W: 1520px;
	--header-img-H: 280px;
	/* END Comment or uncomment this part to change presentation */

	/* Alternative sample configuration */
	/* To get the right "--svg-css-filter" to color squares on mobile : */
	/* Paste your "--main-color-dark-01" (#ae2573) in the "Target color" edit : */
	/* https://codepen.io/sosuke/pen/Pjoqqp and clic "Compute Filters"*/
	/* Then copy / paste the filter value from "invert(...)" to "contrast(...)" */
	/* Comment or uncomment this part to change presentation
    --main-font: Arial, sans-serif;
    --main-color-dark-01: #ae2573;
    --svg-css-filter: invert(20%) sepia(38%) saturate(4571%) hue-rotate(304deg) brightness(97%) contrast(91%);
    --main-color-light-01: #ffffff;
    --main-black-01: #070F12;
    --main-gray-light-01: #FAFAFA;
    --color-main-title-01: white;
    --color-main-title-02: white;
    --logo: url("img/alt-logo.png");
    --header-img: url("img/alt-header.png");
    --header-img-W: 1520px;
    --header-img-H: 280px; */
	/* END Comment or uncomment this part to change presentation */

	/* ------------------------------------ */
	/* Margins, Paddings, Heigths, Widths */
	--wrapper-V-padding: 0rem;
	--wrapper-H-padding: 0rem;
	--wrapper-V-margin: 0rem;
	--wrapper-H-margin: 0rem;
	--container-V-padding: 0rem;
	--container-H-padding: 0rem;
	--container-V-margin: 0rem;
	--container-H-margin: 0rem;

	--wrapper-padding: var(--wrapper-V-padding) var(--wrapper-H-padding);
	--wrapper-margin: var(--wrapper-V-margin) var(--wrapper-H-margin);
	--container-padding: var(--container-V-padding) var(--container-H-padding);
	--container-margin: var(--container-V-margin) var(--container-H-margin);
	--container-height: calc(100vh - calc(2 * var(--wrapper-V-padding)));
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
p {
	margin: 0;
}
body {
	font-family: var(--main-font);
	color: var(--main-black-01);
	padding: 0;
	margin: 0;
}

.wrapper {
	background: var(--main-color-dark-01);
	box-sizing: border-box;
	padding: var(--wrapper-padding);
	margin: var(--wrapper-margin);
	justify-content: center;
	display: flex;
	overflow: hidden;
}
.wrapper .left-deco {
	width: 100px;
	background-image: url(./img/left-deco.png);
	background-repeat: no-repeat;
}
.wrapper .right-deco {
	width: 100px;
	background-image: url(./img/right-deco.png);
	background-repeat: no-repeat;
}

.wrapper .header {
	background-color: var(--main-color-dark-01);
	background-image: var(--header-img);
	height: var(--header-img-H);
	display: flex;
	align-items: center;
	justify-content: space-around;
	z-index: 20;
	background-position: center center;
	background-size: auto;
}
button#leaston-ac-button {
	border-radius: 5px;
	background-color: white;
	border: none;
}
.wrapper .header .logo-placeholder::before {
	content: var(--logo);
	padding-top: 21px;
	display: block;
}

.wrapper .header .title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	font-size: 1.3em;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: right;
}

.wrapper .header .title .lang {
	position: absolute;
	color: #fff;
	top: 0.2em;
	font-size: 0.7em;
}

.wrapper .header .title .lang a {
	color: #fff;
}

.wrapper .header .EN-title-01::before {
	content: var(--main-EN-title-01);
	color: var(--color-main-title-01);
	text-transform: uppercase;
}
.wrapper .header .FR-title-01::before {
	content: var(--main-FR-title-01);
	color: var(--color-main-title-01);
	text-transform: uppercase;
}
.wrapper .header .EN-title-02::before {
	content: var(--main-EN-title-02);
	color: var(--color-main-title-02);
}
.wrapper .header .FR-title-02::before {
	content: var(--main-FR-title-02);
	color: var(--color-main-title-02);
}
.wrapper .container {
	background: white;
	padding: var(--container-padding);
	margin: var(--container-margin);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	justify-items: flex-start;
	font-size: 1.5rem;
	width: var(--header-img-W);
	height: fit-content;
}

.wrapper .container a {
	color: var(--main-color-light-01);
}
.wrapper .container section {
	padding: 2em 10em 0.5em 10em;
}
.wrapper .container section li {
	list-style: inside url(./img/ul-line-style.svg);
	padding-bottom: 1em;
}
.wrapper .container section h1::before {
	content: url(./img/safe-diploma-ico.png);
	padding: 0 20px 0 0;
	vertical-align: middle;
}
.wrapper .container section h1 {
	color: var(--main-color-dark-01);
	padding-bottom: 0.5em;
}
.wrapper .container section h2::before {
	content: url(./img/safe-diploma-ico.png);
	padding: 0 20px 0 0;
	vertical-align: middle;
}
.wrapper .container section h2 {
	color: var(--main-color-dark-01);
	padding-bottom: 0.5em;
}
.wrapper .container section p {
	padding-bottom: 1em;
}

/* Accordion Core styles/functionality */
.wrapper .container section .tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.wrapper .container section .tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.wrapper .container section .tab input:checked ~ .tab__content {
	max-height: 38rem;
	height: fit-content;
}

/* Visual styles */
.wrapper .container section .accordion {
  color: var(--main-color-dark-01);
  /* border: 2px solid;
  border-radius: 0.5rem; */
  overflow: hidden;
}
.wrapper .container section .tab__label,
.wrapper .container section .tab__close {
  display: flex;
  color: white;
  background: var(--main-color-dark-01);
  cursor: pointer;
}
.wrapper .container section .tab__label {
  justify-content: space-between;
  padding: 1rem;
}
.wrapper .container section .tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.wrapper .container section .tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.wrapper .container section .tab__content p {
  margin: 0;
  padding: 1rem;
}
.wrapper .container section .tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}


/* Arrow animation */
.wrapper .container section .tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}

.wrapper .container section .logo-bcdiploma {
	display: flex;
	justify-content: center;
	padding: 6rem 2rem;
}
.wrapper .container section .logo-bcdiploma img {
	width: 205px;
}

.wrapper .container section .bc-url {
	font-weight: bold;
}

.wrapper .verifier {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	margin: 15px;
	border: 3px solid #f5f5f5;
	border-radius: 4px;
	font-size: 16px;
	background-color: #fafafa;
}

.wrapper .verifier input {
	text-align: center;
	width: 90%;
	padding: 10px;
	margin-right: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
}

.wrapper .verifier #result {
	font-weight: bold;
	color: var(--main-color-dark-01);
}

button#submitButton-fr,
button#submitButton-en {
	padding: 10px 20px;
	background-color: #2e3b4e;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
}

button#submitButton-fr:hover,
button#submitButton-en:hover {
	background-color: var(--main-color-dark-01);
}

@media screen and (max-width: 1440px) {
	.wrapper .header .title {
		font-size: 1em;
	}
	.wrapper .container section h2::before {
		content: url(./img/safe-diploma-ico.png);
		padding: 0 20px 0 0;
		vertical-align: middle;
	}
	.wrapper .container section h2 {
		font-size: 1.2em;
	}

	.wrapper .left-deco {
		display: none;
	}
	.wrapper .right-deco {
		display: none;
	}
}

@media screen and (max-width: 1200px) {
	.wrapper .header {
		display: block;
		text-align: center;
	}
	.wrapper .header .logo-placeholder {
		width: 100%;
	}
	.wrapper .header .title {
		display: block;
		font-size: 1em;
		text-align: center;
		padding-top: 1em;
	}

	.wrapper .header .title .lang {
		right: 4em;
	}
	.wrapper .container section {
		padding: 1em 2em;
	}
}
@media screen and (max-width: 802px) {
	.wrapper .container {
		width: 100vw;
	}
	.wrapper .header {
		position: fixed;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		background-image: none;
		background-size: initial;
		background-color: #fff;
		width: 100%;
		height: 260px;
		box-shadow: -5px 2px 5px darkgray;
	}
	button#leaston-ac-button {
		border-radius: 5px;
		background-color: lightgrey;
		border: none;
	}
	.wrapper .header .faq-deco-img {
		display: block;
		/* filter: var(--svg-css-filter); */
	}
	.wrapper .header .title {
		font-size: 0.7em;
		background-color: var(--main-color-dark-01);
		border-radius: 10px;
		padding: 1em;
		font-weight: bold;
	}
	.wrapper .header .title .lang {
		right: 10em;
		color: #070f12;
	}
	.wrapper .header .title .lang a {
		color: #00adef;
	}
	.wrapper .container section#section01 {
		padding-top: var(--header-img-H);
	}
	.wrapper .container section {
		padding: 1em;
	}
	.wrapper .container section h2 {
		font-size: 0.9em;
	}
	.wrapper .container section p,
	.wrapper .container section ul {
		font-size: 0.8em;
	}
	.wrapper .container section ul {
		padding-left: 0.5em;
	}
}
@media screen and (max-width: 655px) {

	.wrapper .container section .bc-url {
		font-size: 0.8em;
	}
}

@media screen and (max-width: 500px) {
	.wrapper .header .EN-title-01::before,
	.wrapper .header .FR-title-01::before,
	.wrapper .header .EN-title-02::before,
	.wrapper .header .FR-title-02::before {
		font-size: 0.7em;
	}
	.wrapper .container section h2::before {
		content: "";
		padding: 0;
	}
	.wrapper .container section h2 {
		font-size: 0.8em;
		text-transform: uppercase;
		text-align: center;
	}
	.wrapper .container section p,
	.wrapper .container section ul {
		font-size: 0.7em;
	}
}

@media screen and (max-width: 404px) {
	.logo-placeholder::before img {
		width: 100%;
		height: auto;
	}
	.wrapper .header .title .lang {
		/* display: block; */
		right: 10px;
		margin: 0 auto;
	}
	.wrapper .header .faq-deco-img {
		display: none;
	}
	.wrapper .header .title {
		background: none;
	}

	.wrapper .header .EN-title-01::before,
	.wrapper .header .FR-title-01::before,
	.wrapper .header .EN-title-02::before,
	.wrapper .header .FR-title-02::before {
		color: var(--main-color-dark-01);
		font-size: 1em;
	}
	.wrapper .container section .bc-url {
		font-size: 0.6em;
	}
}