/* Dit is het CSS document voor mijn portfoliowebsite. De code spreekt voor zich maar waar ik het van belang vind heb ik een notitie toegevoegd.
Dit is een compleet gestolen idee maar ik vond het wel handig. Hieronder is een lijst met ongeveer op welke regel de onderdelen te vinden zijn. Veel leesplezier!*/

/* ----------------------------------------------------------------------- */
/* Fonts / Regel 20-225 */
/* Skip the header / Regel 225-240 */
/* Header desktop / Regel 240-295 */
/* Header mobile / Regel 295-365 */
/* Homepage grid / Regel 365-375 */
/* Homepagehero / Regel 375-435 */
/* Welkomstbericht mobile / Regel 435-450 */
/* Homepage / Regel 450-580 */
/* Contact grid/ Regel 580-590 */
/* Contact / Regel 590-670 */
/* Footer / Regel 670-685 */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Fonts voor desktop */

p {
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	font-size:18px;
	margin:1rem;
}

h1{
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	font-size:25px;
	font-style:italic;
	margin:1rem;
}


h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight:bold;
	font-size:30px;
	margin:1rem;
}

h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	font-size:30px;
	margin:1rem;
}

q {
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	font-size:40px;
	font-style:italic;
	margin:10px;
}

cite {
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	font-size:40px;
	font-style:italic;
	margin:10px;
	color:#FFFFFF
}
/* ----------------------------------------------------------------- */
/* Fonts voor kleinere desktop schermen */

@media (max-width:1600px) {
	h1 {
		font-size:22px;
	}
	
	q {
		font-size:35px;
	}
	
	cite {
		font-size:35px;
	}
}

@media (max-width:1400px) {
	h1 {
		font-size:20px;
	}
	
	q {
		font-size:32px;
	}
	
	cite {
		font-size:32px;
	}
}

@media (max-width:1200px) {
	h1 {
		font-size:18px;
	}
	
	h2 {
		font-size:26px;
	}
	
	q {
		font-size:30px;
	}
	
	cite {
		font-size:30px;
	}
}

@media (max-width:1150px) {
	h1 {
		font-size:16px;
	}
	
	h2 {
		font-size:24px;
	}
	
	q {
		font-size:28px;
	}
	
	cite {
		font-size:28px;
	}
}
/* ----------------------------------------------------------------- */
/* Fonts voor tablet */

@media (max-width:996px) {

	h1 {
		font-size:16px;
	}
	
	q {
		font-size:24px;
	}
	
	cite {
		font-size:24px;
	}	
	
	p {
		font-family: 'Montserrat', sans-serif;
		font-weight:400;
		font-size:16px;
		margin:1rem;
	}

	h2 {
		font-family: 'Montserrat', sans-serif;
		font-weight:bold;
		font-size:24px;
	}


	h3 {
		font-family: 'Montserrat', sans-serif;
		font-weight:500;
		font-size:26px;
		margin:1rem;
	}	


}	
	
@media (max-width:750px) {

	h1 {
		font-size:14px;
	}
	
	q {
		font-size:20px;
	}
	
	cite {
		font-size:20px;
	}	

}	

/* ----------------------------------------------------------------- */
/* Fonts voor mobile */

@media (max-width:600px) {

	p {
		font-family: 'Montserrat', sans-serif;
		font-weight:400;
		font-size:15px;
		margin:1rem;
	}

	h1 {
		font-size:20px;
	}	
	
	h2 {
		font-family: 'Montserrat', sans-serif;
		font-weight:bold;
		font-size:24px;
		margin:1rem;
	}


	h3 {
		font-family: 'Montserrat', sans-serif;
		font-weight:500;
		font-size:24px;
		margin:1rem;
	}		
	
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Skip the header vormgeven */

.skipLink {
	position:absolute;
	top:-40px;
    transition: top 0.3s ease;
}

.skipLink:focus{
	color:#FFFFFF;
	top:10px;
	left:5px;
}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Header voor desktop vormgeven */

.headerDesktop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #19192A;
	min-height:100px;
}
.navDesktop {
	display: flex;
    gap: 30px;
	margin-left:50px;
}

.headerItem{
	color:#FFFFFF;
	text-decoration: none;
}

.headerItem:hover{
	color:#95ADE2;
	transition:color 500ms;
}

.headerItem:focus {
    color: #95ADE2;
    transition: color 500ms;
}


.headerItemActive{
	color:#95ADE2;
}
/* -------------------------------------------------------------------------------------------------- */
/* Toevoegen dat de header wat meer ruimte opneemt op grotere schermen en verdwijnt op tablet*/

@media (min-width: 1500px) {
    .navDesktop {
        margin-left: 200px;
		gap:80px;
	}
}

@media (max-width: 996px) {
	.headerDesktop {
		display:none;
	}
}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Header voor mobile/tablet vormgeven */

.headerMobile {
    display: flex;
    flex-direction: column;
    background-color: #19192A;
    padding: 10px;
    position: relative;
}

.mobileNavBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobileLogo img {
    height: 50px;
    margin-left: 50px;
}

.hamburger {
    font-size: 30px;
    cursor: pointer;
    color: white;
    margin-right: 50px;
    padding: 10px;
}

/* Initially collapsed mobile menu */
#mobileMenu {
    height: 0;
    overflow: hidden;
    background-color: #19192A;
    text-align: center;
    transition: height 0.5s ease;
    position: relative;
}

#mobileMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobileMenu ul li {
    margin: 20px 0;
}

#mobileMenu ul li a {
    color: white;
    text-decoration: none;
    font-size: 24px;
}

#mobileMenu ul li a.active {
    color: #95ADE2;
}
/* ------------------------------------------------------------------------- */
/* Ervoor zorgen dat de mobile/tablet header niet op desktop verschijnt */

@media (min-width: 997px){
	.headerMobile {
		display:none;
	}
}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Grid opzetten voor de homepage*/

.homepageContainer {
	display: grid;
	grid-template-columns: repeat(12 , 1fr);
	padding: 25 5 0 5;
}

/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* homepagehero vormgeven */

#hphContainer{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	position:relative;
}

#hphImage{
	display:grid;
	grid-column:span 12;
	background-size:cover;
	margin:0 auto;
	width:100%;
	height:100%;
}

#hphText{
	display:grid;
	grid-column:2 /6;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color:#FFFFFF;
}

/* ---------------------------------------------------------------------------------------------------------------------- */
/* responsive maken van de homepagehero oftewel zorgen dat die weg gaat op mobile en er wat beter uitziet op tablet en grotere desktopschermen */

@media (max-width:996px) {
	#hphText{
		grid-column:2 / 7;
	}	
}

@media (max-width:600px) {
	#hphContainer {
		display:none;
	}	
	#hphImage {
		display:none;
	}	
	#hphText {
		display:none;
	}	
}

@media (min-width:1920px) {
	#hphImage {
		
	width:100%;
	height:100%;
	}
}
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* Welkomstbericht tonen op mobile */

#welcomeMobile {
	text-align:center;
	padding:10px;
}

@media (min-width:601px){
	#welcomeMobile {
		display:none;
	}
}
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* Content van de homepage vormgeven */

#intro {
	grid-column:4 / 10; 
	display:grid;
	text-align:center;
	padding:25px;
}

#heroMobile {
	display:none;
}

#studie {
	grid-column:4 / 10; 
	display:grid;
	text-align:center;
	padding:25px;
}

#studieDefinitie {
	font-style: italic;
}

#infoContainer {
	background-color:#6071A4;
	text-align:center;
	padding:25px;
}

#infoContent {
	grid-column:4 / 10; 
	display:grid;
	color:#FFFFFF;
}

#button {
	grid-column:4 / 10; 
	display:grid;
	justify-content:center;
	align-items:center;
	margin:3rem;
	padding:0px;
}

#contactButton {
	justify-content:center;
	align-items:center;
	text-align:center;
	background-color:#19192A;
	color:#FFFFFF;
	border-radius:15px;
	margin:0px;
	padding:0px;
}

#contactButton p{
	font-weight:500;
	font-size:30px;
}

#contactButton:hover {
    color: #95ADE2;
    outline: none;
    transition: color 500ms;
}

#contactButton:focus {
    color: #95ADE2;
    outline: none;
    background-color: #19192A;
    transition: color 500ms;
}

/* ----------------------------------------------------------------------- */
/* aanpassingen voor tablet */

@media (max-width:996px) {
	
	
	#intro {
		grid-column:2 / 12; 
	}
	
	#studie {
		grid-column:2 / 12; 
	}
	
	#infoContent {
		grid-column:2 / 12; 
	}	
	
	#button {
		grid-column:2 / 12; 
	}	
}

/* ----------------------------------------------------------------------- */
/* aanpassingen voor mobile */

@media (max-width:600px) {
	
	#heroMobile {
		display:block;
		max-width:75%;
		align-content:center;
		justify-content:center;
		align-items:center;
		margin: 0 auto;
	}
	
	#intro {
		grid-column: span 12;
	}
	
	#studie {
		grid-column: span 12;
	}
	
	#infoContent {
		grid-column: span 12;
	}	
	
	#button {
		grid-column: span 12;
	}	
}
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* Grid opzetten voor de contact pagina */

.contentContainer {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
    padding: 40px 20px;
    margin: 0 auto;
}

/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* Contact text links */

.infoSection {
	grid-column:2 / 6; 
    display:grid;
	align-content:center;
    justify-content: center;
    text-align: center;
}

/* ----------------------------------------------------------------------- */
/* Formulier rechts */

.contactFormContainer {
    grid-column: 7 / 12;
    display: flex;
}

.radioButtonGroup {
    display: flex;
    gap: 20px;
}

.contactForm {
    background-color: #6071A4;
    padding: 20px;
    width: 100%;
    border-radius: 5px;
}

.contactForm h2 {
    color: #fff;
    border-bottom: 1px solid #fff;
	margin-left:0px;
}

.contactForm label {
    display: block;
    font-size: 16px;
    color: #fff;
    margin-bottom: 5px;
}

.submitButton {
    background-color: #19192A;
    color: #FFFFFF;
    border-radius: 5px;
    cursor:pointer;
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	font-size:18px;
	padding:1rem;
}

.submitButton:hover {
    color: #95ADE2;
}

.submitButton:focus {
    color: #95ADE2;
    outline: none;
    background-color: #19192A;
    transition: color 500ms;
}

/* ----------------------------------------------------------------------- */
/* Media query toevoegen zodat het er goed uitziet op tablet en mobile */

@media (max-width: 996px) {
    .infoSection {
        grid-column: 2 / 12;
    }

    .contactFormContainer {
        grid-column: span 12;
    }
}

/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* Footer */

footer {
	grid-column: span 12;
	display:grid;
	justify-content:center;
	align-items:center;
	background-color: #19192A;
	color:#FFFFFF;
}