@font-face {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    src: url(verdana);
}
@font-face {
	font-family: gothic;
	font-weight: lighter;
	src: url(font/indiebusillis.woff2);
}

p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 90%;
    color: white;
	size: 50%;
}

h2 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 90%;
    color: white;
	size: 50%;
}

body {
    background-color: black;
	display: grid; 
}

.ban{display: none;}

.section-header {
    top: 0.5em;
    left: center;
    min-height: 6em;
    background: black;
    width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-shrink: 0;
	gap: 2.5em;
  }

a {
	font-family: gothic;
	font-weight: lighter;
	font-size: 250%;
	color: white;
}
nav {
	display: flex;
	justify-content: center;
	flex-direction: row;
	gap: .5em;
	min-width: 6em;
	position: sticky;
	top: 2.5em;
	size: 3em;
	width: 100%;
	height: 6em;
  }
  button{
	background: black;
	border-radius: 0em;
	border: 1.5px solid;
	color: #ffffff;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 90%;
	text-align: top;
	align-self: flex-start
  }

.wrapper {
	display: grid;
	grid-template-rows: repeat(2, 2fr);
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;
	gap: 1em 15em;
  }

.wrapper img {
	max-width: 50%;
	width: 50%;
  }

 button:hover,
.active {
  color: var(--c)
}

:hover,
.active {
  color: var(--c)
}

.color{
	color: var(--c);
	hyphens: auto;
	line-height: 1;
  }

.hidden {
	display: none;
  }