/*
CSS reference
https://www.w3schools.com/cssref/index.php

CSS tutorial
https://www.w3schools.com/css/default.asp

FÄRG
https://colorkit.co/color/1e0388/

https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_container
https://www.w3schools.com/css/css_grid_container.asp

*/

/* styling everywhere that isn't set to something else */
:root {
    --primary-bg-color: rgb(0, 0, 0);
    --primary-color: rgb(255, 255, 255);
    --secondary-color: rgb(100, 103, 103);
    --primary-font: arial;
}

/* the body that isn't set to something else */
body {
    background-color: var(--primary-bg-color);
    color: var(--primary-color);
    font-family: var(--primary-font);
}

/* header that isn't set to something else */
header {
    display: grid;
    width: 100%;
    grid-template-columns: auto auto auto;
    background-color: var(--primary-bg-color);
    justify-content: center;
}

/* whole list in the header*/
header ul {
    display: flex;
    width: 100%;
}

/* every element in the headers list */
header ul li {
    display: grid;
    padding: 20px;
    width: 300px;
    height: 100px;
    list-style-type: none;
}

/* every link in elements in the headers list */
header ul li a {
    display: grid;
    place-items: center;
    color: var(--primary-color);
    text-decoration: none;
    border: 3px solid white;
    border-radius: 20px;
}

/* the hover of every link in elements in the headers list */
ul li a:hover {
    background-color: var(--primary-color);
    color: var(--primary-bg-color);
    text-decoration: none;
}

/* decides styling in the footer that isn't set to something else */
footer {
    display: grid;
    width: 100%;
    grid-template-columns: auto auto auto;
    background-color: var(--primary-bg-color);
    justify-content: center;
}

/* whole list in the footer*/
footer ul {
    display: flex;
    width: 100%;
}

/* every element in the headers list */
footer ul li {
    display: grid;
    padding: 20px;
    width: 300px;
    height: 100px;
    list-style-type: none;
}

/* every link in elements in the footer list */
footer ul li a {
    display: grid;
    place-items: center;
    color: var(--primary-color);
    text-decoration: none;
    border: none;
    border-radius: 20px;
}

/* the hover of every link in elements in the footer list */
footer a:hover {
    background-color: var(--primary-bg-color);
    color: var(--primary-bg-color);
    text-decoration: none;
}

/* pictures in <body> */
img {
    height: 500px;
    width: auto;
    border-style: solid;
    border-color: var(--primary-color);
    border-width: 3px;
    border-radius: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-family: var(--primary-font);
    font-size: 30 px;
    color: var(--primary-color);
    text-align: center;
    text-decoration: none;

}

h2 {
    font-family: var(--primary-font);
    font-size: 18px;
    color: var(--primary-color);
    text-align: center;
    text-decoration: none;
}