/*GENERAL*/
html{
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
body{
  background: url("../medias/background-1.jpg") no-repeat fixed center/cover;
  font-family: 'Open Sans', Arial, sans-serif;
}
#glass {
    position: absolute;
    inset: 0;
    z-index: -1;

    background: #fff3;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
@supports not ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
    #glass::before {
        content: "";
        position: absolute;
        inset: 0;

        background: url("../medias/background-1.jpg") no-repeat fixed center/cover;
        filter: contrast(0.7) brightness(1.3) blur(5px);
    }
}
h1, h2, h3, h4, h5, h6, footer, nav{
  font-family: Oswald, sans-serif;
  font-weight: lighter;
}
header, footer, #content{
  box-sizing: border-box;
  overflow: hidden;
}
@media (min-width: 769px){
  #content{
    margin: 1em auto 6em auto;
    max-width: 750px;
  }
  header,
  #content{
    border-radius: 1em;
  }
}
@media (max-width: 768px) and (min-width: 481px){
  header, footer, #content{
    width: 95%;
    margin: 0 auto;
  }
  header {
    border-radius: 1em 1em 0 0;
  }
  #content {
    border-radius: 0 0 1em 1em;
  }
}
@media (max-width: 480px){
  body{
    margin: 0;
  }
  header, footer, #content{
    width: 100%;
    margin: 0 auto;
  }
  #content{
    margin: 0;
    width: 100%;
  }
}

/*HEADER*/
header{
  background-image: url("../medias/background-header-resized.jpg");
  background-position: center;
  text-align: center;
  padding: 1em 1em 0 1em;
}
#header-element{
  display: inline-block;
  max-width: 95%;
  margin-bottom: .5em;
  margin-top: .5em;
}
#header-element a {
  transition: .2s;
}
#header-element a:hover {
  opacity: .8;
}
#header-logo{
  width: 200px;
  max-width: 95%;
}
#header-nav{
  background-color: rgba(0,0,0,0.5);
  margin: 1em -1em 0 -1em;
  padding: 4px 0;
}

/*FOOTER*/
footer{
  padding: 10px;
  text-align: center;
  color: #ddd;
  font-size: 75%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 1em auto;
}

/*LINKS*/
a{
  text-decoration: none;
}
nav a, #copyright a{
  color: #ddd;
  transition: .2s;
}
#header-nav a {
    color: #fff;
}
nav a{
  padding: 5px;
}
nav a:hover, #copyright a:hover{
  opacity: .7;
}
.legalNotice a{
  color: black;
  font-weight: bold;
}

/*CONTENT*/
#content{
  background-color: rgba(255,255,255,0.75);
  padding:10px;
  text-align: center;
  margin-bottom: 6em;
  position: relative;
}
.separator{
  margin: 20px auto;
  width: 40%;
  max-width: 300px;
}
#page-titles{
  font-size: 150%;
  margin: 1em 0 .5em 1em;
  text-align: left;
}
#page-title{
  margin: 0;
}
#page-subtitle{
  margin: 0;
  color: #555;
  font-size: 85%;
}