/*

Variables

*/

:root {
  /* Typography */
  --font-family: "Inter", sans-serif;
  --font-size-body: 1rem;
  --font-size-small: 0.75rem;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --line-height: 1.375;

  /* Layout */
  --padding-container: 1rem;
  --width-container: 100rem;
  --width-textcol: 37.5rem;
  --width-media-sm: 30rem;
  --width-media-md: 50rem;
  --width-media-lg: var(--width-container);
}

/*

Fonts

*/

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/Inter-Italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2");
}

/*

Base styles

*/

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding-top: 4rem;
  box-sizing: border-box;
  color: #000000;
  background: #ffffff;
  padding-left: var(--padding-container);
}

/*@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background: #1b1b1b;
  }

  body a {
    color: #beebff;
  }
  a:hover {
    text-decoration: underline;
    color: #f8fdff;
  }
} */

h1 {
  font-size: 2.2rem;
  font-weight: 600;
} 
h2 {
  font-size: 1.75rem;
  font-weight: 500;
}
h3 {
  font-size: 1.5rem;
  font-weight: 700;
}
h4 {
  font-size: 1.1rem;
  font-weight: 600;
}
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin-bottom: 1em;
  margin-top: 3em;
}

p {
  margin-bottom: 1em;
  margin-top: 0;
}

a {
  color: inherit;
  text-decoration: underline;
}

a:focus {
  outline-style: double;
  outline-color: #000;
  outline-width: 2px;
  text-decoration: underline;
  background-color: rgb(255, 237, 187);
}

a:hover {
  text-decoration: underline;
  color: #0000FC;
}

body > header a {
  text-decoration: none;
  font-size: large;
}

body > header a:focus,
body > header a:hover {
  text-decoration: underline;
  font-size: large;
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

code,
samp,
kbd {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

pre {
  overflow-x: auto;
}

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

img.big-img {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
  z-index: 1;
}

video {
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

iframe {
  display: inline-block;
  height: 590px;
  max-width: 100%;
  vertical-align: middle;
}

figure {
  margin: 1em 0;
}

figcaption {
  font-size: var(--font-size-small);
  margin-top: 0.5rem;
}

/*

Layout / global includes

*/

.site-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: var(--width-container);
  height: 4rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
}

.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Gradient background */
  background: #ffffff /*linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%)*/;
  
  /* Apply a fixed blur effect */
  /*backdrop-filter: blur(5px);*/
  
  /* Ensure the pseudo-element stays below the header content */
  z-index: -1;
}

.site-name {
  font-weight: 500;
  margin-bottom: 0.25rem;
  margin-right: auto;
  margin-top: 0;
  padding-right: 1rem;
  padding-left: 1rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
  padding-right: 1rem;
}

.site-nav li:not(:last-child) {
  padding-bottom: 0.25rem;
  padding-right: 1rem;
}

.site-main {
  margin-bottom: 4rem;
}

.site-footer {
  font-size: var(--font-size-medium);
  margin-top: auto;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: var(--width-container);
}

.site-footer > p {
  margin-bottom: 0;
}

/*

Homepage

*/

.home-intro {
  margin-bottom: 5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width-textcol);
}

.home-block {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 8rem;
  text-align: center;
}

.home-block > a {
  max-width: 100%;
  text-decoration: none;
}

.home-block > a:focus,
.home-block > a:hover {
  text-decoration: underline;
}

.home-block.sm > a {
  width: var(--width-media-sm);
}

.home-block.md > a {
  width: var(--width-media-md);
}

.home-block.lg > a {
  width: var(--width-media-lg);
}

.home-block.lg {
  margin-left: calc(var(--padding-container) * -1);
  margin-right: calc(var(--padding-container) * -1);
}

.home-block img:not([width]),
.home-block video:not([width]) {
  width: 100%;
}

.home-block-title {
  margin-bottom: 0;
  margin-top: 2rem;
}

/*

Page

*/

.page {
  margin-bottom: 8rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width-textcol);
}

.page-header {
  margin-bottom: 1rem;
}

.page-title {
  font-weight: inherit;
  margin: 0;
}

/*

Post

*/

.post {
  margin-bottom: 8rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width-textcol);
}

.post-header {
  margin-bottom: 1rem;
}

.post-title {
  font-weight: inherit;
  margin: 0;
}

.post-date {
  display: block;
}

/*

Project page

*/

.project {
  margin-bottom: 8rem;
}

.project-header {
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width-textcol);
}

.project-title {
  font-weight: inherit;
  margin: 0;
}

.project-details {
  margin: 0;
}

.project-text {
  margin-top: 1rem;
}

.project-block {
  margin-bottom: 6rem;
  text-align: center;
}

.project-block figure {
  margin-left: auto;
  margin-right: auto;
}

.project-block figure.sm {
  max-width: var(--width-media-sm);
}

.project-block figure.md {
  max-width: var(--width-media-md);
}

.project-block figure.lg {
  max-width: var(--width-media-lg);
  margin-left: calc(var(--padding-container) * -1);
  margin-right: calc(var(--padding-container) * -1);
}

.project-block img:not([width]),
.project-block video:not([width]) {
  width: 100%;
}

/*

Experiment page

*/

.experiment {
  margin-bottom: 8rem;
}

.experiment-header {
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width-textcol);
}

.experiment-title {
  font-weight: inherit;
  margin: 0;
}

.experiment-details {
  margin: 0;
}

.experiment-text {
  margin-top: 1rem;
}

.experiment-block {
  margin-bottom: 6rem;
  text-align: center;
}

.experiment-block figure {
  margin-left: auto;
  margin-right: auto;
}

.experiment-block figure.sm {
  max-width: var(--width-media-sm);
}

.experiment-block figure.md {
  max-width: var(--width-media-md);
}

.experiment-block figure.lg {
  max-width: var(--width-media-lg);
  margin-left: calc(var(--padding-container) * -1);
  margin-right: calc(var(--padding-container) * -1);
}

.experiment-block img:not([width]),
.experiment-block video:not([width]) {
  width: 100%;
}

/*

Contact form

*/

.contactform {
  width: 100%;
  display: block;
  margin-bottom: 1.5rem;
}

.input-clean {
  font-family: inherit;
  font-size: inherit;
  background: inherit;
  color: inherit;
  outline: none;
  border: 1px solid #000000;
  border-radius: 20px;
  padding: 1.5rem;
  width: 100%;
  margin-bottom: 1.5rem;
}

.input-clean:focus {
  outline-style: double;
  outline-width: 4px;
  outline-color: #fc0;
}

.contactsend {
  width: 100%;
  text-align: center;
}

.send {
  font-family: inherit;
  font-size: inherit;
  background: inherit;
  outline: none;
  border: none;
}

.button {
  display: inline-block;
	background: #000;
	color: #fff;
	padding: 14px 64px;
	text-decoration: none;
	border-radius: 50px;
	line-height: 1.4;
}

.insight {
	background: rgb(255, 237, 187);
	color: rgb(0, 0, 0);
	padding: 1rem;
	border-radius: 20px;
	margin-bottom: 2rem;
}

.insightgreen {
	background: rgb(187, 255, 198);
	color: rgb(0, 0, 0);
	padding: 14px 14px 14px 14px;
	border-radius: 20px;
}

.overview {
	background: rgb(255, 187, 187);
	color: rgb(0, 0, 0);
	padding: 14px 14px 14px 14px;
	border-radius: 20px;
}

.large {
  width: 100%;
  margin-left: calc(var(--padding-container) * -1);
  margin-right: calc(var(--padding-container) * -1);
}


.search {
  display: inline-block;
	background: #000;
	color: #fff;
	padding: 14px 34px;
	text-decoration: underline;
	border-radius: 50px;
	line-height: 1.4;
}


/*

Pagination

*/

.pagination {
  margin-bottom: 4rem;
  margin-top: 4rem;
  text-align: center;
}

.pagination-list {
  display: flex;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}

.pagination-list li:not(:last-child) {
  padding-right: 1em;
}

.pagination-item {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.pagination-item a:not([aria-current]) {
  text-decoration: none;
}

.pagination-item a:focus,
.pagination-item a:hover {
  text-decoration: underline;
}

.rounded-box {
  display: flex;
  border-radius: 25px;
  border: 2px solid;
  padding: 20px; 
  width: 200px;
  height: 50px; 
  align-items: center;
  justify-content: center;
  padding: .5rem 0.75rem;
}

.searchlieu {
  margin-bottom: 8rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width-textcol);
}

.searchTerm {
  width: 100%;
  border: 3px solid #000000;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #84b6bd;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #000000;
  background: #000000;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.hamburger-checkbox {
  display: none;
}

.hamburger {
  display: none;
  font-size: large;
  background: none;
  border: none;
  cursor: pointer;
  padding-right: 1rem;
  line-height: 1;
  align-items: right;
}

.hamburger .close-icon {
  display: none;
}

/* Hide the navigation menu and show the hamburger icon on mobile devices */
@media (max-width: 767px){

  body {
      padding-left: var(--padding-container);
      padding-right: var(--padding-container);
    }
    
  .site-nav ul {
    margin-top: 2rem;
    margin-right: 2rem;
    display: none;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    background-color: #bebebe;
    color: #000;
    align-items: left; /* Align items along the Y-axis */
  }

  .hamburger {
    display: block;
  }

  .hamburger .close-icon {
    display: none;
  }

  /* Show the menu when the checkbox is checked */
  .hamburger-checkbox:checked ~ ul {
    display: flex;
    flex-direction: column;
  }

  /* Hide the hamburger icon and show the close icon when the checkbox is checked */
  .hamburger-checkbox:checked ~ .hamburger .hamburger-icon {
    display: none;
  }

  .hamburger-checkbox:checked ~ .hamburger .close-icon {
    display: block;
  }

  .hamburger-checkbox:checked ~ .site-header {
    background: rgba(255, 255, 255, 1); /* Solid white background */
    backdrop-filter: blur(0); /* Remove the blur */
  }
}

/* Show the navigation menu and hide the hamburger icon on larger devices */
@media (min-width: 768px) {
  .site-nav ul {
    display: flex;
  }

  .hamburger {
    display: none;
  }
}

.game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}


#gameCanvas {
  display: block;
}

.form-group{
  margin-bottom:20px
}
.form-group:after{
  content:"";
  display:block;
  clear:both
}
@media(min-width: 40.0625em){
  .form-group{
      margin-bottom:30px
  }
}
.form-group .form-group:last-of-type{
  margin-bottom:0
}
.form-group--error{
  padding-left:15px;
  border-left:5px solid #d4351c
}
.form-group--error .form-group{
  padding:0;
  border:0
}

.form-input{
  font-size:16px;
  box-sizing:border-box;
  width:100%;
  height:40px;
  height:2.5rem;
  margin-top:0;
  padding:5px;
  border:2px solid #0b0c0c;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none
}
@media print{
  .form-input{
      font-family: 'Inter', sans-serif
  }
}
@media(min-width: 40.0625em){
  .form-input{
      font-size:19px;
      font-size:1.1875rem;
      line-height:1.3157894737
  }
}
@media print{
  .form-input{
      font-size:14pt;
      line-height:1.15
  }
}
.form-input:focus{
  outline:3px solid #fd0;
  outline-offset:0;
  box-shadow:inset 0 0 0 2px
}
.form-input:disabled{
  opacity:.5;
  color:inherit;
  background-color:rgba(0,0,0,0);
  cursor:not-allowed
}
.form-input::-webkit-outer-spin-button,.form-input::-webkit-inner-spin-button{
  margin:0;
  -webkit-appearance:none
}
.form-input[type=number]{
  -moz-appearance:textfield
}
.form-input--error{
  border-color:#d4351c
}
.form-input--error:focus{
  border-color:#0b0c0c
}
.form-input--extra-letter-spacing{
  
  letter-spacing:.05em
}
@media print{
  .form-input--extra-letter-spacing{
      font-family:sans-serif
  }
}
@supports(font-variant-numeric: tabular-nums){
  .form-input--extra-letter-spacing{
      -webkit-font-feature-settings:normal;
      font-feature-settings:normal;
      font-variant-numeric:tabular-nums
  }
}
.form-input--width-30{
  max-width:29.5em
}
.form-input--width-20{
  max-width:20.5em
}
.form-input--width-10{
  max-width:11.5em
}
.form-input--width-5{
  max-width:5.5em
}
.form-input--width-4{
  max-width:4.5em
}
.form-input--width-3{
  max-width:3.75em
}
.form-input--width-2{
  max-width:2.75em
}
.form-input__wrapper{
  display:flex
}
.form-input__wrapper .form-input{
  flex:0 1 auto
}
.form-input__wrapper .form-input:focus{
  z-index:1
}
@media(max-width: 19.99em){
  .form-input__wrapper{
      display:block
  }
  .form-input__wrapper .form-input{
      max-width:100%
  }
}
.form-input__prefix,.form-input__suffix{
  box-sizing:border-box;
  display:inline-block;
  min-width:40px;
  min-width:2.5rem;
  height:40px;
  height:2.5rem;
  padding:5px;
  border:2px solid #0b0c0c;
  background-color:#f3f2f1;
  text-align:center;
  white-space:nowrap;
  cursor:default;
  flex:0 0 auto
}
@media print{
  .form-input__prefix,.form-input__suffix{
      font-family:sans-serif
  }
}
@media(min-width: 40.0625em){
  .form-input__prefix,.form-input__suffix{
      font-size:19px;
      font-size:1.1875rem;
      line-height:1.3157894737
  }
}
@media print{
  .form-input__prefix,.form-input__suffix{
      font-size:14pt;
      line-height:1.15
  }
}
@media(max-width: 40.0525em){
  .form-input__prefix,.form-input__suffix{
      line-height:1.6
  }
}
@media(max-width: 19.99em){
  .form-input__prefix,.form-input__suffix{
      display:block;
      height:100%;
      white-space:normal
  }
}
@media(max-width: 19.99em){
  .form-input__prefix{
      border-bottom:0
  }
}
@media(min-width: 20em){
  .form-input__prefix{
      border-right:0
  }
}
@media(max-width: 19.99em){
  .form-input__suffix{
      border-top:0
  }
}
@media(min-width: 20em){
  .form-input__suffix{
      border-left:0
  }
}