/* html elements hebben in css geen prefix
   classes beginnen in css met een .
   id's beginnen met een # en kun je maar 1x gebruiken op een pagina */

/* CSS Specificity
   1. inline styles (in HTML element) - 1000
   2. IDs (#id) - 100
   3. Classes (.class), attributes ([type="text"]), pseudo-classes (:hover) - 10
   4. Elements (div, p, a) and pseudo-elements (::before, ::after) - 1
   5. Universal selector (*) and combinators (+, >, ~, ' ') - 0 */


/* achtergrond en globale stijlen
============================================= */
html {
    background: url(img/theface-smaller-topmargin.webp);
    background-size: 100%;
    /* font-family: monospace; */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    font-size: 20px;
}
h3 {
    margin: 3px 0px 2px 0px; /* andere marges dan standaard voor dit element */
}


/* media
============================================= */
img {
    max-width: 100%; /* zorgt ervoor dat afbeeldingen niet groter worden dan hun container */
}
img.background {
    max-width: none; /* overschrijft de algemene regel voor afbeeldingen, zodat deze afbeelding niet wordt beperkt in grootte */
}


/* indeling
============================================= */
.box {
    max-width: 1600px; /* als dit op een superwide scherm staat, wordt de inhoud niet helemaal uitgerekt */
    margin: 3% 0.5% 3% 0.5%; /* top right bottom left, de ruimte tussen de inhoud en de rand van het scherm */
    display: grid;
    /* grid-template-columns: 1fr 3fr 1fr; /* 3 kolommen, de middelste is 3x zo breed als de buitenste */
    grid-template-columns: 206px auto 206px; /* 3 kolommen, de buitenste zijn 206px breed, de middelste neemt de rest van de ruimte in */
    grid-template-areas:
        "upper upper upper"
        "links main rechterzijde"
        "footer footer footer";
    gap: 10px; /* ruimte tussen de grid items */
}

header, nav, main, footer {
    /* border: white solid 1px; */
    border-radius: 10px;
    height: max-content; /* de hoogte past zich aan aan de inhoud, in plaats van de hele hoogte van het grid gebied in te nemen */
    
}
header {
    grid-area: upper; /* grid-area: upper; betekent dat dit element in het grid gebied 'upper' komt te staan, zoals gedefinieerd in grid-template-areas */
}
nav.links {
    grid-area: links;
}
nav.rechts {
    grid-area: rechterzijde;
}
nav {
    background-color: rgb(37, 23, 48);
    padding: 0px 5px 0px 5px; /* ruimte tussen de inhoud en de rand van het element */
}
main {
    grid-area: main;
    background-color: rgba(0, 0, 0, 0.8); /* de a (4e positie) is voor transparantie*/
    padding: 0px 30px 30px 30px; /* ruimte tussen de inhoud en de rand van het element */
}
footer {
    grid-area: footer;
    text-align: center;
}


/* linkjes
============================================= */
a {
    text-decoration: none; /* geen onderstreepte links*/
}
nav a:link {
    color: #EFE5FF; /* Unvisited */
}
nav a:visited {
    color: #EFE5FF; /* Visited */
}
nav a:hover {
    color: red; /* Hover */
}
nav a:active {
    color: #7AB7FA; /* Active / ingedrukt */
}
main a {
    color: red;
    font-weight: bold;
}
main a:hover {
    text-decoration: underline;
}


/* lijsten
============================================= */
ul {
    padding: 0px 5px 0px 5px;
}

li::marker {
    /* content: none; /* geen standaard opsommingstekens */
    content: icon url(img/marker.png); /* een afbeelding als marker */
}

li {
    padding: 0 0 2px 0px; /* ruimte tussen de marker en de tekst */
    margin: 0px 0px 0px 12px; /* ruimte tussen de lijst items */
}


/* custom opmaak
============================================= */
.pop {
    background-color: rgb(201, 234, 11);
    font-weight: bold;
    color: #f10808;
}