/* Menu 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 */
    /* Dit betekent dat de menu dus helemaal bovenaan zit en van links helemaal naar rechts */
    top: 0;
    left: 0;
    right: 0;

    height: 40px;
    background-color: rgba(100,100,100,0.2); /* Hier gebruik ik RGB kleuren met wat opacity */
}

/* menu items */
.menu li{ 
    float: left; /* Float left helpt om de items allemaal in 1 lijn naast elkaar te zetten */
    padding: 10px 10px;
}

/* links in de menu */
.menu li a {
    text-decoration: none; /* om de onderstreping van de links weg te halen */
    color:white
}

/* Main heading */
h1 {
    font-family: "Black Ops One", system-ui; /* Dit is de speciale font voor de titel van Google.fonts */
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    margin-top: 60px;
    text-align: center;
    color: white;
}
/* Main achtergrond van de pagina */
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;
}

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

.footer {
    position: fixed; /* Met positie fixed wordt bedoeld dat ook als je naar beneden scrollt of omhoog dat de footer altijd op dezelfde plek op je scherm blijft */ 
    bottom: 0;
    left:0;
    right:0;
    padding: 10px;
    font-size: 12px;
    text-align: center;
}
.content {
    width: 90%;
    margin: 0 auto; /* door auto met een vaste breedte te gebruiken wordt het automatisch gecentreerd */ 
}

.athlete-introduction {
  font-size:14px;
  line-height: 18px;
  padding: 10px;
}
.athlete-introduction p {
  padding-bottom: 14px;
}
.main-column { 
  float:left;
  width: 50%;
}
/* door deze twee columns te gebruiken wordt de page gesplitst in twee en zo kan je gemakkelijk de tekst en foto's indelen */
.side-column {
  float:left;
  width:50%;
}

.image-gallery li { /* door dit te gebruiken worden de foto's die ik toevoeg automatisch verandert naar dit formaat en wordt het een soort collage */
  float:left;
  width:45%;
  padding: 5px;
}

.image-gallery img { /* de foto wordt automatisch hierdoor verandert naar een juiste formaat want het neemt 100% op van dat stukje waar het plaatje in zit */ 
  width:100%;
}
table.facts tr {
  border-bottom: 1px solid #aaa;
  font-size: 14px;
}
table.facts th {
  border-top: 1px solid #aaa;
}
table.facts td {
  padding: 5px;
}
table.facts th {
  padding: 8px;
  background-color: rgba(255,255,255,0.3); /* hiermee wordt dit stukje van de table een andere kleur en is het een beetje doorzichtig en is de tekst in uppercase letter */ 
  text-transform: uppercase;
  
}
tfoot { 
	background-color: rgba(255,255,255,0.3);
}
caption {
	caption-side:top;
	padding:5px;
	font-size:10px;
}

form {
	width: 400px;
	margin: 0 auto; /* center horizontaal */
	background: rgba(0,0,0,0.4);
}
.form-item, .form-action {
	clear: both; /* zie commentaar hieronder */ 
	padding: 10px;
}
.form-item label, .form-item input, .form-item textarea, .form-item select {
	float:left; /* hiermee komt alles netjes naast elkaar en de clear hierboven zorgt ervoor dat de tekst onder elkaar komt */ 
}

.form-item label {
	font-size:12px;
	padding-right: 10px;
	width: 90px;
}
.form-item label.checkbox-label, .form-item label.radio-label {
	width: auto;
}

.about p {
	margin: 10px 0;
}

.about ul {
	padding-left: 20px;
	list-style-type: disc;
}

.about ol {
	padding-left: 20px;
	list-style-type: decimal;
}

.about-image {
	float:left;
	width:300px;
	margin-right:10px;
}

.content.about {
	width: 70%;
}