/* paleta https://coolors.co/c1dbe3-c7dfc5-f6feaa-fce694-373737 */
:root {
  --color-primary: #2563eb;
  --color-secondary: #f59e42;
  --color-accent: #10b981;
  --color-background: #f3f4f6;
  --color-surface: #ffffff;
  --color-muted: #6b7280;
  --color-error: #ef4444;
  font-size: 62.5%;
}


body {
  background-color: #f5f5f5;
  margin: 0;
  font-family: "Inter", sans-serif;
  height: 6000px;
}

header {
  background-color: var(--color-primary);
  padding: 20px;
  color: white;
}

h1 {
  font-size: 3rem;
  text-align: center;
}

h2 {
  font-size: 2.5rem;
  color: #0a6345;
}

h3{
  font-size: 2rem;
  margin: 5px 0 2px;
}

p, pre {
  font-size: 2rem;
}

.grupo {
  padding: 50px 0;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  background: #eee;
  padding: 0px 20px;
  margin: 20px 100px;
  border: 1px dashed #bbb;
  height: 500px;
  align-items: center;
}

.explicacao {
  background-color: #99fada;
  border: 1px solid #10b981;
  margin: 0 100px;
  padding: 0 20px;
}

.bloco {
  display: inline-block;
  background-color: var(--color-muted);
  color: white;
  height: 200px;
  width: 200px;
  font-size: 5rem;
  text-align: center;
  line-height: 200px;
  margin: 5px;
}
.bloco.static {
  background-color: var(--color-secondary);
}

.bloco.relative {
  position: relative;
  background-color: var(--color-secondary);
  top: 100px;
  left: 100px;
}

.bloco.absolute {
  position: absolute;
  background-color: var(--color-secondary);
  top: 50px;
  left: 50px;
}

.bloco.fixed {
  background-color: var(--color-secondary);
  position: fixed;
  top: 10px;
}

.click {
  cursor: pointer;
}

.click:hover {
  opacity: 0.8;
  transition: all 0.4s;
}

.bloco.sticky {
  background-color: var(--color-secondary);
  position: sticky;
  top: 10px;
}

pre {
  margin: 0;
}

.codigo {
  background-color: #373737;
  margin: 0px 100px;
  padding: 5px 20px;
  color: whitesmoke
}

.propriedade {
  color: #FCE694;
}

.seletor {
  color: #C7DFC5;
}

.valor {
  color: #F6FEAA;
}