: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;
}
/*-----------------------------Grid layout-----------------------------*/

.grid-layout article{
    display: grid;
    grid-template-areas: 
    "title title title"
    "figure intro intro" 
    "table firms list";
}

.grid-layout .article-title{
    grid-area: title;
}

.grid-layout .hackerfig{
    grid-area: figure;
    width: 80%;
}

.grid-layout .article-intro{
    grid-area: intro;
}

.grid-layout .article-cyber-firms{
    grid-area: firms;
}

.grid-layout .tablesection{
    grid-area: table;
}

.grid-layout .firm-list{
    grid-area: list;
    margin-top: auto;
    margin-bottom: auto;
}
/*----------------------------Flexbox Layout------------------------*/
.flexbox-layout article{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
}

.flexbox-layout article h2{
    flex: 0 1 100%;
}
.flexbox-layout .notpetyafig{
    flex: 0 1 30%;
    width: 10%;
    height: 10%;
    padding: 0em;
    margin: 0em;
}

.flexbox-layout .notpetya-intro{
    flex: 0 1 100%;
}

.flexbox-layout .notpetya-impacts{
    flex: 0 1 100%;
}
/*----------------------------General layout-------------------------*/
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;
}

.picture{
    border-radius: 3%;
}

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

img{
    max-width: 100%;
}

.fig{
    border-radius: 3%;
}

/*------------------------Index Page Styling--------------------------*/
ul{
    margin: 1.5em;
}
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{
    background-color: var(--blue-contrast-color);
    padding: 3em;
    border: .75em solid var(--gray-contrast-color);
    margin: auto;
    max-width: 35%;
}

fieldset{
    margin: 1em;
    border: .2em solid var(--gray-contrast-color);
}

legend {
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 1;
}

label{
    color: var(--main-text-color);
    background-color: var(--blue-contrast-color);
}

input[type="text"]{
    background-color: var(--blue-contrast-color);
    color: var(--main-text-color);
    border: 0;
    border-bottom: medium solid var(--red-contrast-color);
}

input[type="checkbox"]{
    width: 2em;
    margin: .1em;
}

input[type="radio"]{
    width: 2em;
    margin: .1em;
}

textarea{
    background-color: var(--blue-contrast-color);
    color: var(--main-text-color);
    border: 0;
    border-bottom: medium solid var(--red-contrast-color);
    font: var(--standard-font);
}

select{
    background-color: var(--blue-contrast-color);
    color: var(--main-text-color);
    border: 0;
    border-bottom: medium solid var(--red-contrast-color);
    font: var(--standard-font);
}

input[type="submit"]{
    background-color: var(--red-contrast-color);
    color: var(--blue-contrast-color);
    font: var(--standard-font);
    width: 30%;
    border: thin solid var(--gray-contrast-color);
    border-radius: .25em;

}

/*---------------------------Crazy page-----------------------------*/

.crazy h1, .crazy h2, .crazy h3{
    text-shadow: .15em .15em 5px var(--red-contrast-color);
}

.crazy article, .crazy h1{
    background: repeating-linear-gradient(to bottom right, var(--blue-contrast-color), darkblue, var(--blue-contrast-color) 20%);
}

.crazy figure:hover{
    width: 40%;
    height: 40%;
}

.crazy h1, .crazy h2, .crazy h3{
    animation-name: changeColor;
    animation-duration: 4s;
    animation-delay: 1s;
}

@keyframes changeColor{
    0% { color: var(--main-text-color);}
    33% { color: var(--blue-contrast-color);}
    66% { color: var(--red-contrast-color);}
    100% { color: var(--main-text-color);}
}