*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:system-ui,Arial,sans-serif;
  line-height:1.6;
  color:#222;
  background:#fafafa;
}

header, main, footer{
  max-width:960px;
  margin:auto;
  padding:1rem;
}
header{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
h1{
  font-size:2rem;
  margin:0;
  display:flex;
  align-items:center;
}
.logo{
  width:48px;
  height:48px;
}

.blurb{
  margin:1rem 0;
  font-size:1.1rem;
}

.thumb{
  width:100%;
  max-width:300px;
  cursor:pointer;
  /*
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  */
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  justify-content:center;
  align-items:center;
  z-index:1000;
}
.modal img{
  max-width:90vw;
  max-height:90vh;
  border-radius:4px;
}
.modal:target{
  display:flex;
}

.decoration{
  height:8px;
  margin:2rem 0;
  background:repeating-linear-gradient(
    45deg,
    #c0c0c0,
    #c0c0c0 4px,
    #fafafa 4px,
    #fafafa 8px
  );
}

.contact-btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  background:#0066cc;
  color:#fff;
  border:none;
  border-radius:4px;
  text-decoration:none;
  font-weight:600;
  transition:background .2s;
}
.contact-btn:hover{
  background:#004999;
}

footer{
  color:#67789f;
  padding:2rem 1rem;
}
footer a{
  color:#8c8bad;
  text-decoration:none;
}
footer a:hover{
  text-decoration:underline;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;
}
.footer-grid div{
  font-size:.9rem;
}

#copyright {
    margin-top: 1rem;
    font-size: 0.8rem;
    text-align:center;
}

#centered-preview {
    text-align: center;
}

@media (max-width:600px){
  h1{font-size:1.5rem}
  .blurb{font-size:1rem}
}