/*This is copied from index.css--variable is not necessary there but is elsewhere*/
:root {
  --secondary: rgb(32, 28, 113);
}
html {
  scroll-behavior: smooth;
}
nav {
  width: 70%;
  padding: 0;
}
nav p {
  text-align: left;
  white-space: nowrap;
}
nav a {
  transition: letter-spacing 0.25s, padding 0.25s, padding-top 0.25s;
  padding: 8%;
  padding-top: 11%;
}
nav p:hover a, nav a:focus {
  background-image: url(/assets/link-background.gif);
  color: var(--secondary);
  letter-spacing: 1px;
  padding: 2%;
  padding-top: 5%;
}
summary {
  color: white;
  cursor: pointer;
  font-size: 1.25em;
  list-style: none;
  transition: letter-spacing 0.25s, padding 0.25s;
  padding: 5% 8% 0;
}
summary:hover, summary:focus {
  background-image: url(/assets/link-background-blue.gif);
  color: var(--secondary);
  letter-spacing: 1px;
  padding: 5% 2% 0;
}
details p {
  margin-left: 20%;
}
#contentjump {
  color: var(--secondary);
  background-color: var(--primary);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1%;
  transform: translateY(-100%);
  transition: transform 0.5s;
}
#contentjump:focus {
  transform: translateY(0%);
}
#navigationjump {
  display: none;
  color: var(--secondary);
  background-color: var(--primary);
  width: 100%;
  padding: 1%;
  margin: 0;
  text-align: center;
  text-decoration: underline;
}
@media only screen and (orientation: portrait) {
  #navigationjump {
    display: block;
  }
  #contentjump {
    display: none;
  }
}