:root {
	--border: 1px solid #000000;
	--radius: 2px;
	
	--maincolor: transparent;
	--rowcolor: transparent;
	--divcolor: rgba(255, 255, 255, 1);
	
	--columngap: 3px;
	--rowgap: 3px;
}

body {
    font-family: 'special elite' , monospace , serif;
    color: #00543e;
}


header {
    background-color: var(--divcolor);
    height: 50px;
    width: 600px;
    margin: auto;
    margin-top: 20vh;
	padding: 10px;
	
	border-radius: var(--radius);
	
	font-size: 20px;
	box-sizing: border-box;
	border: var(--border)
;}


main {
	
	border-radius: var(--radius);
    
    margin: auto;
    height: 600px;
    width: 600px;
    margin-top: 10px;
	
	
	flex-direction: column;
	display: flex;
	
  text-align: center;
	row-gap: var(--rowgap);
    
    background-color: var(--divcolor);
	box-sizing: border-box;
	border: var(--border);
	padding: 5px;
    }



nav a, strong {
	color: #8ac3a4;
}

a:active {
	color: #2dfcb6;
	text-decoration: wavy underline;
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */


nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
 display: flex;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}


nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

nav a, nav strong {
	text-decoration: none;
	font-size: 30px;
}

header nav {
  margin-bottom: 0;
	text-decoration: none;
	justify-content: space-evenly;
	display: flex;
	flex-direction: row;
}


header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
	display: flex;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}

/* Subnavigation (Drop-Down): */

header nav ul ul {
	background-color: white;
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  min-width: 100%;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  font-weight: normal;
}


header nav ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;

}

a:hover {
	text-shadow: 1px 1px 4px #00ffb1;
  background-color: inherit;
  color: #00a472;
    font-style: italic;
}


nav a {
	color: #8ac3a4;
}

mark {
	text-shadow: 1px 1px 4px #00ffb1;
  background-color: inherit;
  color: #00a472;
}

body {
  --s: 199px; /* control the size*/
  --c1: #058a69;
  --c2: #fafff5;
  
  --_g: #0000 90deg,var(--c1) 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g)),
    conic-gradient(from 90deg at 1px 1px,var(--_g)),
    var(--c2);
  background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
}

main ul li {
     list-style-type: none;
}

main a {
    color: #00543e;
    text-decoration-style: wavy;
}

.mainscrollbox {
    margin: auto;
    width: 80%;
    height: 40%;
    overflow-y: scroll;
    scrollbar-width: none;
    border: var(--border);
    padding: 5px;
    box-sizing: border-box;
    

}

h2 {
    font-family: serif;
}

.socialwrap {
  margin: auto;
  margin-top: 10px;
  text-align: center;
}