:root {
    /* Colors */
    --light-color: #EAF0F1;
    --grey-color: #596475;
    --dark-color: #1f2232;
    --dark-transparent-color: rgba(31, 34, 50, .4);
    
      /* Default theme */
      --default-first-color: #A0E6EF;
      --default-second-color: #7EC6E0;

      /* Day theme */
      --day-first-color: #7EC6E0;

      /* Night theme */
      --night-first-color: #3C376D;

      /* Rain theme */
      --rain-first-color: #9FB4C2;

    --text-color: var(--grey-color);
  
    /* Font & weight */
    --font-title: "CuteDino";
    --font-text: "Quicksand";
  
    /* Divers */
    --margin: 20px;
    --padding: 20px;
    --border-grey-color: solid 2px var(--grey-color);
    --border-white-color: solid 2px var(--light-color);
  
    /* Anchor */
    --anchor-color: var(--white);
    --anchor-color-hover: var(--second-color);
  
    /* Radius */
    --full-border-radius: 999px;
    --border-radius: 30px;

    /* Transition */
    --transition-time: .4s;
    --transition-timing-fuction : cubic-bezier(.36,-0.04,.18,1.47);
  }
  
  @font-face {
    font-family: CuteDino;
    src: url("./font/CuteDino/Cute\ Dino.ttf");
  }
  
  @font-face {
    font-family: Quicksand;
    src: url("./font/Quicksand/Quicksand-VariableFont_wght.ttf");
  }

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  background-color: var(--light-color);
  color: var(--text-color);
  width: 100vw;
  max-width: 700px;
  height: 100dvh;
  overflow-x: hidden;
  font-family: var(--font-text);
  transition: var(--transition-time);
}

#root {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}