/* assets/style.css */
:root { --ink:#222; --bg:#f9f9f9; --link:#0b72d2; --col:760px}

*{ box-sizing: border-box;
 overflow-wrap: break-word; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0.5rem; color: var(--ink); background: var(--bg);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.6;
}
header {
  margin: 0 auto;
  text-align: center;
}
header a{
  font-weight: 900;
  background-image: linear-gradient(hsl(300, 100%, 25%), hsl(300, 100%, 10%));
  color: transparent;
  background-clip: text;
  text-decoration: underline;
}

main {
  max-width: var(--col); margin: 1rem auto; background: #fff; padding: 1rem;
  border-radius: 10px; 
  /* box-shadow: 0 2px 12px #0001; */
}
img { max-width: 100%; height: auto; display: block; }
pre, code { background: var(--bg); padding: .2em .4em; border-radius: 4px; }
footer { max-width: var(--col); color: #777; margin: 3rem auto 0; }


/* cards */
article.card{
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px #0001;
  padding: 1rem;
}

/* Typogarphy */

h1,h2,h3 { line-height: 1.2; }
h1, strong, a:hover{ background-image: linear-gradient(hsl(300, 100%, 25%), hsl(300, 100%, 10%));
    color: transparent;
    background-clip: text;}


h1{ 
  font-size: 3rem; 
  margin-bottom: 0; 
}

h2{ 
  font-size: 2rem; 
  margin-bottom: 0; 
  border-bottom: #000001 dashed 1px;
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  h1{ 
    font-size: 5rem; 
  }
  
}

@media (min-width: 1024px) {
  h1{ 
    font-size: 6rem; 
  }
  
}