@font-face {
  font-family: heading;
  src: url(../images/vast-shadow/VastShadow-Regular.ttf);
}
#container1 {
  display: grid;
  grid-template-areas: "nav nav  nav nav nav nav nav nav nav nav nav nav" "header header header header header header header header header header header header" "aside aside aside aside main main main main section section section section" "footer footer footer footer footer footer footer footer footer footer footer footer";
  width: 95%;
  margin: 10px auto;
}

nav {
  grid-area: nav;
  background-color: rgb(186, 204, 218);
  padding: 20px;
  text-align: center;
  top: 10px;
  position: sticky;
}
nav img[alt~=logo] {
  float: left;
  height: 50px;
  width: auto;
}
nav li {
  display: inline;
  list-style-type: none;
  margin-right: 1.5em;
}
nav li a {
  color: black;
}
nav .active {
  background-color: rgb(0, 160, 199);
  padding: 10px;
}

header {
  grid-area: header;
  background-image: linear-gradient(rgb(255, 200, 71), rgb(74, 157, 91), rgb(0, 160, 199));
  margin-top: 7px;
  text-align: center;
  padding-bottom: 10px;
  font-family: "heading", Courier, monospace;
}
header img[alt~=BlackCat] {
  display: block;
  border-radius: 50%;
  width: 100px;
  height: auto;
  margin: 0.5em auto;
}

aside {
  grid-area: aside;
}
aside img[alt~=jelly] {
  float: left;
  width: 500px;
  height: auto;
  margin: 0.5em;
}

main {
  grid-area: main;
  text-align: center;
  margin: 0.5em;
  padding: 4px 10px;
}

section {
  grid-area: section;
}
section video {
  margin: 0.5em;
  width: auto;
  height: 300px;
}

footer {
  grid-area: footer;
  background-color: rgb(186, 204, 218);
  padding: 20px;
  text-align: center;
  float: left;
}
footer img[alt~=logo] {
  float: right;
  height: 50px;
  width: auto;
}
footer img[alt~=Facebook] {
  float: left;
  padding-right: 0.5em;
  height: 50px;
  width: auto;
}
footer img[alt~=youtube] {
  float: left;
  height: 50px;
  width: auto;
}

.testbutton {
  font-family: arial;
  color: #F7F7F7 !important;
  font-size: 16px;
  text-shadow: 2px 2px 5px #000000;
  box-shadow: 1px 1px 1px #1C1C1C;
  padding: 10px 25px;
  border-radius: 10px;
  border: 2px solid #F0F8FF;
  background: #000000;
}

.testbutton:hover {
  color: #FFFFFF !important;
  background: #9E9E9E;
}

@media only screen and (max-width: 900px) {
  #container1 {
    display: grid;
    grid-template-areas: "nav" "header" "aside" "main" "section" "footer";
    width: 100%;
  }
}/*# sourceMappingURL=Style.css.map */