@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');
:root {
  --purple: rgb(67, 13, 129);;
}
body, html {
  height: 100%;
}
body {
    font: 30px serif;
    background: rgb(67, 13, 129);
    text-align: center;
    color: rgb(255, 253, 253);
    margin: 0;
}

h1 {
    padding: 10px 0 10px 0;
    font-family: 'Zen Antique';
}

h2 {
}
body > *:not(#navigation) {
  margin: 1em;
}
article {
  max-width: 1200px;
  /*height: 600px;*/
  background: rgb(55, 196, 206);
  /*margin: 10px 0 10px 0;*/
  margin: 50px auto 0 auto;/**/
  border: 5px solid rgb(5, 0, 0);
  border-radius: 20px;
  padding-bottom: 20px;
}
p {
  font-size: 30px;
}

article p {
  font-size: 16px;
}

section {
  display: flex;
  justify-content: center;
}

section.section-two p {
  font-size: 10px;
}

a:visited,
a {
  font-size: 24px;
  color: white;
  text-decoration: none;
}
a:hover {
  color: gold;
}

.topnav {

}
#navigation {
  position: sticky;
  top: 0;
  display: flex;
}
#navigation button {
  background: transparent;
  border: 0;
  filter: invert(100%);
  cursor: pointer;
  padding: 1.25rem;
  border-bottom-right-radius: 0.5em;
  outline: none;
  transition: filter 300ms ease;
}
#navigation.open button {
  z-index: 50;
  filter: invert(0);
}
#navigation button:hover {
  background-color: rgba(255,255,255,0.25) 
}
#navigation > div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  min-width: 8em;
  background: white;
  padding: 1.25rem;
  transition: transform 300ms ease, visibility 300ms;
  transform: translateX(-100%);
  padding-top: calc(1.25rem + 30px + 2.5rem);
  text-align: left;
}
#navigation > div > a {
  color: var(--purple);
}
#navigation > div > a:hover {
  color: black;
}

#navigation.open > div {
  visibility: visible;
  transform: translateX(0);
}

#borgir {
  width: 46px;
  height: 46px;
  display: flex;
  position: relative;
  box-sizing: border-box;
  font-size: 100%;
}
#borgir span {
  border-top: 2px solid;
  border-radius: 2px;
  background-color: white;
  display: block;
  flex: 0 0 100%;
  margin: 0 0.75rem;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform-origin: center center;
  transition: transform 300ms;
  -webkit-backface-visibility: hidden;
}
#borgir span:first-child {
  transform-origin: top left;
  top: 33%;
}
#borgir span:last-child {
  transform-origin: top left;
  top: 66%;
}
#borgir span:not(:first-child):not(:last-child) {
}

.open #borgir span{
  transform: scale(0, 0)

}
.open #borgir span:first-child {
  transform: rotate(45deg);

}

.open #borgir span:last-child {
  transform: rotate(-45deg);
}