/* Root variables */
:root {
  --papaya-whip: #ffecc8;
  --plum: #dcabdf;
  --pumpkin-spice: #f3752b;
  --evergreen: #03312e;
  --oxblood: #95190c;
  --white: #ffffff;
  --slate-grey: #878e99;
  --black-forest: #9d96b8;
  --twilight-indigo: #3a405a;
  --onyx: #151515;
  --lavender-grey: #8693ab;

  --padding-small: 4pt;
  --padding-med: 8pt;
  --padding-large: 12pt; 

  --margin-small: 4pt;
  --margin-med: 6pt;
  --margin-large: 10pt;

  --max: 9999px;
  
  --tile-size: 3em;
  --tile-font-size: 2em;
  --tile-radius: 16%;
  --row-gap: 8pt;
  --tile-shadow: 0.75pt 0.75pt 5pt var(--onyx);
}

/* Base styles */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,200;1,200;0,400;0,600&display=swap');

/* Global Container */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;

  background-color: var(--twilight-indigo);
}

h1, h2, h3, h4, h5, h6, p, button, ul, li {
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: white;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

/* Headings */
h2 {
  font-weight: 600;
}

h3 {
  font-weight: 400;
}

h4 {
  font-weight: 200;
}

/* Buttons */
button {
  cursor: pointer; 
  border: none;
  background: none;
}

button:hover, .active {
  text-decoration: underline; 
}

/* Puzzle Layout */
.puzzle-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.puzzle-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap);
  margin: var(--margin-small) 0;
}

.finish-word {
  position: absolute;
  bottom: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
}

/* Slider */
.slide {
  display: flex;
  padding: 2pt;
  width: fit-content;
  margin: var(--margin-med) auto;
  border-radius: var(--max);
  background-color: var(--slate-grey); 
}

.slide button {
  padding: var(--padding-med) var(--padding-large);
  border-radius: var(--max);
  text-align: center;
}

.slide button:hover {
  text-decoration: underline;
}

.slide .active {
  background-color: var(--twilight-indigo);
  text-decoration: none;
}

/* Tiles */
.tiles {
  display: flex;
  gap: var(--margin-med);
}

.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: var(--tile-radius);

  background-color: var(--papaya-whip);

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: var(--tile-shadow);
}

.tile * {
  color: var(--onyx);
  font-size: var(--tile-font-size);
}

/* Horizontal Rule */
.rule {
  background-color: var(--slate-grey);
  height: 2pt;
  border-radius: 9999px;
}

/* Nav Bar */
nav {
  display: flex;
  justify-content: center;
  margin: var(--margin-med) auto;
}

/* Footer */
footer {
  position: absolute;
  bottom: 0;
  margin: var(--margin-small) 0;
  width: 100%;
  display: flex;
  justify-content: center;
}


/* Definition / Puzzle info */
.definition {
  display: flex;
  flex-direction: column;
  width: min-content;
  text-align: left;
  gap: var(--margin-med);
  margin: var(--margin-large);
}