/* Keyframes are there to set animations. In this case it is a glow when you *hover* a *nav*igation *butt*on. => hovernavButt. Keep in mind: You should write your names out, don't shorten them. */
@keyframes hovernavButt {
	0%		{box-shadow: 0px 0px 10px 1px #ad94e9;}
	33% 	{box-shadow: 0 0 0px 0px #aeeebd;}
	50%		{box-shadow: 0px 0px 5px 1px #ad94e9;}
	66% 	{box-shadow: 0 0 0px 0px #aeeebd;}
	100%	{box-shadow: 0px 0px 10px 1px #ad94e9;}
}


body {
  background: rgb(174,238,189);
  zbackground: linear-gradient(122deg, rgba(174,238,189,1) 0%, rgba(173,148,233,1) 100%);
  background: url('20210312015930_1.jpg');
  padding: 0px;
  margin: 0px;
  font-family: 'Averia Serif Libre', cursive;
  font-size: 1.1em;
  color: #dedede;
}

a {
  text-decoration: none;
  color: #dedede;
}
a::before{content: "[";}
a::after{content: "]";}
a:hover {color: #000;}

h1 {
	font-size: 1.3em;
	margin-bottom: 10px;
	margin-top: 20px;
}
h1::before {
	content: "#";
}

h2 {
	font-size: 1.1em;
	margin-bottom: 0px;
	margin-left: 10px;
}
p, ul {
	margin: 0px 0px;
	margin-left: 10px;
}



#wrapper {
  width: 1000px;
  height: 99vh;
  margin: 0px auto;

  background: #000a;
  border: 2px solid rgba(174,238,189,1);
  border-radius: 5px;
  
  display: flex;
  flex-direction: column;
}

nav {
  width: 100%;
  box-sizing: border-box;
  zborder: 2px dashed #faa;
  
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-self: flex-start;
  justify-self: stretch;
}

.navbutton {
  border: 2px solid #aeeebd;
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold;
  font-size: 1.2em;
}

.navbutton:hover {
  border: 2px solid #ad94e9;
  background: linear-gradient(122deg, rgba(174,238,189,1) 0%, rgba(173,148,233,1) 100%);
  color: #000;
  animation: hovernavButt 5s ease-in-out 0s infinite;
}

main {
  zborder: 2px dashed #a57;
  box-sizing: border-box;
  flex-basis: 100%;
  
  padding: 0px 3px;

  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #aeeebd #ad94e9;
}

footer {
  box-sizing: border-box;
  zborder: 2px dashed #faa;
  text-align: center;
}

.small {
	font-style: italic;
	font-size: 0.8em;
	text-align: right;
}