body{
    background-color: white;
    margin: 0px;
}
.headerContainer{
    top: 0px;
    /* background-color achtergrond kleur van dit blok */
    background-color: rgb(48, 48, 48);
    height: 75px; /* height = de hoogte van dit blok (naar beneden) */
    margin: 0; /* margin = de afstand naar beneden (in px) wanneer dit blok begint vanaf het vorige blok. */ 
    top: 0px;
    width: 100%;
    position: absolute;
}
.headerList{
    list-style: none; /* list-style = de indicator voor een item in de lijst zoals een stip of romeins cijfer */
    padding: 0; /* padding = de afstand dat de content vanaf de hoek van het blok links boven begint (naar rechts en beneden) */
}
.listLeftRoot{
    list-style-type: none;
    top: 0px;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.WebpageContainer{
    padding-top: 75px;
    float: center;
    z-index: 2;
    min-height: 90vh;
}
.floatLeft{
    float: left;
}
.floatRight{
    float: right;
}
.displayInline{
    display: inline-block;
}
.headerListElement{
    display: inline-block;
    color: black;
    text-align: center;
    padding: 10px;
    height: 25px;
    width: max-content;
    text-decoration: black; /* makes things like underlines (for links / href's) go away */
    position: relative; 
    transform: translate(-50%, 0%);
}
.headerListElement:hover{
    
    background-color: rgba(59, 59, 59, 0.795);
}
.footer{
    clear: both;
    position: relative;
    /* bottom: 0px; */
    width: 100%;
    height: 40px;
    background-image: linear-gradient(-90deg, rgb(190, 190, 190), rgb(110, 110, 110), rgb(190, 190, 190));
    transform: translate(0%, 100%);
}
/* Classes used for the Project Previews */
.downloadButtonTheOutpost{
    width: 15%;
    height: 100%;
    float: right;
    clear: both;
    margin-right: 13%;
    border-radius: 75px;
    transform: scale(0.75) translate(-30%, -155%);
}
/* Left Sided Project preview: */
.projectDescriptionLeft{
    float: right;
    width:  45vw;
    position: sticky;
    margin-right: 5vw;
}
.projectImageLeft{
    float: left;
    width: 40vw;
    height: 100%;
    margin-left: 7vw;
    position: sticky;
}
/* Right Sided Project preview: */
.projectDescriptionRight{
    float: left;
    width:  45vw;
    position: sticky;
    margin-left: 5vw;
}
.projectImageRight{
    float: right;
    width: 40vw;
    height: 100%;
    margin-right: 6vw;
    position: sticky;
}

/* actual projects: */
.outpostFirstImage{
    float: left;
    margin-left: 6vw;
    width: 35vw;
    height: 100%;
}
.outpostFirstTextBlock{
    float: right;
    margin-right: 17vw;
    width: 35vw;
    position: sticky;
}
.outpostLightsVideo{
    float: right;
    margin-right: 5vw;
    width: 35vw;
    height: 100%;
    transform: translate(0%, -18%);
}
.outpostSecondTextBlock{
    float: left;
    margin-left: 10vw;
    width: 35vw;
    position: sticky;
}
.outpostThirdTextBlock{
    float: left;
    margin-left: 10vw;
    width: 35vw;
    position: sticky;
}
.outpostKeySystemVideo{
    float: right;
    margin-right: 5vw;
    width: 35vw;
    height: 100%;
    transform: translate(0%, -10%);
}

/* Text fonts */
.normalText{ /* normal text */
    line-height: 125%;
    font-family: 'Courier New';
    color: rgb(55, 55, 55);
}
.smallNormalText{
    line-height: 100%;
    font-family: 'Courier New';
    color: rgb(55, 55, 55);
    font-size: 0.8em;
}
.largeNormalText{
    font-family: 'Courier New';
    color: rgb(55, 55, 55);
    font-size: 1.2em;
}
.largeHeaderText{  /* Header text */
    font-family: 'Courier New';
    line-height: 125%;
    color: rgb(40, 40, 40);
    font-size: 2em;
    font-weight: bold;
    height: 10vh;
}
.mediumHeaderText{
    font-family: 'Courier New';
    line-height: 125%;
    color: rgb(48, 48, 48);
    font-size: 1.8em;
    height: 8vh;
    font-weight: bold;
}
.smallHeaderText{
    font-family: 'Courier New';
    line-height: 100%;
    color: rgb(48, 48, 48);
    font-size: 1.3em;
    height: 4vh;
    font-weight: bold;
}
.centeredText{
    text-align: center;
}
.hyperlinkText{
    color:rgb(6,69,173);
    text-decoration: underline;
}
.footerText{
    color:rgb(22, 22, 22);
    text-align: center;
    font-weight: bold;
    top: 10px;
    position: relative;
    letter-spacing: 0px;
    font-family: 'Courier New';
}
.headerText{
    color:rgb(22, 22, 22);
    font-size: 1.1em;
    font-weight: bold;
    bottom: 12px;
    position: relative;
    letter-spacing: 1px;
    font-family: 'Courier New';
    text-decoration: none;
}
.downloadRobertoCVButtonNL{
    position: absolute;
    right: 1%;
    margin-top:1.5%;
	border-radius: 25px;
	width: 18vw;
}
.downloadRobertoCVButtonEN{
    position: absolute;
    right: 1%;
    margin-top:6%;
	border-radius: 25px;
	width: 18vw;
}
.mainScreenParralax{
    background-image: url('/Resources/Images/Parrelex_wallpaper.png');
    height: 95vh;
    width: 100%;
    
    box-sizing: border-box;
    transform-style: preserve-3d;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.robertoPictureOnMainScreen{
    height: 30vh;
    margin-bottom: 0px;
    border-radius: 50%;
    position: relative;
    transform: translate(-50%, 0);
}