:root
{
  --backgroundA:hsla(var(--globalSiteHue), 50%, 90%,  80%);
  --backgroundB:hsla(var(--globalSiteHue), 0%, 100%, 80%);
  --submitBtnColor:hsla(var(--globalSiteHue), 50%, 50%,  100%);
}

html {
  scroll-behavior: smooth;
}


body
{
  background-image: url('../images/accueil.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; 
  background-attachment: fixed;
}


.frontpage h1
{
  font-size: min(6vw, 2.5em);
}

.frontpage .row 
{
  height: calc(100vh); 
  margin: auto;
  padding-top: 10vh;
  padding-bottom: 20vh;
}


.frontpage img
{
  width: 30vw;
  max-width: 15em;
  padding-bottom: 2em;
}

.whitePageA
{
  background-color: var(--backgroundA);
  width: 100%;
  padding: 0% min(10%, 8em);
}

.whitePageB
{
  background-color: var(--backgroundB);
  width: 100%;
  padding: 0% min(10%, 8em);
}

.site-section 
{
  padding: 3em 0; 
}

@media (min-width: 768px) 
{
  .site-section 
  {
    padding: 7em 0; 
  } 
}

#WhoAreWe img
{
  width: 100%;
  max-width: 30vw;
  display: block;
  margin: 2em auto;
}


#Houses img
{
  margin-bottom: 1em;
}

#Houses h3
{
  font-size: 1.5em;
  text-align: center;
}

#Houses p
{
  padding: 0% 10%;
  text-align: justify;
  margin-bottom: 5em;
}

#Houses a
{
  color: black;
}


/* Livre d'or */

#Comments .name
{
  font-size: 1.5em;
}

#Comments .date
{
  font-size: .9em;
  font-style: italic;
}

#Comments .content
{
  font-size: 1em;
  padding-top: 1em;
}

#Comments .comment
{
  padding: 2em;
  margin: 0.5em;
  border-radius: 0.5em;
}