h1 {color: #0077af !important;}

li {padding:.6em;}

  /* the details stuff for the cool little dropdown */
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}

summary {
  font-size: large;
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
    color: #white;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}
details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

details .btn {margin-left: 3em; margin-bottom: 1em;}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}

summary {padding:1em;}
.lil_summary {font-size: small; color:#0077AF; border-right:#5F9632 1px solid; padding-right: .5em;}
.lil_summary .fa {color:#5F9632;}
.no-right-border { border-right: 0px;}

main details a {color: white ;}

.neato {
  color: #0077af;
  --top-color: #5B973B;
  --right-color: #4F2D7F;
  --bottom-color: #E76B2B;
  --left-color: #AD2625;
  --gap-color: white;

  --border-size: calc(5px + 0.390625vw);
  --gap-size: 3px;
  --offset-size: calc(var(--border-size) + var(--gap-size));
  
  border: var(--offset-size) solid rgba(0,0,0,0);
  background-image:
    linear-gradient(to top,    var(--bottom-color) var(--border-size),  var(--gap-color) var(--border-size), var(--gap-color) var(--offset-size), transparent var(--offset-size)),
    linear-gradient(to right,  var(--left-color) var(--border-size),    var(--gap-color) var(--border-size), var(--gap-color) var(--offset-size), transparent var(--offset-size)),
    linear-gradient(to bottom, var(--top-color) var(--border-size),     var(--gap-color) var(--border-size), var(--gap-color) var(--offset-size), transparent var(--offset-size)),
    linear-gradient(to left,   var(--right-color) var(--border-size),   var(--gap-color) var(--border-size), var(--gap-color) var(--offset-size), transparent var(--offset-size));
  background-origin: border-box;
  
  
}

.neato::after {
  background-color: var(--right-color);
  border-left: var(--gap-size) solid var(--gap-color);
  bottom: calc(var(--offset-size) * -1);
  content: '';
  display: block;
  height: var(--offset-size);
  position: absolute;
  right: calc(var(--offset-size) * -1);
  width: var(--border-size);
}

/* Add drop shadow to nav */
nav {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}