/******* RESET *******/

html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  margin: 0;
}

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

/************** VARIABLES **************/

:root {
  /* colors */
  --main:	hsl(229, 27%, 8%);
  --main-light: hsl(30, 35%, 40%);
  --module-background: hsl(31, 77%, 60%);
  --search-background: hsl(4, 100%, 74%);
  --pomme-background: hsl(118, 18%, 66%);
  --myrtille-background: hsl(235, 17%, 63%);

  /* font-family */
  --font-family-sans: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Helvetica Neue', sans-serif;

  /* font Modular scale */
  --scale-000: 0.75rem; /* 12px */
  --scale-00: 0.875rem; /* 14px */
  --scale-0: 1rem; /* 16px */
  --scale-1: 1.125rem; /* 18px */
  --scale-2: 1.25rem; /* 20px */
  --scale-3: 1.5rem; /* 24px */
  --scale-4: 1.875rem; /* 30px */
  --scale-5: 2.25rem; /* 36px */

  /* font weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* sizing property -> margin, padding, height */
  --spacing-0000: 4px;
  --spacing-000: 8px;
  --spacing-00: 12px;
  --spacing-0: 16px;
  --spacing-1: 20px;
  --spacing-2: 32px;
  --spacing-3: 48px;
  --spacing-4: 64px;
  --spacing-5: 96px;

  /* Widths applied as max-width */
  --width-00: 120px;

  /* Grid gaps */
  --gap-00: 12px;
  --gap-0: 16px;
  --gap-1: 24px;
}

/************** GLOBAL STYLES **************/

html {
  background-color: var(--main);
}

body {
  padding: var(--spacing-4);
  overflow: hidden;
  font-family: var(--font-family-sans);
}

grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: var(--spacing-2);
  grid-gap: var(--gap-1);
  grid-template-columns: repeat(auto-fit, minmax(var(--width-00), 1fr));
}

pomme {
  grid-row: span 2;
  background-color: var(--pomme-background);
  border-radius: 10px;
  animation: fadein-page 200ms ease-out normal backwards;
}

pp-loader {
  display: grid;
  grid-gap: var(--gap-00);
  grid-template-areas:
    'pp-loader-dot pp-loader-dot'
    'pp-loader-dot pp-loader-dot';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

pp-loader-dot {
  width: var(--spacing-1);
  height: var(--spacing-1);
  background-color: var(--main);
  border-radius: 50%;
  animation: loader-animation 1s linear 1s infinite alternate;
}

pp-loader-dot:nth-child(1) {
  animation-delay: 0s;
}

pp-loader-dot:nth-child(2) {
  animation-delay: -0.2s;
}

pp-loader-dot:nth-child(3) {
  animation-delay: -0.4s;
}

pp-loader-dot:nth-child(4) {
  animation-delay: -0.6s;
}

.error-notification {
  color: var(--search-background);
  font-weight: var(--font-weight-regular);
  font-size: var(--scale-2);
}

/******* ANIMATION *******/

@keyframes module-display {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes loader-animation {
  100% { background-color: var(--module-background); }
}

@keyframes fadein-page {
  0% { transform: scale(0); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/******* IMPORTS *******/

@import './myrtille/myrtille.css';
@import './raisin/raisin.css';
@import './clock/clock.css';
@import './search/search.css';
@import './binance/binance.css';
@import './openweather/openweather.css';
@import './unsplash/unsplash.css';
@import './stormglass/stormglass.css';