big reshuffling

assets/styles/nav.css

@@ -0,0 +1,87 @@
+/* top nav */
+nav {
+  margin: 0 auto 1.5rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+nav a {
+  text-decoration: none;
+  font-size: 1.2rem;
+  padding: 0 .25rem;
+}
+
+@media (any-hover: hover) {
+  nav a:hover {
+    outline: solid .25rem var(--color-accent);
+  }
+}
+
+nav ul {
+  display: flex;
+  justify-content: flex-end;
+  gap: .5rem;
+}
+
+nav li {
+  list-style: none;
+  border: solid thin var(--color-accent);
+  border-radius: .25rem;
+  outline-offset: .1rem;
+}
+
+nav li:focus-within {
+  outline: solid .25rem var(--color-accent);
+}
+
+nav li a:focus-visible {
+  outline: none; /* handled by above nav li rule */
+}
+
+/* this specifically handles the home button
+we want it taking up flex container space */
+nav > #current-page {
+  visibility: hidden;
+}
+
+nav > div > #current-page {
+  display: none;
+}
+
+header img {
+  max-height: 25vh;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+/* footer */
+footer {
+  width: 95%;
+  margin: 0 auto;
+  padding: 0 0 1rem;
+}
+
+footer p {
+  background-color: var(--color-text);
+  color: var(--color-bg);
+  text-align: center;
+  font-size: .9rem;
+}
+
+footer a {
+  color: var(--color-bg);
+  text-decoration-color: var(--color-accent-flipped);
+}
+
+footer a:focus-visible {
+  outline-color: var(--color-accent-flipped);
+}
+
+#contacts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  column-gap: 3rem;
+  margin: 1rem 0 0;
+}