:root {
  --yellow: #fff01f;
  --fontSize: 11pt;
}

html[lang=fr] [lang=en],
html[lang=en] [lang=fr] {
    display: none !important;
}

div.language{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 36px;
    height: 36px;
    background-position: center; /* Center the image */
    background-size: 100%; /* Resize the background image to cover the entire container */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-color: transparent;
    margin: .5em;
}
div.language[lang=fr]{
    background-image: url('/static/icons/en.png');
}
div.language[lang=en]{
    background-image: url('/static/icons/fr.png');
}

body{
    background-image: url('/static/images/nordic.jpg');
    background-color: white;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
    min-height: 100vh;
    height: 100vh;
    display: block;
    padding: 0;
    margin: 0;
    color: white;
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

div, span, p, input, label, a, h1, h2 {
    font-family: DejaVu Sans Mono, monospace;
}

div.content{
    position: absolute;
    display: block;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid white;
    background-color: rgba(255, 255, 255, 0.2);
    min-width: fit-content;
    max-width: 75%;
    height: fit-content;
    padding: 1em;
    text-align: center;
}
div#errorMsg {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0 .5em;
    color: rgb(255, 3, 3);
    font-weight: bold;
}

a.link{
    position: relative;
    display: block;
    color: #fff;
    border: 0px solid #fff;
    padding: 0;
    margin: 1em 0;
    width: fit-content;
    font-style: normal;
    font-weight: bold;
    font-size: var(--fontSize);
    left: 50%;
    transform: translate(-50%, 0);
}
a.link:hover{
    color: var(--yellow);
    font-weight: bold;
}

a.demo{
    position: absolute;
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    margin: 1em;
    width: fit-content;
    font-style: italic;
    transform: none;
}

h1, h2{
    position: relative;
    display: block;
    float: left;
    margin: 40px;
    padding: 0;
    width: calc(100% - 80px);
    border: 0px solid red;
}
h2{
    font-size: 14pt;
    font-weight: normal;
}

div.official {
    display:none;
}

div.custom {
    text-align: center;
}

input{
    background-color: #ffffffb3;
    color: #333;
    margin: 5px 5px;
    text-align: center;
    padding: 5px 0;
    border: 0px solid #000;
    width: 300px;
    font-size: var(--fontSize);
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus{
    background-color: #333;
    color: white;
}

input[type=submit]{
    font-weight: bold;
    border: 0px solid #fff;
}
input[type=submit]:hover{
    background-color: var(--yellow);
}