@import url("https://fonts.googleapis.com/css2?family=Amatic+SC&family=Inter:wght@300;500;700&display=swap");

/* Variables ======================================================= */

:root {
  /* Primitive Tokens */
  --clr-dark: #494636;
  --clr-light: #f8eeb9;
  --clr-blue: rgb(91, 175, 177);
  --clr-white: #fff;
  --ff-primary: "Amatic SC", cursive;
  /* Sementic Tokens */
  --clr-forground: var(--clr-dark);
  --clr-background: var(--clr-light);
  --clr-body:var(--clr-blue);
  --clr-eye:var(--clr-white);
}

/* Reset ======================================================= */
/* à partir https://piccalil.li/blog/a-more-modern-css-reset/  */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
  padding: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Base 
========================================== */

.page {
  display: grid;
  align-items: center;
  height: 100vh;

  font-family: var(--ff-primary);
  color: var(--clr-text);
  text-align: center;

  background-image: url("../assets/paper.jpg");
  background-color: var(--clr-background);
  background-blend-mode: multiply;
}

/* -----------------------------------------
  *  Creature
  *  ---  
--------------------------------------------- */

/* Creature container ========================================== */

.creature-collection {
}

.creature-box {
  max-width: 16.25rem;
  margin: 0 auto;
  padding: 1em 2em;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Creature  
============================================ */

.creature {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 12rem;
  aspect-ratio: 1;
  z-index: 10;
  background-color: var(--clr-body);
  border-radius: 100%;
  box-shadow: inset -15px -20px rgba(0, 0, 0, .2);
  translate: 0% 0%;
  /*animation: blob .5s alternate-reverse infinite;*/
  animation: boing .5s infinite alternate-reverse;
}
.creature__eyes{
  display: flex;
  gap: 2rem;
}
.creature__eye{
  width: 2rem;
  aspect-ratio: 1;
  background-color: var(--clr-eye);
  border-radius: 100%;
  overflow: hidden;
}
.creature__eye::after{
  display: block;
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: black;
  border-radius:75% ;
}
.creature__mouth{
  width: 5rem;
  height: 2rem;
  background-color: var(--clr-dark);
  border-radius: 31% 69% 72% 28% / 36% 0% 100% 64% ;
  margin-top: 1rem;
}
.creature-shadow{
  aspect-ratio: 8/2;
  background-color: #494636;
  z-index: -10;
  border-radius: 50%;
  translate: 20% -50%;
  animation: shadow .5s infinite alternate-reverse;
}
@keyframes blob {
  0%{
    background-color: var(--clr-body);
  }
  25%{
    background-color: rgb(0, 53, 150);
  }
  50%{
    background-color: rgb(64, 0, 168);
  }
  75%{
    background-color: rgb(43, 0, 113);
  }
  100%{
    background-color: var(--clr-body);
  }
  
}
@keyframes boing{
  to{
    translate: 0% -200%
  }
}
@keyframes shadow{
  to{
    scale: .7;
    opacity: .6;
  }
}

.creature--bob{
  --clr-body:rgb(181, 44, 244);
  .creature__eye{
  border-radius:17% 83% 0% 100% / 20% 100% 0% 80% ;
  }
  .creature__eye:last-child{
    transform: rotate(90deg);
  }
  .creature__eye{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .creature__mouth{
    background-color: rgb(155, 1, 155);
    border-radius: 13% 87% 58% 9% / 23% 76% 25% 77% ;
  }
}