/* CSS is what makes it pretty. It ISNT html, so remember that. Google is your friend, because you can actually
see the changes this time*/

body {
  font-size: 14px; /* There's other measurements. if you want nothing, just input '0'.*/
  background-color: #c14c45;
  color: black;
  float: left;
  font-family: Verdana, "Times New Roman", arial;
  border-style: groove;
  border-width: 5px;
  border-color: #E4E4E4;
  margin: 10px;
  padding: 10px;
  background-image: url("http://wikidevry.neocities.org/OSBackground.jpg"); /*OH MY GOD FINALLY */
  background-repeat: no-repeat;
  background-size: cover; /* Basically modifiers to specify how the BG img behaves*/
  }
.bawx {
  text-align: center;       /* The recc'd way to center things. The thing I'm aiming for*/
  background-color: rgba(255,255,255,0.75);
  border-style: ridge;
  border-color: #a6a6a6;
  border-radius: 15px;
}

/*Experimental zone for sandbox page, DONT TOUCH YET */

/*The flex prefixes are temporary so when the sandbox passes, all that's left is to delete the prefix and revamp the site w/o manually re-editing it.*/

.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(#803d39,#C14C45,#DBCBCB); /* 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
{
  animation: Orbital 8s linear infinite;
}
@keyframes Orbital {
  50% {transform: rotateY(360deg);}
}
.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;
  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;
  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);
}
/*Experimental zone for sandbox page, DONT TOUCH YET */

.sidebox { /*Stylizes the sideboxes next to the content box*/
  background: rgba(158, 158, 158,0.65);
  display: table;
  border-style: dashed;
  border-color: #D0D0D0;
  border-width: 4px;
  border-radius: 7px;
}

/*Default html text classes*/
h1 { /*stylizes a header */
    color:black;
    font-size: 32px;
  }
h2 {
    color: black;
    background-color:#AD9292;
    margin: 10px;
    padding: 40px;
    border-radius: 25px;
}
h4 {
    color: black;
    background-color: #a6a6a6;
}
h5 {
  color: black;
}
strong {
 text-transform: uppercase; /* There's A multitude of text modifiers, but lets not play too heavily yet*/
}