body {
    background: linear-gradient(to bottom, rgb(50, 50, 50), black);
    height: 100vh;
    display: flex;
    overflow: hidden;
}



.text{
text-align: center;
}

.content{
    padding-left: 12em;
    padding-right: 7.5em;
    padding-top: 5em;
    overflow-y: scroll; /* Enable vertical scrolling for main content */
    height: 100vh; /* Set height of main content to full viewport height */
    }


h1 {
    margin-top: 2em;
    font-size: 2.5em;
    font-weight: 100;
    font-family: aquatico;
    color: white;
    text-align: center;
  }

h2 {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: lato;
}


.content p {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: lato;
    width: 61em;
}


ul{
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: lato;  
}

pre{
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: lato;  
}

.divider {
  border-top: 1px solid #ccc;
  margin-top: 10px;
  margin-bottom: 10px;
}



/*Images*/

#drawinggame-image,
#floormap-image,
#gamestructure-image,
#boardgame-image,
#prototype-image,
#facebookprofile-image,
#instagramprofile-image,
#rain1-image,
#rain2-image,
#rain3-image,
#rain4-image,
#rain5-image,
#wvoorbeeld-image,
#mvoorbeeld-image,
#gmcplanning-image,
#gmcplanning2-image,
#ictproto1-image,
#ictproto2-image,
#ictproto3-image,
#flyer1-image,
#flyer2-image,
#media-image,
#media1-image,
#media2-image,
#media3-image,
#runmarcojs-image {
    width: 250px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}

#structure-image,
#GMCfigma-image,
#GMCwix-image,
#w-image,
#m-image,
#feedpulse-image,
#ictproto-image,
#ictproto4-image,
#movie1917-image,
#gameproto3-image,
#fontysictwebsite-image,
#gamecode1-image,
#gamecode2-image,
#gamecode3-image,
#planningx-image,
#homepage-image{
  width: 500px; /* Adjust the width as needed */
}

#prototype-image,
#gameproto1-image,
#prototype2-image{
width: 700px; /* Adjust the width as needed */
}

#gameproto2-image{
width: 900px; /* Adjust the width as needed */
}








/*Background*/


.splitright {
    height: 100%;
    width: 50%;
    position: fixed;
    top: 0;
    right: -8em; /* Move to right */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgb(81, 81, 81)); /* Gradient background */
    transform: skewX(20deg); /* skew angle*/
    transform-origin: top right; /* skewing starts from top right */
    z-index: -1;
}


.black_line {
    position: fixed;
    top: 5em;
    right: 7.5em; 
    width: 35em; 
    height: 0.6em;
    background: rgba(44,44,44,255)
}

.white_line {
    position: fixed;
    top: 3.1em;
    left: 11.5em; 
    width: 50em; 
    height: 0.6em;
    background: rgba(240,240,240,255)
}

.smallwhite_line {
    position: fixed;
    top: 19em;
    left: 12.5em; 
    width: 15em; 
    height: 0.2em;
    background: rgba(240,240,240,255)
}

.background {
    z-index: -1;
    opacity: 0.5;
  }













/*Navbar*/


.navbar {
    height: 100%;
    width: 5em;
    position: fixed;
    top: 0;
    left: 0; 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgb(81, 81, 81)); 
    z-index: 1;
    display: flex;
    justify-content: center;
}


img#home-image {
    width: 3.5em;
    height: auto;
    margin-top: 1.5em;
  }




*,
*::after,
*::before {
box-sizing: border-box;
}

body {
margin: 0;
}

:root {
--bar-width: 47px;
--bar-height: 6px;
--hamburger-gap: 6px;
--foreground: #333;
--background: white;
--hamburger-margin: 8px;
--animation-timing: 200ms ease-in-out;
--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu {
--x-width: calc(var(--hamburger-height) * 1.41421356237);
display: flex;
flex-direction: column;
gap: var(--hamburger-gap);
width: max-content;
position: absolute;
top: 6.5em;
left: 1em;
z-index: 2;
cursor: pointer;
}

.hamburger-menu:has(input:checked) {
--foreground: #333;
--background: #333;
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
border: 1px solid var(--background);
box-shadow: 0 0 0 1px var(--foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
content: "";
width: var(--bar-width);
height: var(--bar-height);
background-color: var(--foreground);
border-radius: 9999px;
transform-origin: left center;
transition: opacity var(--animation-timing), width var(--animation-timing),
rotate var(--animation-timing), translate var(--animation-timing),
background-color var(--animation-timing);
}

.hamburger-menu::before,
.hamburger-menu::after {
width: var(--bar-width); 
}

.hamburger-menu input {
width: calc(var(--bar-width) * 0.8); /* middle bar shorter */
appearance: none;
padding: 0;
margin: 0;
outline: none;
pointer-events: none;
}

.hamburger-menu:has(input:checked)::before {
rotate: 33deg;
width: 55px;
translate: 0 calc(var(--bar-height) / -2);

}

.hamburger-menu:has(input:checked)::after {
rotate: -33deg;
width: 55px;
translate: 0 calc(var(--bar-height) / 2);

}

.hamburger-menu input:checked {
opacity: 0;
width: 0;
}

.sidebar {
transition: translate var(--animation-timing);
translate: -200%;
padding-top: 10px;
background-color: var(--foreground);
color: var(--background);
width: 20em;
background-color: rgb(0, 0, 0, 0.8);
margin-top: 1em;
margin-bottom: 1em;
margin-left: -91em;
}

.hamburger-menu:has(input:checked) + .sidebar {
translate: 0;
}



.outcomes {
    display: inline-block;
    color: #ffffff; /* Text color */
    padding: 0px 10px;
    margin: 10px;
    text-decoration: none; 
    border: 2px solid transparent; 
    border-radius: 5px; 
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; 
    line-height: 1.1;
    height: auto;
    font-size: 20px;
    font-family: aquatico;
}


.outcomes:hover {
    background-color: transparent; 
    color: #ffffff; 
    border-color: #ffffff; 
}