body {
  display: grid;
  grid-template-areas:
    "sidemenu topmenu"
    "sidemenu content";
  margin: 0px;
  grid-template-columns: 10vw 90vw;
  grid-template-rows: 10vh 90vh;
}


@font-face { 
	font-family: "Minecraft"; 
	src: url("https://sykawrf.online/Fonts/Minecraft.woff2") format("woff2"); 
}

/* main layout of site */ 

.topmenu {
  grid-area: topmenu;
  background-color: black;
  border-style: none none none solid;
  border-width: 2px;
  border-color: purple;
}

.sidemenu {
  grid-area: sidemenu;
  background-color: black;
}

.content {
  grid-area: content;
  background-image: url('Resources/Images/Content/spacebackground.gif');
  border-style: solid none none solid;
  border-color: purple;
  border-width: 2px;
  
  /* content area layout */
  display: grid;
  grid-template-areas:
    "spacetop spacetop spacetop"
    "spaceleft mainpage spaceright"
    "spacebottom spacebottom spacebottom";
  margin: 0px;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 3vh auto auto;
  
  
}


/* button styling */
.navbutton {
  height: 3%;
  Width: 84%;
  margin: 1.5vh auto 0px auto;
  border-radius: 0px;
  border: none;
  font-family: 'Minecraft';
  font-size: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-size: cover;
}


.snake {
  background-image: url(Resources/Images/Sidebar/Snake.jpg);
}

.tiger {
  background-image: url(Resources/Images/Sidebar/Tiger.jpg);
}

.cheetah {
  background-image: url(Resources/Images/Sidebar/Cheetah.jpeg);
}

.wolf {
  background-image: url(Resources/Images/Sidebar/Wolf.jpg);
}

.zebra {
  background-image: url(Resources/Images/Sidebar/Zebra.jpg);
}


.snake:hover {
  background-image: url('Resources/Images/Sidebar/Snake Red.jpg');
}

.tiger:hover {
  background-image: url('Resources/Images/Sidebar/Tiger Red.jpg');
}

.cheetah:hover {
  background-image: url('Resources/Images/Sidebar/pattern.jpeg');
}

.wolf:hover {
  background-image: url('Resources/Images/Sidebar/Wolf Red.jpg');
}

.zebra:hover {
  background-image: url('Resources/Images/Sidebar/Zebra Red.jpg');
}


.navbutton:hover mark {
  color: yellow;
  background: black;
}


/* scrolling text */
.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  vertical-align: bottom;
  text-align: right;
  color: green;
  width: 100%;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/* content layout elements */

.spacetop {
  grid-area: spacetop;
  margin: 0px;
}

.spacebottom {
  grid-area: spacebottom;
  margin: 0px;
  min-height: 3vh;
}

.spaceleft {
  grid-area: spaceleft;
  margin: 0px;
}

.spaceright {
  grid-area: spaceright;
  margin: 0px;
}

.mainpage {
  grid-area: mainpage;
  min-height: 600px;
  margin: 0px;
  background-color: black;
  border: 2px solid green;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: green;
  padding: 1.5%;
  font-size: 0.6vw;
}