:root{
	--secondary-bg: #aa6;
	--third-bg: #313624;
	--fourth-bg:#313624;
	--darken4: #0004;
	--darken8: #0008;
	--lightest:#fee;
	--light:#ade ;
	--text:#ffffff
}
body{
	background-image:linear-gradient(#0009,#1C211E), url("https://images.pexels.com/photos/16055148/pexels-photo-16055148.jpeg");
    background-position:center; 
    background-size:cover;
    background-repeat: no-repeat ;
    background-color:#1C211E;
	font-family: "Avenir Next", systems-ui,sans-serif;
	font-size: 22px;
	line-height: 1.4em;
	margin:0;
	color:#F0F7F4;
}
header{
	
    background-color: rgba(0,0,0, 0.4);
	background-size:cover;
	background-position: top;
	backdrop-filter: blur(5px);
	min-height:15vh;
	color
	grid-gap: 0px;
	}
h1{
	display: grid;
	grid-column: 1 / span 2;
	text-align: center;
	color:;
	font-size: 1.5vh;
	line-height: 3em;
	padding:0;
	text-shadow: 5px 5px 5px #1C211E;
}

h2{
font-size: 4vh;
line-height: 1em;
text-align: center;
text-shadow: 5px 5px 5px #1C211E;
}

h3{
display:grid;
grid-column: 1 / span 2;
text-align: center;
padding: 2em;
}

@keyframes arrive {

	from {
		opacity: 0;
		top: 4em;
	}
	to {
		opacity: 1;
		top: 0;
	}
	}
h1 span {
	display: inline-block;
	position: relative;
	}
h1 span:nth-child(1) {
	/*transform: scale(4);*/
	font-size: 400%;
	animation: arrive 1s both; 
	}
	
h3 span {
	display: inline-block;
	position: relative;
	}
h3 span:nth-child(1) {
	/*transform: scale(4);*/
	font-size: 400%;
	animation: arrive 1s both; 
	}
	
.card{
	width: 225px;
	height: 225px;
	text-align:center;
}
.grid-container img{
	border-radius: 25px;
	width:225px;
	height: auto;
	display:inline-block;
	overflow: hidden;
	
	}
	
.grid-container img:hover {
	hover: drop-shadow 10px 10px 15px #000);
	transform: scale(1.55)

	}
.grid-container img.text:hover {
	hover: none;
	}
img.wolf{
	display:grid;
	grid-column: 1 / span 4;
 	 margin: auto;
	}
	section.text{
	display: grid;
	grid-column: 2/ span 3;
	text-align: center;
	margin-left: 100px;
	margin-right: 100px;
	}
img.grid-item-1{
	max-width:225px;
	height: auto;
	margin-left: 60px;
	display: block;
}
ul.grid-item-2{
	list-style:none;
	padding:0;
	display:flex;
	flex-direction: row;
	justify-content: space-evenly;
	font-size: 1.5vw;
}
.grid-item-3{
	grid-column: 1 / span 4;
	max-width: auto;
	max-height: 350px ;
	background-color: #B3BFB8;
 	margin-right: auto;
	margin-left: auto;
	width: auto;
    box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);
    height: 1600px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 40px;
    text-align: left;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: 0.3s;
    width: 80%;
}


.grid-item-4{

justify-content: center;
grid-row-gap: 0px;
grid-column: 1 / span 4;

	max-height: 550px ;
	background-color: #B3BFB8;
 	margin-right: auto;
	margin-left: auto;
	width: auto;
    box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);
    height: 1600px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 40px;
    text-align: left;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: 0.3s;
    width: 80%;
}

}
.grid-item-5{
grid-column: 1 / span 1;

}
.grid-item-6{
grid-column: 2 / span 2;
text-align: center;

grid-row-gap:0px;
align-content:top;
}

.grid-item-7{
grid-column:4 / span 1:

}
.grid-item-8{
grid-column: 1 / span 4;
}

li.toplinks{

	font-family:  "Georgia";
	font-size:2vw;
	min-width: 10%;
	font-weight:bold;
	margin:.5em;

}

a.toplink{
	color:var(--lightest);
	background-color: #3C493F;
	padding: .4em .5em .3em;
	display:block;
	text-decoration: none;
	border-radius: 10px;
	}
.toplink a {
	transition: text-shadow 1s;
	display:block;
	
}
.toplinks a:link {color: white;}
.toplinks a:visited {color:  ;}
.toplinks a:hover {color: #9FBC7B; text-shadow: 2px 2px 1em #EBF1E4;} 
.toplinks a:active {}

.grid-container img:hover {
	

	}
.grid-container-header{
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.grid-container {
	display: grid;
	grid-template-columns: 200px auto;
	row-gap:5px;
	column-gap:5px;
	
}

.grid-item-3{
grid-row-start: 1;
  grid-row-end: 3;
}



/*
	grid-template-areas: 
	"header header header"
	"title title title"
	"main main main"
	"body body body"
	"main main main"

	
	;


.grid-item-1 {
	grid-template-areas: "header";
}
.grid-item-2 {
	grid-template-areas: "header";
}
.grid-item-3 {
	grid-template-areas: "title";

}
.grid-item-4 {
	grid-template-areas: "main";
	
}.grid-item-5 {
	grid-template-areas: "main";
}.grid-item-6 {
	grid-template-areas: "body";
}
.grid-item-7 {
	grid-template-areas: "body";
}
.grid-item-8 {
	grid-template-areas: "body";
}
.grid-item-9 {
	grid-template-areas: "footer";
}
.grid-item-10 {
	grid-template-areas: "footer";
}
}
*/