@font-face {
  font-family: "body-font";
  src: url("../static/fonts/Neuton-Regular.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "title-font";
  src: url("../static/fonts/Basteleur-Bold.ttf") format("truetype");
  font-weight: 900;
}
@font-face {
  font-family: "title-font";
  src: url("../static/fonts/Basteleur-Moonlight.ttf") format("truetype");
  font-weight: 400;
}

:root {
  --main: #25334f;
  --light: #e2e6ee;
  --accent: #2153c9;
  --bg: #dad2d2;
  --black: #292929;
  --width-mode: auto;
  --border-style: thin solid var(--main);
  --radius-amount: 1px;
}

div.line {
  /* yikes */
  border-top: thin solid var(--black);
  color: var(--main);
  box-sizing: border-box;
}

/*
MAIN STUFF
*/

body {
  margin: 0% 25%;
  background-color: var(--bg);
}

p,
label,
a,
li {
  font-family: "body-font";
  font-size: 1.25em;
  line-height: 1.5em;
  color: var(--black);
  margin: 0;
}
div.ingredients-div,
div.infos-div,
div.instructions-div,
ol {
  margin-top: -1px;
  margin-left: -1px;
  max-width: 100%;
  border: var(--border-style);
  border-radius: var(--radius-amount);
}

ol div,
div div {
  margin: 0;
}

div.recette-header {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-evenly;
}

div.recette-header div {
  padding: 0.25em 0.75em;
}
div.instructions-div > p {
  padding: 0.5em 1em;
}

h2,
h3,
h4 {
  color: var(--black);
  font-family: "title-font";
  text-decoration: none;
  line-height: 1.25em;
  margin: 0;
}
h2 {
  font-size: 2.75em;
  padding: 0.5em 1em;
}

h3 {
  font-size: 1.75em;
  padding: 0.5em 1em;
}
h4 {
  font-size: 1.5em;
  padding: 0.25em 0.75em;
}

ol.recettes-list {
  width: 100%;
  padding: 0em;
  counter-reset: item;
  list-style-type: none;
}

ol.recettes-list li {
  display: block;
  font-family: "body-font";
  padding: 0.25em 1em;
}

ol.recettes-list li:before {
  font-family: "title-font";
  content: counter(item, decimal);
  position: relative;
  padding-right: 0.5em;

  text-align: right;
  display: inline-block;
  white-space: nowrap;
  counter-increment: item;
  font-weight: 400;
  font-size: 0.75em;
  color: var(--accent);
}

a.recette-elem {
  color: var(--main);
  font-size: 1.5em;
  transition: 0.1s;
  text-decoration: none;
}
a.recette-elem:visited {
  color: var(--main);
}

a.recette-elem:after {
  content: " ✹";
  color: var(--accent);
  font-size: 0.75em;
  font-weight: 400;
  opacity: 0;
  transition: 0.3s opacity;
}
a.recette-elem:hover:after {
  opacity: 1;
}

a.recette-elem:hover {
  color: var(--accent);
}

/* NAVBAR */

nav {
  display: flex;
  flex-wrap: wrap;
}
nav > a {
  padding: 0em;
  border: var(--border-style);
  border-radius: var(--radius-amount);
  transition: 0.1s background-color, 0.3s color;
  flex-grow: 1;
  margin-top: -1px;
  margin-left: -1px;
  text-decoration: none;
  padding: 0.25em;
  text-align: center;
}

nav > a:visited {
  color: var(--black);
}
nav > a:hover {
  background-color: var(--black);
  color: var(--bg);
}

/*
BANDEROLLE ET TOUT 
*/

div.main-title {
  background-color: var(--black);
  background-image: url("../static/svg/creuset_web_blue.svg"),
    url("../static/svg/creuset_web_red.svg");
  padding: 0em;
  font-size: 3.5em;
  background-size: 0em, 8em;
  background-repeat: no-repeat;
  background-position: 70% -5%, 70% -5%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-items: center;
  align-items: center;
  justify-content: space-evenly;
  height: 3em;
  width: 100%;
  transition: background-color 1s, background-size 0.3s,
    background-position 0.2s;
}

div.main-title > h1 > a {
  font-family: "title-font";
  color: var(--light);
  text-shadow: 2px 2px 1px var(--black);
  text-decoration: none;
  font-size: 0.5em;
  line-height: 1em;
  transition: text-shadow 0.4s;
}
div.main-title > h1 > a:hover {
  text-shadow: 3px 3px 5px var(--black);
}

div.main-title > h1,
div.main-title > h2 {
  width: fit-content;
  height: fit-content;
  line-height: 0;
}

div.main-title:hover {
  background-size: 8em, 50em;
  background-color: var(--accent);
  background-position: 70% -5%, 100% 0%;
}

/*
SUBTITLE
*
*/

.section > a:after {
  content: " §";
  color: var(--accent);
  font-size: 0.75em;
  font-weight: 400;
  opacity: 0;
  transition: 0.3s opacity;
}
.section > a:hover:after {
  opacity: 1;
}

.section > a {
  font-size: 1em;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
}

p.section-end {
  width: 100%;
  text-align: center;
  font-family: "title-font";
  font-size: 1.5em;
  font-weight: bold;
  padding: 0.5em 0 em;
}

p.section-end > span {
  transition: 0.3s color;
}

p.section-end > span:hover {
  color: var(--accent);
}

/* INFO &
 * INGREDIENT LISt
*/

div.infobox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: var(--width-mode);
  padding: 0.1em 0.1em;
}

div.infobox > p {
  padding: 0em 0.5em;
}

div.ingredients-div,
div.infos-div {
  width: var(--width-mode);
  height: var(--width-mode);
  flex-grow: 1;
}

.emoji-span {
  padding: 0em 0.5em;
}
.emoji-span>svg{
  width: 1.5em;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  
}
.emoji-span>svg *{
  transform: 1s;
  stroke-width: .15em;
}
.emoji-span>svg:hover *{
  stroke-width: .12em;
  stroke: var(--accent);
  animation: dash 10s linear forwards;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

fieldset {
  border: none;
  color: var(--black);
  font-family: "body-font";
  display: flex;
  flex-direction: column;
  width: var(--width-mode);
  padding: 0;
}

fieldset > div {
  /* border: none; */
  padding: 0.25em;
}

fieldset > div.ing-checkbox > label {
  width: max-content;
}

fieldset > div.ing-checkbox > label:hover {
  color: var(--accent);
}

input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
  margin: 0.5em;

  filter: saturate(0%);
}

input:checked + label {
  text-decoration: line-through 1px var(--black);
  text-decoration-style: solid;
  color: var(--accent);
}

/*
MISC
*/

footer {
  text-align: center;
  width: 100%;
}

footer > p,
footer > a {
  font-size: 1em;
  font-family: "body-font";
}

footer > a {
  text-decoration: none;
}

img.footer-creuset {
  margin: 1em;
  transition: 0.5s;
}

img.footer-creuset:hover {
  transform: scale(1.1);
  filter: hue-rotate(180deg);
}

/* Little span */

span#n-recettes {
  position: relative;
}
span#n-recettes > p {
  font-family: "body-font";
  color: var(--light);
  font-size: 0.5em;
  transform-origin: center;
  animation: pulse 0.66s alternate-reverse 0s infinite ease-in-out;
  z-index: 1000;
  text-align: center;
}

span.bast {
  font-family: "title-font";
  font-weight: bold;
  margin: 0;
  padding: 0;
  font-size: 1.25em;
}

@keyframes pulse {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.21) rotate(4deg);
  }
}

div.hasard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  justify-content: center;
}
div.hasard > p,
div.hasard > a {
  padding: 0.25em;
}