div#contact{
    display: grid;
    border: #fea680 solid;
    width: 60%;
    margin: auto;
    padding: 20px;;
    grid-template-columns: 60% 40%;
    border-radius: 25px;
    align-items: center;
    box-shadow: 10px 10px 30px #ebcbe7;
    font-size: 1.3rem;
}

div#motivation{
    display: flex;
    border: #fea680 solid;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 25px;
    align-items: center;
    box-shadow: 10px 10px 30px #ebcbe7;
    font-size: 1.3rem;
    flex-direction: column;
    max-height: 500px;
}

div.lettre{
    overflow: scroll;
    width: 70%;
    display: flex;
    justify-content: center;
}

form{
    display: flex;
    flex-direction: column;
    padding: 20px;
    grid-row: 1;
    grid-column: 1;
    align-items: center;
}

main{
    padding-top: 20px;
    overflow: hidden;
}

canvas{
    min-height: 4000px;
}

figure{
    margin: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
main h2:first-of-type{
    font-size: 1.7rem;
}

audio{
    width: 90%;
    padding: 5px;
    max-width: 330px;
}

#ecrit{
    text-decoration: underline;
}

#ecrit:hover{
    cursor: pointer;
}

label {
    margin-bottom: 25px;
}

button[type=submit]{
    border: 2px outset #b1abf4;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.8em;
    padding: 0.2em;
    margin: 0 0.5em;
    cursor: pointer;
    width: 10em;
    height: 3em;
    margin-top: 20px;
}

button[type=submit]:hover{
    filter: brightness(120%);
}

#contact > img{
    grid-row: 1;
    grid-column: 2;
    width: 100%;
}

#contact div{
    grid-row: 1;
    grid-column: 2;
    width: 50%;
}

#contact div img{
    width: 100%;
}

textarea{
    max-width: 100%;
}

:root {
  --bg-color-highlight: hsl(60, 90%, 50%);
  --color-text: hsl(192, 14%, 20%);
  --paragraph-font-size: 1.3rem;
  --duration: 1s;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}


pre {
  text-wrap: wrap;
  font-family: baskerville old face;
  width: 90%;
  text-align: justify;
}

.text-highlight {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(
    var(--bg-color-highlight),
    var(--bg-color-highlight)
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size var(--duration) var(--ease);
}

.text-highlight.active {
  background-size: 100% 100%;
}

.hide{
    display: none;
}