* {box-sizing: border-box;}

body {
    display: flex;
    justify-content: center;
    margin: 2.5% 20%;
    background-image: url(assets/background.png);
    background-attachment: fixed;
}

/*borders and other styling shit*/
nav, main {
    border: 8px ridge #DAA06D;
    border-radius: 5px;
    padding: 1%;
    background-color: #FFF8E7;
    box-shadow: 7px 7px 10px #00000080;
}

/*sidebar*/
nav {
    width: 20%;
    margin-right: 2%;
    height: 100%;
}

/*sidebar page buttons*/
.navButton {
    width: 100%;
    padding: 5%;
    margin: 2% 0%;
    border: 3px outset #a4a4a4;
    background-color: lightgray;
    font: italic 1em 'Times New Roman', serif;
    text-align: left;
    color: #100C08;
}

.navButton:hover {
    color: #FFF8E7;
    background-color: #69AC53;
    border: 3px outset #50873d;
}

/*disabled sidebar page buttons*/
.navButton-inactive {
    width: 100%;
    padding: 5%;
    margin: 2% 0%;
    border: 3px outset #a4a4a4;
    background-color: lightgray;
    font: italic 1em 'Times New Roman', serif;
    text-align: left;
    color: gray;
    text-decoration: line-through;
}

main {
    width: 78%;
    padding: 1% 3%;
}

hr {
    border: 3px outset #DAA06D;
    border-radius: 2px;
    width: 96%;
}


/*-----IMAGES CONTAINER (and images)-----*/
div.imgInline {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

img {
    margin: 2%;
}

.landscape  {width: 50%; box-shadow: 0 0 12px #00000080;}
.portrait   {width: 30%; box-shadow: 0 0 12px #00000080;}
.square     {width: 29%; box-shadow: 0 0 12px #00000080;}

/*gian shut the fuck up i swear (sidebar decor)*/
div.imgDecor {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.deco-blinkie   {width: 95%;}
.deco-button    {width: 45%;}

/*--------TEXT--------*/
h1  {
    font: italic bold 2.75em 'Arial', sans-serif;
    color: #FFF8E7;
    text-shadow: 4px 3px #00000080;
    background-color: #69AC53;
    border-radius: 3px;
    padding: 0% 1%;
    margin: 1.5% 0;
    letter-spacing: -3%;

}

h2, h3, h4 {
    font: bold 2.5em 'Arial', sans-serif;
    color: #6B4423;
    text-transform: lowercase;
    letter-spacing: -5%;
}

h2  {font-size: 2em; margin: 2% 0;}
h3  {font-size: 1.6em; margin: 1.8% 0;}
h4  {font-size: 1.35em; margin: 1.75% 0;}

h2.subtitle { /*this is the subtitle. goes after page title. yk??*/
    font: italic 0.9em 'Tahoma', sans-serif;
    text-transform: none;
    color: grey;
    margin: 0;
    margin-top: -1%;
}

a {color: #69AC53; text-decoration: none;} 
a:hover {text-decoration: underline;}

p, ul, ol {
    font: 1em 'Georgia', serif;
    color: #100C08;
    line-height: 1.75;
}

p {text-align: justify;}
ul, ol {line-height: 2;}

table {
    width: 80%;
    border: 2px solid #50873d;
    border-collapse: collapse;
    margin: 2.5% auto;
}

th {
    background-color: #50873d;
    font: bold italic 1.07em 'Arial', sans-serif;
    color: #FFF8E7;
    padding: 2.5%;
}

td {
    font: 1em 'Arial', sans-serif;
    text-align: center;
    vertical-align: middle;
    padding: 1.25%;
}

 tr:nth-child(odd) {background-color: #69AC5320;}
 
 td.imgTable {width: 30%;}

 /*PROFILE THING FOR ABOUT ME*/
.profile {
    display: flex;
    padding: 1%;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
}