/* 1. MAIN BODY SETTINGS */

body {
  background-color: black;
  height: 100%;
  cursor: url('images/cursor_Default.png'), auto;
}

/* 2. BOXES AND SPACING SETTINGS*/

/* Main Boxes */
.box {
  height: auto;
  width: auto;
  text-align: center;
  display:flex;
  justify-content: center;
  align-items: center;
}
.textBoxColumn {
  border-radius: 5px;
  height: auto;
  width: auto;
  text-align: left;
  display:flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  margin: 20px;
}
.textBoxRow { 
  border-radius: 5px;
  height: auto;
  width: auto;
  text-align: left;
  display:flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  margin: 15px;
}

/* Select Use Boxes and Spacing */

.textbox { /* About Page Box*/
  border-radius: 20px;
  height: auto;
  width: auto;
  text-align: left;
  display:flex;
  justify-content: left;
  align-items: center;
  margin-right: 20px;
  margin-left: 20px;
}
.GameContent { /* Game content textbox */
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0.5em;
  width: 90%;
  text-align: left;
}

.spaced { /* footer spacing */
  margin-top: 10px
}
.coderow{
  height:280px;
  margin: 35px;
}
.textMargins{
  text-indent: 15px;
}


/* Backgrounds and Colors */

.pale {
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  background-color: rgba(255, 255, 255, 0.966);
}
.dark{
  background-color: #000000cd;
}
.palegrid {
  border-radius: 5px;
  margin: 20px;
  align-self: column;
  flex-direction: column;
  background-image: url(images/Background2.png);
  background-size: contain;
}
.paleblue {
  border-radius: 5px;
  margin: 20px;
  align-self: column;
  flex-direction: column;
  background-image: url(images/BackgroundMain.png);
  background-size: contain;
}
.Black { /* Header Color 1 */
  height: 3px;
  width: 100%;
  background-color: white;
}
.White { /* Header Color 2 */
  height: 15px;
  width: 100%;
  background-color: black;
}
.whitetext{
  color: white;
}

/* 3. GRID TEMPLATE SETTINGS */

/* Base Grid Template */
.theHead {
  background-color: black;
  color: white;
  flex-direction: column;
}
.theFoot {
  background-color: black;
  color: white;
  column-gap: 5px;
}

.grid {
  display: grid;
  background-color: #fff;
  border: 1px solid #000;
  row-gap: 0px;
}

/* Side Content Grid Template Layout */
.grid-template-area-side {
  grid-template-areas: 
  "header header header header header header header header header"
  "sidebar1 content1 content1 content2 content2 content3 content3 content4 content4"
  "sidebar1 content1 content1 content2 content2 content3 content3 content4 content4"
  "footer footer footer footer footer footer footer footer footer";
}
.grid-template-area-side .theHead {
  grid-area: header;
}
.grid-template-area-side .theLeftSide {
  grid-area: sidebar1;
  background-image: url(images/movingBackground.gif);
  background-repeat: no-repeat;
  background-position: center;
  
}
.grid-template-area-side .Main1 {
  grid-area: content1;
  background-image: url(images/CoverContent1.png);
}
.grid-template-area-side .Main2 {
  grid-area: content2;
  background-image: url(images/CoverContent2.png);
}
.grid-template-area-side .Main3 {
  grid-area: content3;
  background-image: url(images/CoverContent3.png);
}
.grid-template-area-side .Main4 {
  grid-area: content1;
  background-image: url(images/CoverContent5.png);
}
.grid-template-area-side .Main5 {
  grid-area: content2;
  background-image: url(images/CoverContent4.png);
}
.grid-template-area-side .Main6 {
  grid-area: content3;
  background-image: url(images/CoverContent7.png);
  background-size: cover;
}
.grid-template-area-side .Main7 {
  grid-area: content4;
  background-color: black;
  margin: 0px;
}
.grid-template-area-side .theFoot {
  grid-area: footer;
}

.Layer{
  background-repeat: no-repeat;
  background-position: center;  
  text-orientation: upright;
  align-items:center;
}

/* 5. GRID GAP SETTINGS */

.grid-gap {
  margin-top: 60px;
  grid-template-columns: auto auto;
  grid-column-gap: 120px;
  grid-row-gap: 150px;
  background-color: rgba(128, 128, 128, 0);
  border: 1px rgba(0, 0, 0, 0);
}
.grid-gap-page {
  grid-row-gap: 100px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px rgba(0, 0, 0, 0);
}

/* 6. BUTTONS SETTINGS */

/* Button Sizes */
.Button { /* Home Buttons */
  border-radius: 0.5em;
  border: 3px solid rgba(39, 39, 40, 0.445);
  width: 200px;
  padding: 15px;
  margin: 0px;;
  text-align: left;
}
.bigButton { /* Back to Page Button */
  border-radius: 0.5em;
  border: 3px solid rgb(232, 232, 232);
  width: auto;
  padding: 20px;
  margin: 15px;
  text-align: center;
  color: white;
}
.smallButton { /* Navigation Pannel Buttons */
  border-radius: 0.5em;
  border: 4px solid rgba(246, 246, 246, 0.8);
  width: 200px;
  padding: 5px;
  margin: 5px;
  text-align: center;
  color:white;
}

/* Button Colors */
.Blue {
  background-color: rgba(173, 170, 224, 0.9);
}
.Yellow {
  background-color: rgba(233, 222, 194, 0.9);
}
.Pink {
  background-color: rgba(233, 199, 198, 0.9);
}
.Red {
  background-color: rgba(221, 92, 96, 0.444);
}
.Light {
  background-color: rgba(239, 239, 245, 0.932);
}

/* 7. URL Interaction Settngs */

a {

  color: black; /* Default link color */

  text-decoration: none; /* Remove underline on hover */

  cursor: url('images/cursor_Point.png'), auto;


}
a:visited {

  color: black; /* Different color for visited links */

  text-decoration: none; /* Remove underline on hover */

}
a:hover {

  color: rgb(255, 255, 255); /* Darker color on hover */

  text-decoration: none; /* Remove underline on hover */

  cursor: url('images/cursor_Point.png'), auto;

}

b {

  color: white; /* Default link color */

}

c {

  color: rgb(145, 181, 238); /* Default link color */

}
c:visited {

  color: rgb(14, 19, 41); /* Different color for visited links */

}
c:hover {

  color: rgb(255, 255, 255); /* Darker color on hover */

}