:root {
    --main-bg-image: url("../images/hackingbg.jpg");
    --main-text-color: lightgray;
    --blue-contrast-color: rgba(52, 64, 90, 0.8);
    --gray-contrast-color: gray;
    --red-contrast-color: red;
    --standard-font: 110% Times New Roman, serif;

}

*{
    margin: 0em;
    padding: 0em;
}

body {
    background-image: var(--main-bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--main-text-color);
    font: var(--standard-font);
    padding: 0em;
    margin: 0em;
}

article {
    background-color: var(--blue-contrast-color);
    padding: 3em;
    border: .75em solid var(--gray-contrast-color);
    margin: 2em 5em 5em 5em;
}

a:hover {
    background-color: var(--gray-contrast-color);
}

h1 {
    text-transform: Uppercase;
    text-align: center;
    background-color:var(--blue-contrast-color);
    padding: .5em;
    border: .25em solid var(--gray-contrast-color);
    margin: 1em .5em;

}

p{
    text-indent: 2em;
    text-align: left;
    text-align: justify;
    margin: .75em;
}

h2{
    margin: .75em;
}

h3{
    margin: .75em;
}

a{
    color: var(--red-contrast-color);
}

nav a:link{
    background-color: var(--blue-contrast-color);
    color: var(--red-contrast-color);
    text-decoration: none;
}

nav a:hover{
    text-decoration: underline;
    background-color: var(--red-contrast-color);
    color: var(--blue-contrast-color);
}

nav a{
    display: inline-block;
    width: 19%;
}

nav{
    border: thin solid var(--gray-contrast-color);
    background-color: var(--blue-contrast-color);
    text-align: center;
    margin: 0em;
}

footer{
    float: left;
    background-color: var(--blue-contrast-color);
    padding: .15em .75em;
    border: thin solid var(--gray-contrast-color);
    margin: 0em 2em 5em 5em;
    text-align: center;
}

figure{
    float: none;
    text-align: center;
    width: 20%;
    padding: 1em;
    border: .25em solid var(--gray-contrast-color);
    margin: 3em;
    align-content: center;
}

figcaption{
    border: thin solid var(--red-contrast-color);
    font-weight: bold;
}

cite{
    font-size: xx-small;
}

.picture{
    border-radius: 3%;
}

.hackerfig{
    float: right;
    margin: 1em;
}

img{
    max-width: 100%;
}

.notpetyafig{
    float: right;
}

.fig{
    border-radius: 3%;
}

/*------------------------Index Page Styling--------------------------------*/
ul{
    margin: 1.5em;
}
li{
    margin-right: 80%;
}
li:nth-child(even){
    background: var(--gray-contrast-color);
}
li:nth-child(odd){
    background: var(--blue-contrast-color);
}
table {
    border: .5em solid var(--gray-contrast-color);
    border-collapse: collapse;
    width: 80%;
    margin: auto auto;
}

th{
    font-weight: bold;

}

.tablesection{
    float: none;
}

caption{
    font: 150% bold, serif;
    text-align: center;
    padding: .5em;
    border: dotted var(--gray-contrast-color);
    margin: 0em;
    background-color: var(--blue-contrast-color);
}

td,th {
    padding: 2%;
    border: medium solid var(--main-text-color);
    margin: 0em;
}

tr:nth-child(even){
    background-color: var(--gray-contrast-color);
}
tr:nth-child(odd){
    background-color: var(--blue-contrast-color);
}

.tablesource{
    text-align:center;
}
::selection{
    background-color: var(--red-contrast-color);
    color: var(--blue-contrast-color);
}


/*------------------------form styling--------------------------------*/

.noIndent{
    text-indent:unset;
}

form{
    align-content: center;
    background-color: var(--blue-contrast-color);
    padding: 3em;
    border: .75em solid var(--gray-contrast-color);
    margin: 2em 5em 5em 5em;
}
fieldset{
    border: .2em solid var(--gray-contrast-color);
}