* { padding: 0; margin: 0 }

body {
  max-width: 1080px;
  margin: auto;
  padding: 1em;
}

br { clear: both }

a:hover { 
  opacity: .7;
}

img { 
  max-width: 100%; 
}

.pic {
  margin-top: 1em;
}

.thumbs {
  margin-top: 1em;
}

.thumbs img {
  max-width: 33%;
  float: left;
  outline: 3px solid white;
}

article { 
  margin: 3em 0 ;
}

.support { 
  margin-top: 1em;
}

.support ul {
  display: inline-block;
  vertical-align: top;
  margin: 1em 1em;
  list-style-type: none;
}

.nav a, .rope a { margin: 0 .2em }
.smaller { font-size: .8em; padding-left:1em; }

@media only screen and (max-width: 860px) {

  .pic img { 
    display: block;
    margin: auto;
    margin-bottom:.5em;
  }

  .pic {
    margin-left: -1em;
    margin-right: -1em;
  }
  
  .thumbs {
    text-align: center;
    margin-left: -1em;
    margin-right: -1em;
  }

  .rope {
    text-align: center;
  }

}

@media (prefers-color-scheme: dark) {

  body {
    color: #bbb;
    background: #222;
  }

  a { 
    color: hotpink;
  }
  
  .thumbs img {
    outline: 5px solid #222;
  }

}