body{
  font-size: 17px;
  margin: 0;
  padding-bottom: 50px; 
  background-image: url(/img/bck/paper1.png);
}

.shade{width: 100%;height: 100%;position: fixed;background: rgba(0, 0, 0, 0.671);z-index: -9;pointer-events: none;}

.topnav, h1{text-align: center;}

/*thing that makes the css selection work*/
#cmovies:checked ~ #movies, #cseries:checked ~ #series, #cshorts:checked ~ #shorts, #cyoutube:checked ~ #youtube{ display: block;}

#cmusic:checked ~ #music, #cpodcasts:checked ~ #podcasts{ display: block;}

#cgames:checked ~ #games, #cvideogames:checked ~ #videogames{ display: block;}

#cbook:checked ~ #books, #ccomic:checked ~ #comics, #cother:checked ~ #other{ display: block;}

input{margin-bottom: 1.2em;}

main{
  text-align: center;
  margin: auto;
  max-width: 750px;
}

main section{
  display: none;
  text-align: left;
  border: 21px solid transparent;
  background: rgba(0, 0, 0, 0.459);
  border-image: url(/img/floral2.png) 21 round;
  margin-bottom: 50px;
  padding: 20px;
  }

  h1{margin-bottom: 0.2em;}
  h2{margin: 0; font-size: 1.5em;}
  h3{margin: 0.1em 0; font-size: 1.3em;}

  .title{
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.3em;
  }
    .title span{ font-size: 1.2em; opacity: 80%;}

  main section ul{
    list-style: none;
    margin: 0;
    padding: 5px;
  }

  main section li{
    margin: 8px 0;
  }

  summary{font-size: 1.1em;}

  details[open]{margin-bottom: 3em;}

.hover{text-decoration:underline dotted; cursor: pointer;}
  .hover:active ~ .extra{display: inline;}

  .extra{display: none;}

/*just the math essay squares*/
  td{border:2px solid black;padding-left:10px;padding-right:10px;padding-top:5px;padding-bottom:5px;}

.tdo{background:yellow;}
.tdt{background:blue;}