/* Custom Styling */

/* { border: thin solid cyan } */

/*
Look up colors on eg.
https://www.w3schools.com/colors/colors_hex.asp
*/

:root{
        --back: thistle;
        --text: black;
        --link: black;
        --code: SeaGreen;
        --mute: Grey;
        --edge: darkmagenta;
}

/* Change the side of sidebar */
/*
:root {
  --siderbar-width: 250px;
}
*/


h1{
    color: darkmagenta;
}
h2{
    margin: 0% 10% 2%;
}

p.subhead {
    text-align: center;
    margin: 0% 18% 2%;
}

.projectdescript {
    margin: 0% 10% 2%;
}


/* Menu Styling with colored boxes */
.projectdescript {
li a,
li a:visited {
    color: var(--edge);
}

li a:hover {
    color: var(--code);
}}

nav li a,
nav li a:visited {
    background: var(--text);
    color: var(--back);
    padding: 0.2rem 0.5rem;
}

nav li a:hover {
    text-decoration: none;
    background: var(--edge);
}



/* --- Gallery --- gridview på forsiden og tagpages gallery på projekt*/


.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  grid-gap: 1rem;
  margin-bottom: 2rem;
}

/* Gør noget ved billederne i grid/galleri*/


.grid-view a img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border: none;
}

/* Turn off grid, and show each image full width.*/

.gallery {
    display: initial;
}


.gallery a img {
    width: 100%;
    object-fit: initial;
    border: none;
    aspect-ratio: initial;
}


@media (max-width: 700px) {
    header h1 {font-size:5.4vw;}
    header h1 img {margin: 0 0rem;}
}