@import url(reset.css);

@font-face {
  font-family: PokemonSolid;
  src: url(../fonts/pokemon-solid.ttf);
  font-display: swap;
}
@font-face {
  font-family: PressStart2P;
  src: url(../fonts/press-start-2p.ttf);
  font-display: swap;
}
@font-face {
  font-family: PoppinsThin;
  src: url(../fonts/poppins-thin.ttf);
  font-display: swap;
}

:root {
  --light-bg: #fff;
  --light-text: #000;
  --light-primary: #ffcb05;
  --light-secondary: #003a70;
  --light-border: #fff;

  --bg-fallback: var(--light-bg);
  --text: var(--light-text);
  --primary: var(--light-primary);
  --secondary: var(--light-secondary);
  --border: var(--light-border);
}

.dark {
  --dark-bg: #333;
  --dark-text: #fff;
  --dark-primary: #003a70;
  --dark-secondary: #ffcb05;
  --dark-border: #333;

  --bg-fallback: var(--dark-bg);
  --text: var(--dark-text);
  --primary: var(--dark-primary);
  --secondary: var(--dark-secondary);
  --border: var(--dark-border);
}

body {
  background: var(--bg-fallback);
  color: var(--text);
}

a {
  color: var(--secondary);
}

header {
  align-items: center;
  display: flex;
  flex-direction: column;
}

header,
footer {
  text-align: center;
}

header > h1 {
  color: #ffcb05;
  font-family: PokemonSolid, sans-serif;
  font-size: 10vw;
  letter-spacing: 5px;

  text-decoration: underline;
  -webkit-text-stroke: 3px #003a70;
}

header > button {
  background-color: var(--bg-fallback);
  border: none;
  cursor: pointer;
  font-size: 1.8em;
  padding: 0.3rem;
  outline: none;
  width: auto;
}

span,
p,
button {
  font-family: PoppinsThin, sans-serif;
}

main {
  padding: 0.5rem;
}

#app {
  background-color: var(--secondary);
  border: 10px double var(--border);
  display: flex;
  flex-flow: row wrap;
  overflow: scroll;
  height: 60vh;
  padding: 0.5rem;
  margin: 1rem 0;
}

.card {
  border: 2px solid #fff;
  background-color: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 0.1rem;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

.card:hover {
  border: 2px solid var(--secondary);
  box-shadow: 0 0px 10px #777;
  transform: scale(1.1);
}

.card--id {
  background-color: #fff;
  border: 2px solid var(--secondary);
  border-radius: 50%;
  color: #003a70;
  padding: 1rem;
}

.card--name {
  color: #3d7dca;
  font-family: PressStart2P, sans-serif;
  font-size: 2vw;
  text-transform: uppercase;
}

@media only screen and (min-width: 600px) {
  header > h1 {
    font-size: 6vw;
  }
}

@media only screen and (min-width: 768px) {
  main {
    padding: 2rem;
  }

  #app {
    padding: 2rem;
  }

  header > h1 {
    font-size: 4vw;
  }
}

@media only screen and (min-width: 1200px) {
  .card {
    width: 33%;
  }
}