body{

    margin: 0;
    height: 100%;
    background: #000000;


}

a{
    text-decoration: none;
    color: white;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: "Kode-Mono";
    src: url("/Fonts/KodeMono-Regular.ttf");
}

@font-face {
    font-family: "Kode-Bold";
    src: url("/Fonts/KodeMono-Bold.ttf");
}

@font-face {
    font-family: "VT323";
    src: url("/Fonts/VT323-Regular.ttf");
}

.scanlines {
    overflow: hidden;
    position: relative;
}
.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
}
.scanlines:before {
    width: 100%;
    height: 5px;
    z-index: 40;
    background: rgba(104, 207, 83, 0.3);
    opacity: 0.75;
    animation: scanline 6s linear infinite;
}
.scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(77, 247, 142, 0.3) 51%
    );
    background-size: 100% 8px;
    animation: scanlines 1s steps(60) infinite;
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
}
@keyframes scanlines {
    0% {
        background-position: 0 50%;
    }
}

#registratieNaam{
    font-family: Kode-Mono;
    color: white;
}

#message{
    font-family: Kode-Mono;
    color: white;
    background-color: black;
    border-radius: 1px solid white;
}

#Bericht{
    font-family: Kode-Mono;
    color: white;
}

#registratieEmail{
    color: white;
    font-family: "Kode-Mono";
}

#registratieBevestig{
    margin-left: -145px;
    font-family: "Roboto";
}

#registratieHead{
    color: white;
    font-size: 37pt;
    font-family: "Roboto-Serif";
    font-weight: 100;
}

.registratieLogo{
    height: 9.375rem;
    width: 9.375rem;
}

.registratiefrm{
    display: inline-block;
    margin-top: 2rem;
    color: white;
    margin-left: 5%;
}

input[type=text], input[type=password] {
    width: 18.438rem;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: 1px solid #ffffff;
    background: #000000;
    color: white;
    
}

.signupbtn{
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    width: 8.875rem;
    height: 1.938rem;

    font-family: Kode-Mono;
    z-index: 10;
}
/* 
img{
    width: 80%;
    height: 48.5%;
    margin-left: 2.5rem;
    margin-top: 3rem;
} */


.projectBovenkantvandepagina{
    width: 100%;

}

.projectPanels{
    width: 100%;
    height: 48.5%;
    margin-left: 0rem;
    margin-top: 3rem;
    background-color: black;
}

#pictureFrame{
    width: 90%;
    height: 95%;
    margin-top: 6.5%;
    margin-left: 5%;
    background-color: black;
}

.selectEffect:hover{

    background-color: #2B2626;
    opacity: 0.5;
}

h2{
    font-family: VT323;
    color: white;
}

.projectLines{
    background-color: white;
    color: white;
    height: 0.px;
    opacity: 0.5;
    margin-top: 2%;
    margin-bottom: 2%;
    width: 80%;
}

header{
    height: 64rem;
    width: 100%;
    margin-top: -13rem;
    background: #000000;
    background-image: linear-gradient(rgba(70, 116, 70, 0.445) .1em, transparent .1em), linear-gradient(90deg, rgba(70, 116, 70, 0.445) .1em, transparent .1em);
    background-size: 4em 4em;
    background-attachment: fixed;
}

.footer-line{
    margin-top: 1rem;
    opacity: 0.7;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(0, 0, 0);
    color: white;
    text-align: center;
    height: 4rem;
    z-index: 50;
}

.iteratieText{
    width: 50%;
}

.littlestarImage{
    width: 100%;
}

.iteratiesEnchantix{
    margin-left: 28rem;
    margin-top: -4rem;
}

.iteratie2Enchantix{
    margin-left: 28rem;
    margin-top: -8rem;
    height: 225px;
    width: 299px;
}

.iteratie3Enchantix{
    margin-left: 28rem;
    margin-top: -5.5rem;
    height: 225px;
    width: 299px;
}

.iteratie4Enchantix{
    margin-left: 28rem;
    margin-top: -9rem;
    height: 225px;
    width: 299px;
}

.iteratie5Enchantix{
    margin-left: 28rem;
    margin-top: -6.5rem;
    height: 225px;
    width: 299px;
}

.iteratie6Enchantix{
    margin-left: 28rem;
    margin-top: -6.5rem;
    height: 225px;
    width: 299px;
}

.iteratie7Enchantix{
    margin-left: 28rem;
    margin-top: -6.5rem;
    height: 225px;
    width: 299px;
}

.finalLogo{
    width: 250px;
    height: 300px;
    margin-left: -2rem;
}

.jedi{
    height: 300px;  
    width: 400px;
    margin-left: 5rem;
}

.projectPageTitle{
    margin-top: 5rem;
    color: white;
    font-size: 4rem;
    font-family: VT323;
    margin-left: 30%;
}

.portfolioPageTitle{
    margin-top: 5rem;
    color: white;
    font-size: 3.5rem;
    font-family: VT323;
    margin-left: 30%;
}

.projectText{
    width: 40%;
    height: auto; 
    margin-left: 30%;
    color: white;
    font-family: Kode-Mono;
    background-color: #000000;
    padding: 25px;
}

.projectTop{
    width: 42.3%;
    height: auto; 
    margin-left: 30%;
    color: white;
    font-family: Kode-Mono;
}

.projectLines{
    width: 42.3%;
    margin-left: 30%;
    margin-top: 0;
    margin-bottom: 0;
}

.workLink{
    margin-left: 1rem;
}

.copyright-text
{
    font-size: 15px;
    text-align: center;
    color: #fff;
    font-family: Kode-Mono;
    opacity: 0.5;
    margin-top: -1.2rem;

}

.email{
    font-size: 15px;
    text-align: right;
    color: #fff;
    font-family: Kode-Mono;

    margin-right: 4rem;
    opacity: 0.5;   
    margin-top: -1.3rem;
}

.version{
    font-size: 15px;
    text-align: left;
    color: #fff;
    font-family: Kode-Mono;

    margin-left: 4rem;
    opacity: 0.5;
    margin-top: 0.8rem;
}


.sectionTitle {
    margin-left: 30.2rem;
    font-size: 38.5pt;
    color: #ffffff;
    text-align: left;
    font-family: VT323;
    margin-top: 6rem;
    z-index: -4;
    text-shadow: 5px 4px  #292929;
}

.learningTitle{
    font-size: 18.5pt;
    color: #ffffff;
    text-align: left;
    font-family: Kode-Mono;
    margin-left: 2rem;
    margin-top: 1rem;
}

.learningText{
    color: white;
    text-align: left;
    font-family: Kode-Mono;
    font-size: 18.5pt;
    margin-left: 2rem;
}

.aboutTitle {

    font-size: 38.5pt;
    color: #ffffff;
    text-align: left;
    font-family: VT323;
    margin-top: 6rem;
    z-index: -4;
    margin-left: 29.4rem;
    text-shadow: 5px 4px  #292929;
}

.FlexContainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 50%;
    background-color: #000000;
    height: auto;
    overflow: auto;
    flex-direction: row;
    margin-left: 25%;
}

.aboutPicture {
    width: 12rem;
    height: 17rem;
    margin-top: 2.7rem;
    margin-left: 45rem;
    border-width:3px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
}

.aboutContainer {
    height: 26.5rem;
    width: 50%;
    margin-top: 2.7rem;
    margin-left: 6rem;
    padding-left: 1rem;
    border-width:3px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;

}

.aboutSection{
    height: 38rem;
    border-width:5px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
    width: 50%;
    margin-left: 25%;
    margin-top: 1rem;
}

.learningoutcomeSection {
    width: 100%;
    height: 23.9535rem;
    margin: 11.25px;
    border-width:4px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
}

.learningoutcomeSection2 {
    width: 100%;
    height: 27.9535rem;
    margin: 11.25px;
    border-width:4px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
}

.bopList{
    font-size: 15pt;
    margin-top: 0.5rem;
    text-align: left;
}

.learningReflection{
    font-size: 1rem;
    padding-right: 1rem;
}

.eclecticSection {
    width: 100%;
    height: 22.9535rem;
    margin: 11.25px;
    border-width:4px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
}

.eclecticNumbers{
    color: white;
    list-style: decimal;
    font-family: Kode-Mono;
    margin-left: -28.5rem;
    font-size: 20pt;
}

.eclecticItems{
    color: white;
    list-style: decimal;
    font-family: Kode-Mono;
    text-align: left;
    display: flex;
    flex-direction: column;
    margin-top: -10.3rem;
    margin-left: -2.5rem;
    font-size: 20pt;
}

.eclecticSelect:hover{
background-color: #C0C0C0;
}

.item1 {
    margin-top: 5rem;
    width: 36.84375rem;
    height: 31.7rem;
    margin: 11.25px; 
    border-width:4px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
}

.itemPassion {
    width: 27.84375rem;
    height: 32rem;
    margin: 11.25px; 
    border-width:4px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
}


.item2 {
    width: 32.9535rem;
    height: 32.9535rem;
    margin: 11.25px;
    background-color: rgb(0, 0, 0);
    border: 3.75px solid white;
}

.item3 {
    width: 41.34375rem;
    height: 32.9535rem;
    margin: 11.25px;
    border-width:4px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
}

.item4 {
    width: 19.4535rem;
    height: 25.4535rem;
    margin: 11.25px;
    border: 3.75px solid white;
}

.healthBar{
    margin-top: 36rem;
    width: 10rem;
    height: 0.5rem;
    border-width:1px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
    background-color: red;
    z-index: -5;
    margin-left: -50.8rem;
}


.descriptionText {
    color: white;
    font-family: Kode-Mono;
    font-size: 18pt;
    background-color: rgb(0, 0, 0);
    margin-top: 3rem;
    padding: 1.5rem;
    height: 113.25px;
    border-width:1px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
    z-index: 15;
}

.descriptionTitle {
    margin-top: -0.75rem;
    font-size: 25pt;
    font-family: VT323;
    
}

.eclecticTitle {
    font-size: 30pt;
    font-family: VT323;
    color: white;
    margin-left: 17%;
    margin-top: 0.2rem;
}

.readMore{
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 14pt;
    outline:1px solid #000000;
    background:#C0C0C0;
    border-width:1px;
    border-style:solid;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    padding:4px 10px;
}

.readMore:hover{
    color: rgb(122, 122, 122);
}

.about{
    color: rgb(255, 255, 255);
    font-family: Kode-Mono;
    text-align: left;
    padding: 20px;
}

.beschrijving {
    font-size: 11.25pt;
}

#actived {
    background-color: red;
  }
  
  .actived {
    background-color: red;
  }

nav{
    position: fixed;
    width: 100%;
    background-color: black;
    z-index: 50;
    height: 5rem;
    margin-top: 0rem;
}

.button{
    position:relative;
    display:inline-block;
    margin:20px;
    margin-top: 0rem;
}

ul{
    justify-content: center;
    align-items: center;
    display: flex;
    margin-left: -3.5rem;
}

li {
    justify-content: center;
    align-items: center;
    display: flex;
    padding-left: 2rem;
}

.button a {
    color: rgb(255, 255, 255);
    font-family: Kode-Mono;
    font-size: 1.125rem;
    text-align: center;
    text-decoration: none;
    background-color: rgb(0, 0, 0);
    display: block;
    position: relative;
    border: 1px solid white;
    padding: 0.5625rem 1.125rem;
    box-shadow: inset 0 0.5625px 0 #2B2626, 0 5.625px 0 #2B2626;
    border-radius: 2.8125px;
    transition: all 0.2s ease;
}

.button a:hover {
    top: 0.3375rem;
    box-shadow: inset 0 0.5625px 0 #FFE5C4, inset 0 -1.6875px 0 #2B2626;
}

.button:after {
    content: "";
    height: 100%;
    width: 100%;
    padding: 0.140625rem;
    position: absolute;
    bottom: -0.5625rem;
    left: -0.140625rem;
    z-index: -1;
    background-color: #ffffff;
    border-radius: 2.8125px;
}

/* Verborgen hamburger menu */

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
}

.menu-toggle .bar {
    background-color: white;
    height: 0.25rem;
    width: 2rem;
    margin: 0.3rem 0;
    border-radius: 5px;
}

/* Verberg menu op mobiel standaard */
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    padding: 0 1.5rem;
    columns: white;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-family: Kode-Mono;
    font-size: 1.125rem;
}


h1 {
    font-size: clamp(1.5rem, 13vmin, 6rem);
    color: #ffffff;
    text-align: left;
    font-family: VT323;
    font-weight: 200;
    text-shadow: 10px 7px  #292929;
    margin-left: 5.5%;
}

@keyframes typing-line1 {
    0%, 100% { content: ""; }
    0% { content: "C:\\"; }
    10% { content: "C:\\S"; }
    12% { content: "C:\\Sv"; }
    14% { content: "C:\\Sve"; }
    16% { content: "C:\\Sver"; }
    18% { content: "C:\\Sverr"; }
    20% { content: "C:\\Sverre"; }
    22% { content: "C:\\Sverre "; }
    24% { content: "C:\\Sverre v"; }
    26% { content: "C:\\Sverre van"; }
    28% { content: "C:\\Sverre van "; }
    30% { content: "C:\\Sverre van d"; }
    32% { content: "C:\\Sverre van de"; }
    34% { content: "C:\\Sverre van der"; }
    36% { content: "C:\\Sverre van der "; }
    38% { content: "C:\\Sverre van der C"; }
    40% { content: "C:\\Sverre van der Cr"; }
    42% { content: "C:\\Sverre van der Cru"; }
    44% { content: "C:\\Sverre van der Crui"; }
    46% { content: "C:\\Sverre van der Cruij"; }
    48% { content: "C:\\Sverre van der Cruijs"; }
    50% { content: "C:\\Sverre van der Cruijse"; }
    52% { content: "C:\\Sverre van der Cruijsen\\"; }
    100% { content: "C:\\Sverre van der Cruijsen\\"; }
}

@keyframes typing-line2 {
    0%, 100% { content: ""; }
    10% { content: "S"; }
    12% { content: "Stu"; }
    14% { content: "Stud"; }
    16% { content: "Stude"; }
    18% { content: "Studen"; }
    20% { content: "Student"; }
    22% { content: "Student "; }
    24% { content: "Student F"; }
    26% { content: "Student Fo"; }
    28% { content: "Student Fon"; }
    30% { content: "Student Font"; }
    32% { content: "Student Fonty"; }
    34% { content: "Student Fontys"; }
    36% { content: "Student Fontys "; }
    38% { content: "Student Fontys I"; }
    40% { content: "Student Fontys IC"; }
    42% { content: "Student Fontys ICT"; }
    44% { content: "Student Fontys ICT &"; }
    46% { content: "Student Fontys ICT & "; }
    48% { content: "Student Fontys ICT & M"; }
    50% { content: "Student Fontys ICT & Me"; }
    52% { content: "Student Fontys ICT & Med"; }
    54% { content: "Student Fontys ICT & Medi"; }
    56% { content: "Student Fontys ICT & Media"; }
    58% { content: "Student Fontys ICT & Media "; }
    60% { content: "Student Fontys ICT & Media D"; }
    62% { content: "Student Fontys ICT & Media De"; }
    64% { content: "Student Fontys ICT & Media Des"; }
    66% { content: "Student Fontys ICT & Media Desi"; }
    68% { content: "Student Fontys ICT & Media Desig"; }
    70% { content: "Student Fontys ICT & Media Design"; }
    100% { content: "Student Fontys ICT & Media Design"; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Algemene instellingen */

.line2{
    margin-top: -4rem;
    margin-left: 2rem;
}

.line1{
    margin-top: -0.5rem;
    margin-left: -9rem;
}

.typewriter {
    --caret: currentcolor;
    display: inline-block;
    position: relative;
    font-family: VT323;
    line-height: 1.5;
    margin-left: 15%;
    margin-top: 24rem;
}

/* Eerste regel */
.typewriter .line1::before {
    content: "";
    animation: typing-line1 6s steps(30) forwards;
    display: inline-block;
    white-space: pre;
}

/* Caret voor line1 */
.typewriter .line1::after {
    content: "_";
    animation: blink 0.5s linear infinite;
    position: absolute;
    display: inline-block;
    margin-left: 0; /* Verwijder de ruimte tussen de tekst en de underscore */
    color: var(--caret);
}

/* Zodra line2 begint, verdwijnt de underscore van line1 */
.typewriter .line1.active::after {
    display: none;
}

/* Tweede regel */
.typewriter .line2::before {
    content: "";
    animation: typing-line2 6s steps(30) forwards;
    animation-delay: 4s; /* Start na de eerste regel */
    display: inline-block;
    white-space: pre;
}

/* Caret voor line2 */
.typewriter .line2::after {
    content: "_";
    animation: blink 0.5s linear infinite;
    animation-delay: 1s; /* Start tegelijk met line2 */
    position: absolute;
    display: none; /* Verborgen tot line2 begint */
    margin-left: 0; /* Verwijder de ruimte tussen de tekst en de underscore */
    color: var(--caret);
}

/* Toon de underscore op line2 zodra de animatie begint */
.typewriter .line2.active::after {
    display: inline-block;
}

.glitchText{
    animation: glitch 1s linear infinite;
    z-index: -10;
  }
  
  @keyframes glitch{
    2%,64%{
      transform: translate(2px,0) skew(0deg);
    }
    4%,60%{
      transform: translate(-2px,0) skew(0deg);
    }
    62%{
      transform: translate(0,0) skew(5deg); 
    }
  }
  
  .glitchText:before,
  .glitchText:after{
    content: attr(title);
    position: absolute;
    left: 0;
  }
  
  .glitchText:before{
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  }
  
  @keyframes glitchTop{
    2%,64%{
      transform: translate(2px,-2px);
    }
    4%,60%{
      transform: translate(-2px,2px);
    }
    62%{
      transform: translate(13px,-1px) skew(-13deg); 
    }
  }
  
  .glitchText:after{
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  }
  
  @keyframes glitchBotom{
    2%,64%{
      transform: translate(-2px,0);
    }
    4%,60%{
      transform: translate(-2px,0);
    }
    62%{
      transform: translate(-22px,5px) skew(21deg); 
    }
  }

/* .glitchText:hover,
.glitchText:hover:before,
.glitchText:hover:after {
  animation: none;
} */




/* Media Queries */

/* Voor mobiele telefoons (480px en lager) */
@media (max-width: 480px) {

    header{
        height: 30rem;
    }

    ul {
        gap: -2rem; /* Nog minder ruimte */
    }

    .readmore{
        margin-top: -6rem;
        font-size: 2pt;
    }

    .button a {
        font-size: 0.1rem; 
        padding: 0.4rem 0.8rem; 
    }

    h1, .startHeader {
        font-size: 6vmin;
        margin-left: 1rem;
    }

    .typewriter {
        margin-left: 0.5rem;
        margin-top: 15rem;
    }

    .line1{
        margin-top: 5rem;
        margin-left: 1rem;
    }

    .line2 {
        margin-left: 1rem;
        margin-top: 0.5rem;
    }

    .button {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
        display: none;
    }

    .item1, .item2, .item4 {
        width: 100%;
        height: auto;
        margin: 10px 0;
    }

    .item3{
        width: 95%;
        height: 33rem;
        margin: 10px 0;
        margin-left: 0.5rem;
    }

    input[type="text"], textarea {
        width: 80%; /* Verminder de breedte op mobiel formaat */
        max-width: 300px; /* Zorg ervoor dat de breedte niet groter wordt */
    }

    .descriptionText{
        font-size: 1rem;
    }

    .descriptionTitle{
        font-size: 1rem;
    }

    .FlexContainer {
        flex-wrap: wrap;
        margin-left: 0;
        width: 100%;
    }

    .sectionTitle {
        margin-left: 0%;
        text-align: center;
        margin-top: -3rem;
        font-size: 1.5rem;
    }

    .aboutTitle{
        margin-left: 0%;

        text-align: center;
        margin-top: -2rem;
    }

    .aboutPicture {
        margin-left: 29rem;
        width: 8rem;
        height: 12rem;
        margin-top: 2rem;
    }

    .aboutContainer {
        margin-left: 2rem;
        padding-left: 0rem;
        font-size: 0.8rem;
        width: 80%;
        height: 20rem;
        margin-top: 17rem;
    }

    .about {
        text-align: justify; /* Justify voor betere leesbaarheid */
        padding: 10px;      /* Nog minder padding */
        font-size: 0.8rem;  /* Kleinere tekst voor telefoons */
    }

    .aboutSection {
        width: 95%;
        margin-left: 2.5%;
        height: 40rem;
    }

    .projectText {
        width: 95%;
        margin-left: 2.5%;
    }

    .footer {
        padding: 0.5rem;
    }

    .copyright-text, .email, .version {
        font-size: 10px;
        margin: 0.2rem 0;
    }

    .copyright-text{
        margin-top: -1rem;
    }

    .version{
        margin-left: 2rem;
    }

    .email{
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        background-color: black;
        position: absolute;
        top: 5rem;
        right: 0;
        width: 100%;
        text-align: center;
        padding: 1rem 0;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        padding: 1rem 0;
    }
}