body.preload * {
  transition: none !important;
}

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

/*Set variables*/
:root{
  color-scheme: dark;
  --primary: rgb(55 55 165);
  --secondary: rgb(230 230 230);
  --tertiary: rgb(50 50 50);
  --contrast: rgb(255 122 0);
  --background-primary: #001f3f;
  --background-contrast: #ff5733; 
  --left-margin: 3vw;
  --right-margin: 3vw;
  --section-border-radius: 20px;
}

html{
  scroll-behavior: smooth;
  padding: 0px;
  min-height: 100%;
  min-width: 100%;
  background: radial-gradient(ellipse 100% 80% at 130% 50%, var(--background-contrast), transparent),
              radial-gradient(circle at 20% 20%, var(--background-primary), transparent),
              linear-gradient(to bottom, var(--background-primary), var(--tertiary));
}

/*fonts*/
@font-face{
  font-family: Raleway;
  src: local("Raleway"),
       url("fonts/Raleway-VariableFont_wght.woff2"),
       url("fonts/Raleway-VariableFont_wght.ttf");
  font-display:swap;
}

@font-face{
  font-family: Raleway;
  src: local("Raleway"),
       url("fonts/Raleway-Italic-VariableFont_wght.woff2"),
       url("fonts/Raleway-Italic-VariableFont_wght.ttf");
  font-style:italic;
  font-display:swap;
}

.banner{
  background-color:#222;
  text-align:center;
  font-size:1rem;
  &::before,&::after{
    content:"●";
    color:var(--contrast);
  }
  &:hover{
    scale:1.1;
  }
}

/*General styling*/
body{
  padding: 12px;
  padding: env(safe-area-inset-top)
           env(safe-area-inset-right) 
           env(safe-area-inset-bottom)
           env(safe-area-inset-left);
  font-family: Raleway, sans-serif;
  color: var(--secondary);
  min-height: max-content;
  margin:0;
  font-size: 1em;
  font-weight:400;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  align-items:center;
  & p,li,details{
  line-height:1.5;
  }
}

/*Heading styles*/
h1 {
  color: var(--secondary);
  font-size:2em;
  font-weight:400;
}

h2{
  font-weight:300;
  &:has( + h3){
    margin-bottom:0;
  }
  & ~ h3{
    margin-top:0;
  }
}

h1:has(+h2){
  margin-bottom:0;
  &+h2{
    margin-top:0;
  }
}

h3{
  font-weight:300;
  font-style:italic;
}

main{
  min-height: 30vh;
  height: max-content;
  flex-grow:1;
  width:100%;
  & > * {
    padding: 0 var(--right-margin) 0 var(--left-margin);
  }
}

a{
  color:var(--contrast);
}

a[href*="//"]:after{
  content: url("data:image/svg+xml,%3Csvg height='8' width='8' viewport='0 0 5 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 5 L 5 0 H 0 M 5 0 V 5' stroke='rgb(230 230 230)' stroke-width='1px' fill='none'/%3E%3C/svg%3E");
  color:var(--secondary);
}

u{
  text-decoration-color:var(--contrast);
}

::selection{
  color:var(--secondary);
  background-color:var(--contrast);
}

#hero{
  position:relative;
  height:90vh;
  height:90svh;
  border-bottom:2px solid var(--contrast);
  & > #hero-text{
    position:absolute;
    top:10%;
    float:right;
    & > h1{
    font-size:3rem;
    }
  }
  & > #hero-picture{
    position:absolute;
    bottom:0;
    z-index:-1;
    & > img{
    padding:0;
    margin:0;
    width:97vw;
    height:auto;
    }
  }
}

em {
	font-family: serif;
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cpath d="M 5 90 Q 75 75 95 90" stroke="%23ff7b00" stroke-width="10px" fill="none" /%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

abbr{
  text-decoration:none !important;
}

.technology{
  display:flex;
  flex-flow:row wrap;
  flex-basis:auto;
  justify-content:center;
  align-items:center;
  &:not(:last-child){
    border-bottom:1px solid var(--contrast);
  }
  &> div.lnp > picture > img{
    max-width:100%;
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    &:hover{
      transform:scale(1.1);
    }
  }
  & > *{
    margin:min(2vw, 10px);
  }
  &#nanoguide{
    flex-wrap:wrap-reverse;
  }
}

@media (min-width: 1000px){
  .technology-text{
    max-width:calc(min(86vw,85ch) - 400px);
  }
}

#call-to-action{
  &>.button{
    width:max-content;
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
  border: 2px solid var(--contrast);
}

.button{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:inline-block;
  margin:3vw;
  padding:1%;
  text-decoration:none;
  font-size:1.5em;
  font-weight:100;
  background-color:#22222288;
  color:var(--secondary);
  border-radius:10px;
  border:1px solid var(--contrast);
  cursor:pointer;
  &:active{
    transform:scale(0.95);
  }
  &:hover{
  background-color:var(--tertiary);
  }
}

#contact-form{
  display:flex;
  flex-flow:column nowrap;
  margin:0 min(20px,10vw) 10vh min(20px,10vw);
  padding:20px;
  border-radius: var(--section-border-radius);
  border:2px solid var(--contrast);
  background-color:color-mix(in srgb,var(--background-primary) 50%, transparent);
  &>label{
    display:block;
    margin-top:1.5rem;
  }
  &>textarea{
    height:5rem;
  }
  &>input,textarea,select,select>option{
    appearance:none;
    min-height:1.5rem;
    border-radius:5px;
    border-color:transparent;
    color:var(--secondary);
    background-color:var(--tertiary);
    max-width:100%;
    font-weight:200;
    font-family:Raleway;
  }
  &>select{
    cursor:pointer;
  }
  &>input[type="checkbox"],label[for="input-policy"]{
    display:inline-box;
  }
  &>#checkbox-container{
    margin-top:20px;
  }
  &>input[type="submit"]{
    display:block;
    margin-left:auto;
    margin-right:auto;
    font-size:1.2rem;
    margin-top:20px;
    border: 2px solid var(--contrast);
    border-radius:5px;
    width:min-content;
    font-family: Raleway, sans-serif;
    font-size: 1em;
    font-weight:200;
    color:var(--secondary);
    background-color:var(--tertiary);
    &:active{
      transform:scale(0.9);
    }
  }
  &>.cf-turnstile{
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
  }
}

section:not(#hero){
  margin:5vh min(20px,10vw) 5vh min(20px,10vw);
  border-radius: var(--section-border-radius);
  background-color:#222;
  padding-top:1rem;
  padding-bottom:1rem;
  max-width:90ch;
}

@media (min-width: calc(900px + 10vw)) {
  section:not(#hero) {
    margin-left: auto;
    margin-right: auto;
  }
}

#missions-container{
  padding:0;
  &>section{
    padding: 10px var(--right-margin) 10px var(--left-margin);
  }
}

#faqs-container{
  & > details{
    cursor:pointer;
    &[open]{
      background-color:#333333;
      border-radius:var(--section-border-radius);
      border:2px solid var(--contrast);
      padding:10px;
      margin:10px;
      & summary{
        font-size:1.2em;
      }
    }
  }
  & > details[open] > p{
    padding:0 10px 0 10px;
    cursor:default;
  }
  
}

/* Not used */
/*
div.lnp{
  width:30vw;
  min-width:200px;
  height:30vw;
  min-height:200px;
  margin:auto;
  padding:10px;
  border-radius:9999px;
  max-width:300px;
  max-height:300px;
  &:nth-of-type(1){
    background-image:radial-gradient(circle at center, #222 0, #222 59%, var(--contrast) 100%);
    box-shadow: 0 0 5vw rgb(255 122 0);
  }
  &:nth-of-type(2){
    background-image:radial-gradient(circle at center, #222 0, #222 59%, var(--primary) 100%);
    box-shadow: 0 0 5vw var(--primary);
  }
}
*/

div.img-banner{
  max-width:90ch;
  width:calc(100% + 2*var(--left-margin));
  margin:0;
  margin-left: calc(-2*var(--left-margin));
  margin-right: calc(-2*var(--left-margin));
  & > picture > img{
    transition:0s linear;
    max-width:90ch;
    width:100%;
    max-height:56.25vw;
  }
}

dialog{
  border:2px solid var(--contrast);
  border-radius: var(--section-border-radius);
  background-color:color-mix(in srgb,var(--background-primary) 50%, transparent);
  color:var(--secondary);
  &::backdrop{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
}

footer{
  background-color:#222222;
  min-height: 5vh;
  display: block;
  color: var(--secondary);
  width: 100vw;
  font-size: 0.5rem;
  text-align:center;
}

body.loaded * {
  transition:0.2s ease;
}

/* Animations */
@media (prefers-reduced-motion: reduce) {
  transition:0.01ms;
}

.fade-in {
  animation: fade-in 0.25s ease;
  animation-play-state: paused;
}

.animated {
  animation-play-state: running !important;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}