/* Menu doos of container */
.menu {
    position: absolute; /* Met absolute wordt bedoeld dat het geplaatst moet worden op een specefieke plek met gebruik van TOP, LEFT, RIGHT of BOTTOM */
    top: 0;
    left: 0;
    right: 0;

    height: 40px;
    background-color: rgba(100,100,100,0.2); /* RGB met opacity zodat het doorzichtig wordt */
}

/* Menu items */
.menu li{ 
    float: left; /* Door float komt alles naast elkaar */
    padding: 10px 10px;
}

/* Dit is voor de link */
.menu li a {
    text-decoration: none; /* zo haal ik die underline van de links weg */
    color:white
}

/* De titel */
h1 {
    font-family: "Black Ops One", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    margin-top: 60px;
    text-align: center;
    color: white;
}
/* Dit is de main achtergornd  */
html{ 
    color:white;
    height: 100%;
    background-image: url("images/slava-taukachou-AoHN1F7Pibo-unsplash.jpg");
    background-size: 100%;
    background-color: black;
}

/* Hiermee maak ik de achtergrond wat zwarter door de opacity aan te passen zodat de tekst beter leesbaar is */
body {
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    font-family: sans-serif;
}

/* Dit is voor de introductie tekst */
.introduction {
    padding: 20px 20%; 
    font-size: 16px;
    text-align: center;
}
.main {
    margin-top:50px;
}

.footer {
    position: fixed;
    bottom: 0;
    left:0;
    right:0;
    padding: 10px;
    font-size: 12px;
    text-align: center;
}
.content {
    width: 90%;
    margin: 0 auto;
}


.athletes { /* ik heb de foto's van de atleten in een soort doos gezet met deze width height en margin. De margin auto helpt de foto's centreren */
    width:900px;
    height: 300px;
    margin: 20px auto;
}
.athletes li { /* De foto's heb ik een width en een height gegeven en heb ik allemaal laten floaten naar links zodat het naast elkaar komt te staan */ 
    float: left;
    width: 300px;
    height:300px;
    position: relative; /* dit betekent dat als ik nu voor de code hieronder bottom bijvoorbeeld nul aangeef dat het dan niet naar de onderkant van de page gaat maar de onderkant van dit */ 
}
.athletes li img { /* hiermee worden de foto's grijs */ 
    width:100%;
    filter:grayscale(1)
}
.athletes a:hover img { /* hiermee gaat de grijze filter over de foto's weg als je met je muis over de foto's hovert */ 
    filter:grayscale(0)
}
.athletes li span { /* door position absolute komt de span onderin de doos en door de z-index komt de tekst met dat achtergrond kleur voor de foto inplaats van dat het erachter valt */ 
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.2);
    z-index: 1;
    padding: 20px;
    font-size: 20px;
    text-align: center;
}
.athletes li a {
    text-decoration: none;
    color:white;
}
.athletes a:hover span { /* als je op de foto hovert met je muis gaat de achtergrond kleur achter de tekst donkerder worden */ 
    background-color: rgba(0,0,0,0.4);
}