style.css

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Shrikhand&display=swap");
@keyframes apparition {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*Propriétés générales du site*/
* {
  text-decoration: none;
  font-family: "Roboto";
}

a {
  color: black;
  animation: apparition 4s;
}

body {
  margin: 0px;
}

main {
  position: relative;
  margin: 0px;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  max-width: 760px;
  margin: auto;
}

h3 {
  margin: 1.7em 0em 0.8em 0.7em;
  font-size: 25px;
  font-weight: bold;
  animation: apparition 1s;
}

/*Loader*/
@keyframes loader {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pacman {
  100% {
    transform: translateX(320px);
  }
}
@keyframes backgroundcolor {
  0% {
    box-shadow: 0px 0px 10px 10px black;
    background: linear-gradient(0deg, #FF79DA, #9356DC);
  }
  5% {
    background: linear-gradient(17deg, #9356DC, #99E2D0);
  }
  10% {
    background: linear-gradient(30deg, #99E2D0, #9356DC);
  }
  15% {
    background: linear-gradient(47deg, #9356DC, #FF79DA);
  }
  20% {
    background: linear-gradient(64deg, #FF79DA, #99E2D0);
  }
  25% {
    box-shadow: 0px 0px 10px 10px gray;
    background: linear-gradient(81deg, #FF79DA, #9356DC);
  }
  30% {
    background: linear-gradient(96deg, #9356DC, #99E2D0);
  }
  35% {
    background: linear-gradient(113deg, #99E2D0, #9356DC);
  }
  40% {
    background: linear-gradient(120deg, #9356DC, #FF79DA);
  }
  45% {
    background: linear-gradient(137deg, #FF79DA, #99E2D0);
  }
  50% {
    box-shadow: 0px 0px 10px 10px black;
    background: linear-gradient(154deg, #FF79DA, #9356DC);
  }
  55% {
    background: linear-gradient(171deg, #9356DC, #99E2D0);
  }
  60% {
    background: linear-gradient(188deg, #99E2D0, #9356DC);
  }
  65% {
    background: linear-gradient(205deg, #9356DC, #FF79DA);
  }
  70% {
    background: linear-gradient(222deg, #FF79DA, #99E2D0);
  }
  75% {
    box-shadow: 0px 0px 10px 10px gray;
    background: linear-gradient(239deg, #FF79DA, #9356DC);
  }
  80% {
    background: linear-gradient(256deg, #9356DC, #99E2D0);
  }
  85% {
    background: linear-gradient(273deg, #99E2D0, #9356DC);
  }
  90% {
    background: linear-gradient(290deg, #9356DC, #FF79DA);
  }
  95% {
    background: linear-gradient(307deg, #FF79DA, #99E2D0);
  }
  100% {
    box-shadow: 0px 0px 10px 10px black;
    background: linear-gradient(324deg, #FF79DA, #9356DC);
  }
}
@keyframes letter {
  10% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes letter_color {
  0% {
    transform: scale(1);
    color: white;
    transform: translateY(0px);
  }
  10% {
    color: #9356DC;
    transform: translateY(-5px);
  }
  20% {
    transform: translateY(5px);
    color: white;
  }
  30% {
    color: #9356DC;
    transform: translateY(-5px);
  }
  40% {
    transform: translateY(5px);
    color: white;
  }
  50% {
    color: #9356DC;
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(5px);
    color: white;
  }
  70% {
    color: #9356DC;
    transform: translateY(-5px);
  }
  80% {
    transform: translateY(5px);
    color: white;
  }
  90% {
    color: #9356DC;
    transform: translateY(-5px);
  }
  100% {
    color: white;
    transform: translateY(5px);
  }
}
.anim_pacman {
  display: flex;
  align-items: center;
}

.loader {
  overflow: hidden;
  margin-top: -10px;
  padding-top: 25em;
  display: flex;
  justify-content: center;
  align-items: baseline;
  position: absolute;
  background-color: rgba(114, 114, 114, 0.7);
  width: 100%;
  height: 255%;
  animation: loader 8s;
  z-index: 2;
  transform: scale(0);
}

.loader_img {
  position: absolute;
  top: 70%;
  left: 42%;
}

/***********PACMAN*******/
.pacman {
  width: 250px;
  animation: pacman 10000ms;
  transform: translateX(-130px);
  z-index: 3;
  position: absolute;
}

/*CIRCLE***********/
.fa-solid {
  font-size: 30px;
  margin-right: 2px;
  z-index: 2;
}

.point {
  width: 50px;
  background: black;
  position: absolute;
  z-index: 2;
}

.circles {
  display: flex;
  flex-direction: row;
  padding: 3em;
  border-radius: 50%;
  position: relative;
  /*
  animation: backgroundcolor 10s;
  (Pour faire un fond de couleur avec le keyframe plus loin au dessu
  */
}

.o_letter {
  animation: letter;
  animation-duration: 10s;
  animation-delay: 1ms;
}

.h_letter {
  animation: letter;
  animation-duration: 10s;
  animation-delay: 1s;
}

.m_letter {
  animation: letter;
  animation-duration: 10s;
  animation-delay: 1.5s;
}

.y_letter {
  animation: letter;
  animation-duration: 10s;
  animation-delay: 2s;
}

.f_letter {
  animation: letter;
  animation-duration: 10s;
  animation-delay: 2.5s;
}

.osecond_letter {
  animation: letter;
  animation-duration: 10s;
  animation-delay: 3s;
}

.othirst_letter {
  animation: letter;
  animation-duration: 10s;
  animation-delay: 3.5s;
}

.d_letter {
  animation: letter;
  animation-duration: 10s;
  animation-delay: 4s;
}

/***************************/
/*Aparition des lettres*/
.letter {
  position: absolute;
  font-size: 25px;
  font-family: "Shrikhand";
  top: 15%;
  color: white;
  z-index: 1;
  text-shadow: 1px 10px 5px black;
}

.O {
  animation: letter_color 8s;
  animation-timing-function: ease-in-out;
  left: 15%;
}

.H {
  animation: letter_color 8s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  left: 25%;
}

.M {
  animation: letter_color 8s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  left: 32%;
}

.Y {
  animation: letter_color 8s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  left: 43%;
}

.F {
  animation: letter_color 8s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.5s;
  left: 51%;
}

.OF {
  animation: letter_color 8s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  left: 60.5%;
}

.OS {
  animation: letter_color 8s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.5s;
  left: 70%;
}

.D {
  animation: letter_color 8s;
  animation-timing-function: ease-in-out;
  animation-delay: 4s;
  left: 78.8%;
}

/**Header**/
header {
  text-align: center;
  margin-bottom: 0.25em;
  padding: 1.5em 0em 0.5em 0em;
  box-shadow: 0px 5px 5px -2.3px rgb(200, 200, 200);
}
header img {
  width: 162px;
  animation: apparition 1s;
}

/*Position*/
.position {
  text-align: center;
  background-color: rgb(234, 234, 234);
  font-size: 15.5px;
  font-family: "Roboto";
  font-weight: 500;
  animation: apparition 2s;
}
.position p::before {
  content: "\f3c5";
  font-family: "FontAwesome";
  padding-right: 10px;
  margin-left: -20px;
  font-size: 15px;
}

/*Présentation du site web*/
.presentation {
  padding-bottom: 4.5em;
  font-family: "Roboto", sans-serif;
  text-align: center;
  background-color: rgb(245, 245, 245);
}
.presentation h2 {
  margin-top: 1.5em;
  animation: apparition 1s;
}
.presentation p {
  font-weight: lighter;
  font-size: 18px;
  margin-top: -0.5em;
  margin-bottom: 2.5em;
  animation: apparition 2s;
}
.presentation a {
  color: white;
  padding: 1em;
  border-radius: 50px;
  background: linear-gradient(175deg, #FF79DA, #9356DC);
}

/*Présentation du fonctionnement du site web*/
.fonctionnement {
  margin-bottom: 3.5em;
}
.fonctionnement .case_fonctionnement {
  display: flex;
  flex-direction: column;
}
.fonctionnement .case {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  box-shadow: 0px 0px 10px 0px rgb(210, 210, 210);
  margin: 1em 1em 1em 2em;
  padding: 0.6em 0em 0.4em 4.8em;
  border-radius: 21px;
  font-weight: bold;
  color: black;
  animation: apparition 4s;
  background-color: rgb(245, 245, 245);
}
.fonctionnement .case:hover {
  background-color: #f5edff;
}
.fonctionnement .icon_number {
  margin-left: -6em;
  margin-right: 4em;
  color: white;
  border-radius: 50%;
  padding: 0.3em 0.6em 0.3em 0.6em;
  background-color: #9356DC;
  font-size: 15px;
  font-weight: lighter;
}
.fonctionnement .icons {
  font-size: 20px;
  margin-left: -2.3em;
  margin: 0em 1.3em 0em -2.3em;
  color: gray;
  font-family: "FontAwesome";
}

/*Carte restaurants*/
#restaurants {
  background-color: rgb(245, 245, 245);
  padding-bottom: 4em;
}
#restaurants .case_restaurants {
  display: flex;
  flex-direction: column;
}
#restaurants figure {
  margin: auto;
  margin-bottom: 1.2em;
  width: 89.1%;
  height: 252px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px 0px rgb(210, 210, 210);
  /*DESIGN HEART*/
}
#restaurants figure .new {
  background-color: #99E2D0;
  padding: 0.4em 0.7em 0.4em 0.7em;
  color: #008766;
  font-weight: bold;
  margin-left: 17.6em;
  font-size: 14px;
  border-radius: 2.5px;
  position: absolute;
}
#restaurants figure img {
  height: 174px;
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  object-fit: cover;
}
#restaurants figure .heart {
  margin: -0.6em 1em 0em 0em;
  font-size: 23px;
}
#restaurants figure .heart:hover {
  content: "\f004";
  font-family: "FontAwesome";
  background-image: linear-gradient(30deg, #FF79DA, #9356DC);
  height: 30px;
  animation: heart_anim 1000ms;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes heart_anim {
  from {
    height: 0px;
  }
  to {
    height: 30px;
  }
}
#restaurants figure h4 {
  font-weight: bold;
  margin: 0.7em 0em 0em 0.65em;
  font-size: 18px;
}
#restaurants figure .lieux {
  margin: 0.2em 0em 0em 0em;
  font-weight: lighter;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
}

/*FOOTER*/
footer {
  background-color: #353535;
  padding-bottom: 2em;
}
footer h4 {
  font-family: "Shrikhand";
  font-size: 20px;
  margin-bottom: 0.7em;
}
footer ul {
  list-style: none;
  padding-left: 1.5em;
  color: white;
}
footer a {
  color: white;
}
footer li {
  margin-bottom: 0.4em;
}
footer .ustensibl {
  margin-right: 0.7em;
  font-size: 13px;
}

/*RESPONSIVE ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
/*Responsive bouton new↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
@media screen and (min-width: 320px) and (max-width: 364px) {
  #restaurants figure .new {
    margin-left: 64%;
  }
}
@media screen and (min-width: 390px) and (max-width: 449px) {
  #restaurants figure .new {
    margin-left: 68%;
  }
}
@media screen and (min-width: 450px) and (max-width: 649px) {
  #restaurants figure .new {
    margin-left: 71%;
  }
}
@media screen and (min-width: 550px) and (max-width: 760px) {
  #restaurants figure .new {
    margin-left: 74%;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*responsive de 600px a 760px (Tablette)*/
@media screen and (min-width: 600px) and (max-width: 760px) {
  footer {
    display: flex;
    justify-content: center;
  }
  footer h4 {
    margin-top: 0px;
  }
  footer ul {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}
/*Responsive case fonctionnement↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
@media screen and (min-width: 760px) and (max-width: 900px) {
  .fonctionnement .case_fonctionnement {
    align-items: center;
  }
  .fonctionnement .case {
    width: 50%;
  }
}
@media screen and (min-width: 900px) and (max-width: 1920px) {
  .fonctionnement .case_fonctionnement {
    flex-direction: row;
    justify-content: space-around;
  }
  .fonctionnement .case {
    width: 375px;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
@media screen and (min-width: 1400px) and (max-width: 2560px) {
  main {
    width: 75%;
  }
}
/*Responsive Loader*/
@media screen and (min-width: 320px) and (max-width: 350px) {
  .letter {
    top: 15%;
  }
}
/*Responsive de 761px a 1920px*/
@media screen and (min-width: 761px) and (max-width: 2560px) {
  main {
    max-width: none;
    margin-top: 10px;
    box-shadow: 0px 0px 10px 10px #F2F2F2;
    border-radius: 20px;
  }
  #restaurants .case_restaurants {
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
  }
  #restaurants figure {
    width: 500px;
    position: static;
  }
  #restaurants figure .new {
    margin-left: 29em;
  }
  #restaurants figure img {
    width: 500px;
  }
  footer {
    display: flex;
    justify-content: center;
  }
  footer h4 {
    font-size: 30px;
    margin-top: 0px;
  }
  footer ul {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
  }
}

/*# sourceMappingURL=style.css.map */