/* style_old.css - Professioneel stijldesign voor Project: Prisma */

* {
    box-sizing: border-box;
}

.modal {
    display: none;
    position: fixed;
    z-index: 10000 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    position: absolute;
    bottom: 150px; /* Popup komt 20px boven de onderkant van de viewport */
    left: 50%;
    transform: translateX(-50%);
    background-color: #e0e5a0;
    padding: 20px;
    border: 5px solid darkgoldenrod !important; /* Donkergele rand */
    width: 80%;
    max-width: 600px;
}


body {
    background-color: #1A1A2E; /* Donker achtergrond voor contrast */
    color: white;
    font-family: Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    color: #FFD700; /* Gouden tint voor luxe uitstraling */
    text-align: center;
    font-size: 40px;
    text-shadow: 2px 2px 5px #58da0c; /* Medium paars */
}

h2, h4 {
    color: #9370DB; /* Lichtpaars */
}

p {
    color: white;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: #FF4500; /* Rood voor opvallende links */
    transition: color 0.3s ease-in-out;
}

a:hover {
    color: #FFD700; /* Goudtint bij hover */
}

#wrapper {
    max-width: 80%;
    margin: auto;
    padding: 20px;
}

 div.menu {
    /* height: 10px; */
    /*background-color: #0a4ede; /* Donkerpaars */
*   text-align: center;
   padding-top: 10px;
   position: relative;
   z-index: 1000;
   margin-top: 10px; /* Kleinere rand boven menu */
*   margin-bottom: 10px; /* Kleinere rand onder menu */
}

div.content {
    min-height: 60%;
    padding: 40px;
    background-color: #222; /* Donkergrijs voor contrast */
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
    opacity: 0.9;
    position: relative;
    z-index: 900;
    margin-top: 10px; /* Kleinere rand boven content */
    margin-bottom: 20px;
}

div.footer {
    height: 40px;
    background-color: #6d2ada; /* Intens paars */
    text-align: center;
    padding: 10px;
    margin-top: 10px; /* Gelijke rand boven footer */
}

/* Header afbeelding met zachtere overgang */
.header {
    position: relative;
    width: 100%;
    height: 150px; /* Kleiner om ruimte te besparen */
    background: linear-gradient(to bottom, rgba(26, 26, 46, 0.95), rgba(26, 26, 46, 0)),
    url("img/header-afbeelding.png__1920x800_q85_subsampling-2.png") no-repeat center/cover;
}

/* Logo styling met ronde hoeken en verdiept effect */
.header img {
    display: block;
    margin: auto;
    border-radius: 20px; /* Rondere hoeken */
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5), 0px 4px 6px rgba(0, 0, 0, 0.3); /* Verdiept effect */
}


/* Standaard (desktop) weergave: afbeelding uiterst links, login uiterst rechts */
.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Zorgt voor maximale spreiding */
    text-align: left;
    width: 100%;
    padding: 0 20px; /* Kleine padding voor nette uitlijning */
}

.header img {
    max-width: 300px; /* Behoudt vaste grootte op desktop */
    height: auto;
}

.login {
    text-align: right;
    margin-left: auto; /* Zorgt ervoor dat het naar de rechterkant schuift */
}

/* Mobiele weergave: afbeelding boven, login onder, middelste stuk daaronder */

@media screen and (max-width: 768px) {
    .menu {
    /*    margin-top: 10px; /* Zorgt ervoor dat de menubalk iets naar beneden komt */
    }

    .header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header img {
        max-width: 100%;
        height: auto;
    }

    .login {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .header-content {
        order: 3; /* Zorgt ervoor dat het middelste gedeelte onderaan komt */
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
}


/* Flexbox-structuur voor de header */

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Uiterst links en rechts op desktop */
    width: 100%;
    padding: 10px 20px;
    position: relative; /* Zorgt ervoor dat de menubalk en login goed blijven staan */
}

    display: flex;
    align-items: center;
    justify-content: space-between; /* Uiterst links en rechts op desktop */
    width: 100%;
    padding: 10px 20px;
}


.header-left {
    flex: 1;
    text-align: left;
    margin-left: 10px; /* Zorgt ervoor dat de afbeelding 1 cm van de rand staat */
}

    flex: 1;
    text-align: left;
}

.header-center {
    flex: 1;
    text-align: center;
}


.header-right {
    flex: 1;
    text-align: right;
    margin-right: 10px; /* Zorgt ervoor dat de login uiterst rechts blijft */
}

    flex: 1;
    text-align: right;
}

/* Mobiele weergave: Onder elkaar plaatsen */

@media screen and (max-width: 768px) {
    .menu {
      /*  margin-top: 10px; /* Zorgt ervoor dat de menubalk iets naar beneden komt */
    }

    
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Uiterst links en rechts op desktop */
    width: 100%;
    padding: 10px 20px;
    position: relative; /* Zorgt ervoor dat de menubalk en login goed blijven staan */
}

        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header-left, .header-center, 
.header-right {
    flex: 1;
    text-align: right;
    margin-right: 10px; /* Zorgt ervoor dat de login uiterst rechts blijft */
}

        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
}