/* This is a WIP for alternatively theming an upcoming subpage of my website. */

/*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'.*/
  background-color: #3eb3ba;
  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-image: url("http://wikidevry.neocities.org/Imgs/SandboxArt.jpg"); /* Make this a tileable background*/
  background-repeat: no-repeat; /*The part that repeats, try not to make it garish*/
  background-size: auto; /* Basically modifiers to specify how the BG img behaves*/
  }
.bawx {
  text-align: center;       /* I'd make the bg of this translucent if you have a complex image in the back*/
  background-color: rgba(0,0,000,0.75);
  border-style: ridge;
  border-color: #595959;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.orbBawx { /*Keeping it solely because it makes a plate underneath the star*/
  text-align: center;
  background-color: rgba(0,0,000,0.75);
  border-style: ridge;
  border-color: #595959;
  border-radius: 50%;
}

.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(#7fc2c6,#3eb3ba,#243434); /* 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;
}
.header img { /*Re-fits banner and doesn't make it hueg*/
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.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;
}
.threelane.sideR { /*Append this to the right box just by adding R in respective pages*/
  grid-area: right;
}
.threelane.mid {
  grid-area: main;
}
.footer {
  clear: both;
  grid-area: footer;
}
.flex { /*More specifics to follow adding onto this, rn I have to test flexboxes and grids before I integrate it with prior CSS */
  display: flex;
}
.active {
  background-color: #C14C45;
  border-radius: 5px;
}
.goofyIcon /*Solely to spin something, like my 3 piece icon*/
{
  animation: Orbital 8s linear infinite;
}
@keyframes Orbital {
  50% {transform: rotateY(360deg);}
}
.off7deg {
  transform: rotate(7deg);
}
/*Navigation bar guts, it's a finangled list made horizontal */
.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;
}
.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);
}

.sidebox { /*Stylizes the sideboxes next to the content box*/
  background: rgba(97, 97, 97,0.65);
  display: table;
  border-style: inset;
  border-color: #2f2f2f;
  border-width: 4px;
  border-radius: 7px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.stick { /* Keeps an element in view, helpful for news */
  position: sticky;
  justify-content: center;
  top: 0;
  padding: 45px;
  background-color: #6c548a;
  border: solid 7px #482078;
  z-index: 2; /*How front/back element is placed.*/
}

/*Default html text classes*/
p {
  color:white;
}

h1 { /*stylizes a header */
    color:white;
    font-size: 32px;
  }
h2 {
    color: white;
    background: linear-gradient(#7fc2c6,#3eb3ba,#243434);
    background-color:#526d6d;
    margin: 10px;
    padding: 40px;
    border-radius: 25px;
}
h4 {
    color: white;
    background: linear-gradient(#a1a1a1,#595959,#2b2b2b);
    background-color: #595959;
}
h5 {
  color: white;
}
strong {
 text-transform: uppercase; /* There's A multitude of text modifiers, but lets not play too heavily yet*/
}