*{
   box-sizing: border-box;
   list-style: none;
}

.by-sa{
   height: 70px;
   width: 201px;
}

html{
   background-image: url("../background-images/BackgroundSpace.png");
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;

   font-family:'Courier New', Courier, monospace;
}
/* grid setup */
body{
   display: grid;
   grid-template-rows: 5vh repeat(2, 100px) auto auto auto auto 1fr;
   grid-template-columns: 1fr 200px 200px 680px 440px 1fr;
}
/* start of header syling and positioning */
header{
   grid-area: 2 / 2 / 4 / 4;
   z-index: 2;

   background-image: url("../background-images/100x50window400x200.png");
   background-size: 100% 100%;
   background-position: top left;
   background-repeat: no-repeat;
   height: 200px;
   width: 400px;

   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}
/* start of nav syling and positioning */
nav{
   grid-area: 4 / 2 / 6 / 3;
}

nav ul{
   margin: 0;
   padding: 0;
   list-style: none;
}
nav li{
   background-image: url("../background-images/50x25window200x100.png");
   background-size: 100% 100%;
   background-position: top left;
   background-repeat: no-repeat;
   height: 100px;
   width: 200px;

   display: flex;
   align-items: center;
   justify-content: center;

}

main #page-content-window{

}

main{
   grid-area: 3 / 3 / 7 / 5;
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   padding: 30px;
   padding-top: 100px;
}

main .background-top{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 596px;
   background-image: url("../background-images/content-window-top.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   z-index: 1;
}

main .background-stretch{
   position: absolute;
   top: 50px;
   left: 0;
   width: 100%;
   bottom: 50px;
   background-image: url("../background-images/content-window-stretch.png");
   background-size: 100% auto;
   background-repeat: repeat-y;
   z-index: 0;
}

main .background-bottom{
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 620px;
   background-image: url("../background-images/content-window-bottom.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   z-index: 1;
}

main .page-content{
   position: relative;
   z-index: 2;
}

.content-break{
   margin-top: 30px;
   position: relative;
   right: 30px;
}


.chat-background{
   grid-area: 3 / 5 / 5 / 6;
   background-image: url("../background-images/110x160window440x640.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   height: 640px;
   width: 440px;
}

aside{
   grid-area: 3 / 5 / 5 / 6;
   height: 600px;
   width: 400px;
   justify-self: center;
   align-self: center;
}