/* This should be the About page css, which is supposed to give real bubbly Aero/Metro vibes. Of course, the real grunt work is the pictures to sell the illusion. */

/*Future Wiki, There are so many other properties that you have yet to mess with. You may need to reincorporate some of these into the first stylesheet */
body {
  font-size: 14px; /* There's other measurements. if you want nothing, just input '0'.*/
  color: #2e2e2e;
  float: left;
  font-family: Verdana, "Times New Roman", arial;
  border-style: groove;
  border-width: 5px;
  border-color: #1b1b1b;
  margin: 10px;
  padding: 10px;
  background-position: left top;
  }
  html  { /*Just straight up locks the background image to display*/
  background: url("http://wikidevry.neocities.org/Imgs/SandboxArt.jpg") no-repeat center fixed;
  background-size: cover;
  }
.bawx {
  text-align: center;       /* I'd make the bg of this translucent if you have a complex image in the back*/
  border-style: ridge;
  border-color: rgba(139, 199, 141, 0.55);
}
.header { /* Honestly if I can get the sidelines from the grid to work I might just change the class ids so my entire site can just*/ 
    display: flex;
    color: #a6a6a6;
    background: linear-gradient(#e1e1e1,#cba275,#b17e23); /* I wonder if I can use rgba for this...*/
    background-color: #C14C45;
    border-style: outset;
    border-width: 3px;
    border-left-width: 5px;
    border-right-width: 5px;
    border-color: grey;
    grid-area: header;
    border-radius: 48px;
    box-shadow: 3px 10px 10px 5px rgba(0,0,0,0.75);
}
.header img { /*Re-fits banner and doesn't make it hueg*/
  width: 100%;
  height: 100%;
  object-fit: scale-down;
      border-radius: 45px;
}
.midgrid { /*MAKE SURE TO MAKE THIS ACTIVE OR THE GRID WON'T START*/
  display: grid;
  grid-template-areas:
    'left main main main right'
    'left main main main right'
    'left main main main right';
  padding: 5px;
  gap: 5px;  
}
.threelane.side {
  grid-area: left;
  transform: rotateY(5deg);
  position: relative; /*Essential for offsetting any elements.*/
  top: 30px;
  width: 300px;
  animation: fadeUp2 1.25s;
}
.threelane.sideR { /*Append this to the right box just by adding R in respective pages*/
  grid-area: right;
  transform-style: preserve-3d;
  transform: rotateY(-5deg);
  position: relative; 
  top: 30px;
  width: 300px; /* To prevent excessively long text from ruining the other neighboring elements*/
  animation: fadeUp 1.25s;
}
.threelane.mid {
  grid-area: main;
  background-color: rgba(0,0,0,0.55);
  position: relative;
  box-shadow: 3px 10px 10px 5px rgba(0,0,0,0.75);
}
.footer {
  clear: both;
  grid-area: footer;
}
/*Navigation bar guts, it's a finangled list made horizontal */
.nav {
  background-color: rgba(0,0,0,0.45);
  border-radius: 15px;
  box-shadow: 3px 10px 10px 5px rgba(0,0,0,0.75);
}
.nav li { /*Navbar to scale appropriately*/
  border-color: #a6a6a6;
  margin: 0;
  padding: 0;
  justify-content: center;  
  overflow: hidden;
}
.nav img {
  opacity:0.65;
  width: 110px; /* For animation on the navbar, set the proper sizing.*/
  height: 38px;
  transition-duration: 0.75s;
  transition-property: width, height;
  cursor: crosshair;
  border-radius: 10px; /*This clips out the white corners as much as possible in the navbar*/
}
.nav img:hover { /*Makes the image 'activate' to clue viewer that it can be clicked on. See if I can make it change both img and bg opacities on hover.*/
  opacity: 1;
  width: 220px; /* When specified with prior transition property, will transition to 'end' shape*/
  height: 76px;
}
.nav ul {  /* I got this from W3Schools, sorry*/
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  flex-direction: row;
}
.nav li {
  float: left;
  border-right: 1px dotted #A2423C;
}
.nav li:last-child { /*Specifies what to do with last in class, in this case, don't make another border line */
  border-right: none;
}
.nav li a {
  display: block;
  padding: 5px 3px;
  text-align: center;
  text-decoration: none;
}
.nav li a:hover {
  background-color: rgba(17,17,17,0.45);
}
.entryNav { /*Turns a list of iframe-links into pretty buttons instead*/
  background-color: rgba(177,126,35,0.15);
  border-radius: 2px;
  border-style: groove;
}
.entryNav ul {
  list-style-type: none;
  overflow: hidden;
  flex-direction: row;
}
.entryNav li {
  float: left;
  border-right: 1px dotted #A2423C;
  text-align: center; /*Input bawx code so that it auto-applies instead of manually listing it in HTML*/
  /*background-image: radial-gradient(#798281,#47494a); */
  border-style: groove;
  border-color: #868a8b;
  padding: 5px;
}
.entryNav li a {
  display: block;
  padding: 1px 1px;
  text-decoration: none;
  text-align: center;
}
.sidebox { /*Stylizes the sideboxes next to the content box*/
  display: block;
  transform-style: preserve-3d;
    background-image: linear-gradient(rgba(108,131,105,0.75), rgba(108,131,105,0.45), rgba(108,131,105,0.75));
  border-style: inset;
  border-color: rgba(139, 199, 141, 0.8);
  border-width: 4px;
  border-bottom-left-radius: 135px;
  border-bottom-right-radius: 135px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  box-shadow: 3px 10px 10px 5px rgba(0,0,0,0.75); /*In order: radius, horiz, vert, blur amt, color*/
}
@keyframes fadeUp {
  0% {opacity: 0; transform: translateX(20px);} /*So use 0% to set an element into place before an animation*/
  80% {opacity:1; transform: translateY(-20px); transform: rotateY(-5deg);} /*translate = just move element in XYZ mode*/
}
@keyframes fadeUp2 {
  0% {opacity: 0; transform: translateX(20px);}
  80% {opacity:1; transform: translateY(-20px); transform: rotateY(5deg);}
}
.sidebox3D { /* enables transforms to be 3D, but only if it's outer nested*/
  perspective: 100px;
}
/*Default html text classes*/
p {
  color:white;
}
.circleImg {
  border-radius: 50%
}
h1 { /*stylizes a header */
    color:white;
    font-size: 32px;
  }
h2 {
    color: white;
    background: linear-gradient(#6c8369,#a1b59a,#bec7bb);
    background-color:#526d6d;
    margin: 10px;
    padding: 40px;
    border-radius: 25px;
    border-style: groove;
    border-color: rgba(108,131,105,0.5);
}
h4 {
    color: white;
    background: linear-gradient(#a1a1a1,#595959,#2b2b2b);
    background-color: #595959;
}
h5 {
  color: white;
}
h6 {
  color: #4ba63f;
}
strong {
 text-transform: uppercase; /* There's A multitude of text modifiers, but lets not play too heavily yet*/
}