@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');

:root {
  --text: #000;
  --text-color-light: white;
  --framboise: #F05950;
  --sapin: #047101;
  --police-main: 'Mountains of Christmas', serif;
  --font-text: 'Open Sans', sans-serif;
  
  --color-background-01: #005bea;
  --color-background-02: #00c6fb;
  --color-background-03: #FFCD4B;
  --color-background-04: #FF7676;
  --color-background-05: #ef303a;
  --color-background-dark: #333333;
  --color-background-light: #FFF;
  
  --color-mark-01:#6a11cb;
  --color-mark-02:#0075fc;
  
  --button-color-grey: #888;
  --button-color-greylight: #999;
}

* {
  box-sizing: border-box;
}

html, body {
    width: 100vw;
    height: 100%;
    margin:0;
    padding:0;
    font-size: 1em;
    overflow-x: hidden;
}

html {
    height: fit-content;
    margin: 0;
    padding: 0;
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    font-family: var(--police-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

header, main, article, aside, figcaption, figure, footer, hgroup, main, menu, nav, section, button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 0;
  
}

main {
  -webkit-overflow-scrolling: touch;
  margin-top: 2em;
}

header { 
  margin-top: 2em;
  width: 80vw;
}

.title { 
  width: 50%;
}

section {
  width: 100%;
  padding: 2em;
  }

section:last-child {
  padding-bottom: 10em;
  }
  
section:last-child h2{
  margin-top: 2em;
  }

section img {
    width: 4em;
    margin-top: 5em;
    margin-bottom: 3em;
  }

.participer {
  color: var(--text);
}

section {
  width: 100%;
  padding: 2em;
  }

section:last-child {
  padding-bottom: 10em;
  }
  
section:last-child h2{
  margin-top: 2em;
  }

section img {
    width: 4em;
    margin-top: 5em;
    margin-bottom: 3em;
  }

.gradient01 {
  background-image: linear-gradient(to top, var(--color-background-01) 0%, var(--color-background-02) 100%);
  }
  
.gradient02 {
  background-image: linear-gradient(to bottom, var(--color-background-03) 0%, var(--color-background-04) 100%);
  }
  
.gradient03 {
  background-image: linear-gradient(to bottom, var(--color-background-04) 0%, var(--color-background-05) 100%);
  }
  
.gradient04 {
  background-image: linear-gradient(to bottom, var(--color-background-05) 0%, var(--color-background-03) 100%);
  }
  
.gradient05 {
  background-image: linear-gradient(to right, var(--color-mark-01) 0%, var(--color-mark-02) 100%);
  }

.gradient06 {
  background-image: linear-gradient(to right, var(--color-background-03) 0%, var(--color-background-04) 100%);
  }
  
mark {
  padding-left: .2em;
  padding-right: .2em;
  border-radius: .3em;
  }
  
h2 mark a {
     color: var(--text-color-dark);
     text-decoration: none;
     transition: transform .5s ease; /* Animation */
   }

h2 mark a:hover {
      color: var(--text-color-dark);
      text-decoration: underline;
      transform: none;
    }

h1 {
  font-size: calc(2em + 8vw);
  color: var(--text-color-dark);
}

h2 {
  font-size: 2.5em;
  font-family: var(--font-text);
  font-weight: 200;
  color: var(--text-color-dark);
}

h3 {
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 2.2em;
  font-weight: 200;
  font-family: var(--font-text);
  color: var(--text-color-dark);
}

article {
  width: 80%;
  padding: 2em;
  margin-top: 2em;
  text-align: left;
  font-weight: 200;
  border: 5px solid #333;
  border-radius: 25px;
}

article p{
  padding-left: 1em;
  margin-bottom: 1em;
  font-size: 2em;
  font-family: var(--font-text);
  color: var(--text-color-light);
}

.quote{
  text-align: center;
  font-size: 2em;
}

.italic{
  font-style: italic;
}

article a{
  color: var(--text-color-light);
}

article p a:hover {
   transform: none;
 }
 
article i{
  padding-right: 1em;
}

a img {
  display: inline-block;
  width: 60vw;
  max-width: 25em;
  margin: 2em;
}

article ul {
  display: block;
  margin:0;
  margin-bottom:1em;
  padding:0;
  font-family: var(--font-text);
  text-align: center;
  }

article li {
   list-style: none;
   margin:0;
   padding:0;
   font-size: 2em;
   line-height: 2em;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
  }

article li i {
  font-size: .3em;
  vertical-align: text-top;
  }

article li a {
    color: var(--text-color-light);
    text-decoration: none;
   }
  
article li a:hover {
    text-decoration: underline;
    transform: none;
   }

button {
  background: transparent;
  border: none;
 }
 
.certificson {
    width: 100%;
  }
  
.certificson img{
    width: 15vw;
    min-width: 25em;
  }
  
.certificson h1{
    font-size: calc(2em + 3vw);
  }
  
.certificson article{
    margin-bottom: 10em;
  }

.top {
  padding-top: 5em;
}
  
.formulaire {
  display: flex;
  justify-content: center;
  }
  
  form {
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  }
  
  input[type="text"],
  input[type="email"],
  textarea {
  font-family: var(--font-text);
  width: 50vw;
  padding: .3em;
  border-radius: .5em;
  box-shadow: none;
  margin-bottom: 10px;
  font-size: 2em;
  }
  
  form label {
  text-align: center;
  padding: 1em;
  font-size: 2em;
  }
  
  input[type="submit"] {
  font-family: var(--font-titles);
  color: var(--text-color-light) !important;
  text-align: center;
  display: block;
  cursor: pointer;
  font-size: 2em;
  outline: 2px solid var(--text-color-grey);
  border-radius: 2em;
  padding: .5em;
  background-image: linear-gradient(to right, var(--color-mark-01) 0%, var(--color-mark-02) 100%);
  }
  
  input[type="submit"]:hover {
  background-image: linear-gradient(to right, var(--color-mark-01) 0%, var(--color-mark-02) 80%);
  }


footer {
height: fit-content;
padding: 2em;
font-size: 2em;
line-height: 2em;
text-align: center;
vertical-align: middle;
color: var(--text);
background-color: #9CD485;
}

.guirlande {
    position: absolute;
    left:0;
    margin-top:-3.6em;
    width:100vw;
    height:calc(2.5em + 3vw);
    background-image: url(images/guirlande.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.titre {
  font-size: 3em;
  padding: .5em;
  padding-top: 1em;
}

footer p.auteurs a {
  font-family: var(--police-main);
}

footer p.credits {
  font-size: .8em;
}

footer a {
  color: #FDFCEA;
  text-decoration: none;
  transition:color 1s;
}

footer a:hover {
  color: var(--sapin);
  text-decoration: none;
  transition: 1s;
}

.ficson img {
  margin-top: 1em;
  width: 5em;
}

footer img:hover {
  animation: zoom-medium .5s 1;
}


@media (max-width: 1024px) {
  
  header {
    width: 100vw;
    margin-top: 3em;
  }
  
  .title { 
    width: 100%;
  }
  
  section {
  padding: .8em;
  }
  
  article {
     width: 100%;
     text-align: center;
   }
   
   article p{
     padding-left: 0;
   }

   .synopsis {
     width: 100vw;
     font-size: 2em;
   }
   
  .plateformes {
    width: 100vw;
    font-size: 1.5em;
  }
  
  .plateformes ul {
    width: 100%;
  }
  
  .titre {
    font-size: 2em;
  }
  
  footer {
  padding-left: .5em;
  padding-right: .5em;
  padding-top: 2em;
  padding-bottom: 1em;
  font-size: 2em;
  }

  .ficson img {
    width: 4em;
  }
  
  footer p.credits {
    font-size: 1em;
  }
  
  input[type="text"],
   input[type="email"],
   textarea {
   width: 100%;
   }

}