@font-face {font-family: 'PX Sans'; src: url('/assets/px_sans_nouveaux.woff');}

:root{
    --black: #000010;
    --white: #FFFBE6;
    --midblue: #638088;
    --lightblue: #A9BDC5;
    --lowblue: #294656;
    --yellow: #FFE229;
    --select: #849CFF;
}

body {
    font-family: 'PX Sans';
    background-color: var(--black);
    color: var(--white);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

a { text-decoration: none; }


.Title {color: var(--yellow);}

.AlignCenter { text-align: center; }

.Main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 15%;
}

ul.Bar {
    list-style-type: none;
    width: 75%;
    margin: 0;
    padding: 0 2vh;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: var(--midblue);
}

li.Item {padding: 1vh 0;}
.Item a {padding: 1vh 25px; color: var(--white);}
.Item a:hover {background-color: var(--lowblue);}

.Selected a {background-color: var(--lowblue) !important;}

#Logo {
    padding: 2.5% 0;
    width: 100%;
    height: auto;
    max-width: 100%;
}

#Download {
    display: flex;
    flex-direction: column;
    margin-top: 5%;
    align-items: center;
}

#Download a, #Link {color: var(--select);}
#Download a:hover, #Link:hover {text-decoration: underline dotted;}

#Question {color:var(--yellow); font-weight: normal; margin-top: 50px; text-align: center;}

.Flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.Lang-Container{
    position: absolute;
    top: 2%;
    right: 2%;
    left: 90%;
    display: flex;
}

.Lang {
    cursor: pointer;
    text-decoration: none;
}

.Lang img {width:100%; height: auto;}


.DoubleContainer {display:flex; flex-wrap: wrap; justify-content: center; flex-direction: column; width: 100%;}

.collapsible {
  background-color: var(--midblue);
  color: var(--white);
  cursor: pointer;
  padding: 25px;
  width: 100%;
  border: none;
  outline: none;
  font-family: 'PX Sans';
}

.collapsible:hover {background: var(--lowblue);}

.content {
  padding: 0 25px;
  display: none;
  overflow: hidden;
  background-color: var(--lowblue);
  font-size: small;
  text-align: center;
}


.BtnContainer {padding: 5px;}


@media only screen and (max-width: 768px){
    iframe{width:70%;}
}


footer {
    display: block;
    padding: 1vh;
    background-color: var(--midblue);
    text-align: center;
}