:root {
  --yellow-light: hsl(56, 41%, 93%);
  --yellow-dark: rgb(255, 250, 200);
  --yellow: rgb(254, 220, 42);

  --purple-light: rgb(200, 154, 214);
  --purple: #6a4f71;

  --grey: rgb(78, 67, 67);
  --grey-light: rgb(0, 0, 0, .2);
  --white: rgb(255, 255, 255);

  color: var(--grey);
  font-size: 18px;
}



body {
  background-color: var(--yellow-light);
  margin: 0;
  font-family: 'Roboto', sans-serif;
}



#download{
  top:0px;
  z-index: 100;
  opacity: 90%;
  background-image: url(../img/telecharger-cv-pdf1.png);
  background-repeat: no-repeat;
  background-position: center;
  height: 61px;
}

header{
  opacity: 90%;
}

footer{
  background-color: var(--yellow);
}
a {
  text-decoration: none;
  color: inherit;
}

nav {
  background-color: var(--yellow);
  padding: .5em;
}

#logo {
  font-family: 'Licorice', cursive;
  font-size: 3em;
}

h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 1.9em;
}
#mentions {
  color: var(--grey);
}
#mentions h2{
  padding: 1.5em 0 0.2em 0;
}

h3 {
  font-size: 1.5em;
  margin-top: 10px;
}

.yellow-mark,
.purple-mark {
  position: relative;
  z-index: 0;
}

.purple-mark::after {
  background: var(--purple-light);
}

.yellow-mark::after {
  background: var(--yellow);
}


.yellow-mark::after,
.purple-mark::after {
  content: '';
  transform-origin: 0 0;
  transform: scaleX(1);
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  height: 40%;
  z-index: -1;
  transition: transform .3s;
}

.card1 {
  background-color: var(--white);
  padding: 15px;
  border: 1px solid var(--grey-light);
  border-radius: 7px;
  overflow: hidden;
}

.card1.yellow {
  background-color: var(--yellow-dark);
}

.card1 h3 {
  text-align: center;
  margin-bottom: 1em;
}

.card1 p {
  line-height: 1.6em;
  font-size: .9em;
  text-align: justify;
}

hr {
  background-image: url(../img/hr.png);
  height: 30px;
  border: 0;
  background-repeat: no-repeat;
  background-position: center;
  margin: 3em 0;
}

i {
  font-style: normal;
  font-size: 1.5em;
  margin-right: .5em;
}

ul {
  list-style: none;
  padding: 0;
}
p{
  margin: 0;
}
.x-half {
  font-size: .8em;
}

.x-double {
  font-size: 1.5em;
}

.x-triple {
  font-size: 2em;
}

.btn-yellow {
  background-color: var(--yellow-light);
  border: 1px solid var(--grey-light);
  padding: .3em 1.2em;
  position: relative;
  z-index: 1;
  font-size: 1.3em;
  font-weight: 400;
  cursor: pointer;
  color: var(--purple);
}

.btn-yellow::after {
  position: absolute;
  content: '';
  left: 5px;
  top: 5px;
  background-color: var(--yellow);
  border: 0px;
  height: 100%;
  width: 100%;
  z-index: -1;
}


.btn-yellow:hover::after {
  left: 0;
  top: 0;
}

#expert .card1 {
  min-height: 250px;
}

#contact {
  background-color: var(--purple);
  color: var(--white);
}

#contact h2 {
  font-weight: 100;
}

#contact textarea{
  height: 150px!important;
}
::placeholder{
  color: var(--grey-light)!important;
}