Opmaak

/* === Pagina structuur === */

body {
    background:#333333;
    background:url("../img/background.jpg")
    no-repeat center center fixed; /* zet de achtergrond vast */
    background-size:cover;  /* vul de pagina met de hele achtergrond */
    margin:0;
    font-family:calibri;
    color:white;
}

#container{
    display: grid; /* maak een tabel. Kijk op https://css-tricks.com/snippets/css/complete-guide-grid/ */
    grid-template-rows: auto auto 1fr auto; /* maak rijen */
    min-height:100vh; /* volledige hoogte van het venster */
}

#header{
    padding:10px;
}

section{
    padding:10px 10px 20px 10px;
    border-style:double;
    border-width:10px;
    border-radius:25px;
    margin: 40px 15vw 150px;
    background:rgba(255,255,255,0.4);
}

#footer{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background-image: linear-gradient(180deg, rgba(6, 19, 63, 0.7), black);
    color:white;
    font-weight:bold;
    text-align:center;
}

#footer p {
    margin: 5px;
}

/* === Logo === */

#logo {
    display: grid; /* maak een tabel */
    grid-auto-flow: column; /* zet de tabelcellen automatisch als kolommen achter elkaar */
    grid-gap: 30px; /* ruimte tussen cellen */
    align-content: center; /* verticaal centreren */
    font-size: 40px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.logo span {
    color: black;
}

.logo a {
    color: #fff;
    text-decoration: none;
}
#menu.fixed .logo a {
    color: #4f1ba9c0;
}

/* === Desktop Menu === */

#menu {
    display: grid; /* maak een tabel */
    grid-template-columns: 1fr 15fr; /* maak 2 kolommen */
    background-color:rgba(255,255,255,0.2);
    padding: 0 30px;
    z-index: 99;
}

/* Opmaak menuopties */
#menu-opties {
    display: grid; /* maak een tabel */
    justify-content: center;
    align-content: center;
    grid-auto-flow: column; /* zet menu opties horizontaal achter elkaar */
}

/* Opmaak normale menulink */
#menu-opties a {
    text-decoration: none; /* geen onderstrepen van een link */
    color: white;
    font-weight: bold;
    font-size: 25px;
    padding:15px 20px 15px 20px; /* ruimte rondom een menu-optie */
}

/* Als de muis over een optie gaat gebruik dan een andere kleur */
#menu-opties a:hover {
    color:#4f1ba9;
    background-color:rgba(255,255,255,0.7);
}

/* Geef een actieve menu optie een andere kleur */
#menu-opties a.active,
a.mijzelf_active {
    background-color:white;
    color:#4f1ba9!important;
}

/* Opmaak van het fixed menu */
@media screen and (min-width:1025px) {
    #menu.fixed {
        position: fixed;
        background-color:rgba(255,255,255,0.9);
    }
    #menu.fixed #menu-opties a {
        color: #4f1ba9c0;
    }
}

/* === Mobiel Menu === */

.linker-menu {
    height: 100vh; /* toon het menu verticaal over de hele paginahoogte */
    -webkit-transform: translateX(-100%); /* WebKit */
    -moz-transform: translateX(-100%); /* Mozilla */
    -o-transform: translateX(-100%); /* Opera */
    -ms-transform: translateX(-100%); /* Internet Explorer */
    transform: translateX(-100%);    /* bij een verborgen menu verschuift het menu naar links voorbij de linkermarge */
    position: fixed; /* zet het menu vast op een plek */
    background-color: #2F323A;
    overflow-x: hidden; /* verberg tekst als het menu is verborgen */
    transition: all 0.25s ease-out; /* hoe lang duurt het tonen van het menu */
    padding-top: 175px;
    z-index: 100;
}

/* Hyperlinks in het linkemenu */
.linker-menu a {
    padding: 8px 32px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block; /* toon de links als een blok zodat het hele deel klikbaar is */
    transition: 0.3s; /* hoe lang duurt het verlichten van een menu optie */
}

/* Geef een muisover linkermenu optie een andere kleur */
.linker-menu a:hover {
    color:white;
}

/* Verander de muisaanwijzer in een handje */
.hamburger-button, .sluit-button {
    cursor:pointer;
    color: white;
}

/* Geef een actieve linkermenu optie een andere kleur */
.linker-menu a.active{
    background-color:white;
    color:#4f1ba9!important;
}

/* Zet de sluitmenu button van het linkermenu op mobiel vast op een plek */
.sluit-button {
    position: absolute;
    top: 80px; /* vanaf de bovenkant */
    left: 0;    /* vanaf de rechterkant */
    font-size: 4em!important;
    font-weight:bold;
}

/* Verberg het normale menu op een mobiel en tablet */
@media screen and (max-width: 1024px) {
    #menu-opties{
        display: none;
    }
    section{
        margin: 40px 7vw 100px;
    }
        aside{
        float:none!important;
        width:initial!important;
        margin-bottom:10px;
    }
    .kolommen {
        grid-template-columns: 1fr!important;
    }
}

/* Verberg het linkermenu en de hamburgerbutton op een desktop */
@media screen and (min-width: 1025px){
    #linkermenu, .hamburger-button{
        display: none;
  }
}

/* === Instellingen voor pagina tekst en elementen === */

.koptekst1, .voettekst1, .koptekst2 {
    text-align:center;
    color:white;
    text-shadow: black 2px 2px 4px
}

p{
    font-size:1.2em;
}

h1 {
    font-size: 2.5em;
}
h1.homepagina{
    text-align:center;
}

h4.koptekst1 {
    font-size: 2em;
    margin: 20px;
}
img {
    max-width:100%;
}
img.homepagina{
        border-radius:15px;
        border:1.5px solid rgba(255,255,255,0.7);
}
img.contact{
  height:7vh;
  display:block;
  margin-left: auto;
  margin-right: auto;
}
article{
    clear:both;
    text-shadow: black 2px 2px 4px
}

article.kolommen {
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-gap:90px;
    margin-right:5vw;
    margin-left:5vw;
}

/* Als de tekst niet meer op een regel past, en er zijn geen spaties om op af te breken, breek tekst toch af */
.wrap{
    word-break: break-all;
    max-width: 80vw;
}

/* De rechter aside boxen op o.a. de opmaakpagina */
aside{
    float: right;
    width:30vw;
    background-color: rgba(0,0,0,0.4);
    border-radius:10px;
    border-style:solid;
    border-color:#bc7df4;
    border-width:5px;
    padding:8px;
    margin-left: 20px;
}

.span1{
    font-size:55px;
    font-weight:bold;
}

.span2{
    font-weight:bold;
}

.fotoJahla{
    width:35%;
    float: right;
    margin: 20px;
}
a.link{
    color: dodgerblue;
    text-decoration:none;
}
a.link:hover{
    color:pink;
    text-decoration:underline;
}
a.link2{
  color:rgb(98, 101, 103);
  text-decoration: none;
}
a.link2:hover{
  color:white;
  text-decoration:none;
}
a.link3{
  color:white;
  text-decoration:none;
}
a.link:hover{
  color:white;
  text-decoration:none;
}
/* === De loginboxcontainer op de pagina schoolexamen === */

.logincontainer {
    width:20vw;
    margin: 30px auto;
    padding:30px;
    background-color:#333;
    border-radius:25px;
    border: 2px solid #ffffff;
}

/* Het loginformulier met een maximum breedte*/
.loginform {
    width:70%;
    margin:0 auto;
}

/* Veld loginnaam */
.loginname {
    font-size:0.75em;
    font-style:italic;
}

/* Aanmeldbutton op het loginformulier */
.loginbutton, .logoffbutton {
    cursor: pointer;
    font-weight: 700;
    font-size:1.1em;
    -moz-user-select: none;
    color: #4f1ba9;
    background:#ffffff;
    border:0;
    padding: 7px 20px;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    border-radius: 10px;
}

/* De muisoverstijl van de loginbutton */
a.loginbutton:hover, input.loginbutton:hover,
a.logoffbutton:hover, input.logoffbutton:hover {
    color:#4f1ba9;
    background-color:rgba(255,255,255,0.7);
}

/* Centreer de login en loguit tekst */
.logon, .logoff{
    text-align:center;
    margin-top:50px;
}

/* Opmaak veldlabels van het inlogformulier */
.UserLabel, .PassLabel {
    color: #e694bd;
}

/* Stijl de invoervelden van het loginformulier */
.Input {
    border: none;
    border-bottom: solid 1px white;
    outline: none;
    margin: 0;
    background-color: #333;
    padding: 5px;
    width: 100%;
    color: white;
}

/* Stijl de tabel met de cijfers van de vakken */
.TableContainer {
    overflow-x: auto;
    margin:0 auto;
    max-width:70vw;
}

.Table {
    text-shadow: none;
    border-collapse: collapse;
    background-color: #333;
    margin:0 auto;
}

/* Stijl de cellen van de tabel en geef ze ruimte */
.Table td, .Table th {
    padding:10px;
    text-align:left;
    font-weight:700;
}

/* Stijl de kop van de tabel */
.Table thead {
    background-color:white;
    color:#333;
}

/* Opmaak voor de foutmelding van het loginformulier */
.msg {
    color:red;
    margin:0 auto;
    min-height:30px;
    font-size: 1.1em;
}

/* Pas de breedte van het loginformulier aan voor mobiel */
@media screen and (max-width:1024px) {
    .logincontainer {
        width:60vw;
    }
}

/* === Stijl de tabs van de opmaak pagina ===*/

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Stijl de tabbuttons welke gebruikt worden om de inhoud te tonen */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 33.333%;
}

/* Verander de achtergrond kleur van de tabbutton met muisover */
.tab button:hover {
    background-color: #ddd;
}

/* Maak een actieve/huidige tablink class */
.tab button.active {
    color: #fff;
    background-color: #3a3a3a;
}

/* Stijl de tabinhoud */
.tabcontent {
    display: none;
    padding: 15px;
    border: 1px solid #fff;
    border-top: none;
    background-color: rgba(0,0,0,.7);
}

/* Fading effect van de tabs duurt 1 seconde */
.tabcontent {
    animation: fadeEffect 0.5s;
}

/* Ga van 0 naar volle kleur */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* === Canvastekeningen op de pagina canvas ===*/

#canvas1 { /* voorbeeld 1 */
    background: rgba(255,255,255,0.3);
    border: 2px solid black;
}

/* Canvas voorbeeld 2*/
#canvas2 {
    background: rgba(255,255,255,0.3);
    border: 2px solid black;
}

/* Canvas voorbeeld 3*/
#canvas3 {
    background: rgba(0,0,0,0.5);
    border: 2px solid black;
}

/* Verklein de canvas tekeningen op mobiel */
@media screen and (max-width:1024px) {
    #canvas1 { height: 35vh; }
    #canvas2 { height: 35vh; }
    #canvas3 { height: 35vh; }
}

/* === Tonen inhoud van het online css-bestand met php === */

/* Ruimte rondom het getoonde css-bestand */
#cssfile {
    display:none;
    padding: 0;
    margin-top: 20px;
}

/* Centreer de button: bekijk css-bestand */
.buttoncontainer {
    display:flex;
    justify-content: center;
}

/* Button op de pagina opmaak om de hele file te laten zien */
#cssbutton {
    padding: 15px;
    margin: 10px;
    background: #4f1ba9;
    color: white;
    font-size: 1.1em;
    border: none;
    outline: none;
    cursor: pointer;
}

/* Button kleur op muisover */
#cssbutton:hover {
    opacity: 0.6;
}

/* === Sliders op de JQuery pagina === */

/* Container waar de slider in komt */
.slidercontainer {
    background: rgba(51, 51, 51, 0.9);
    padding:15px;
    border-radius: 10px;
}

/* De slider zelf */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 20px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Muis-over effect */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* Het schuifknopje van de slider (gebruik -webkit- (Chrome, Opera, Safari, Edge) en -moz- (Firefox) om de standaard look te overschrijven) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 35px; /* Set a specific slider handle width */
    height: 35px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    border-radius: 50%;
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 35px; /* Set a specific slider handle width */
    height: 35px; /* Slider handle height */
    border-radius: 50%;
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

/* Minimumwaarde tekst label van de fontslider */
.MinFont {
    display:flex;
    float:left;
}

/* Maximumwaarde tekst label van de fontslider */
.MaxFont {
    float:right;
}

/* === HTML5 Gallery aanpassingen voor pagina Mijzelf === */

@media screen and (max-width: 1024px) {
    .html5gallerycontainer {
        width: inherit!important;
    }
}
@media screen and (min-width: 1025px) {
    .html5gallerycontainer {
        width: 35vw!important;
        margin: 0 auto;
    }
}

/* === Terug naar boven button. Zie https://codepen.io/matthewcain/pen/ZepbeR === */

#NaarBoven {
    display: inline-block;
    background-color: #4f1ba9;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 40px;
    right: 30px;
    transition: background-color .3s,
                opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#NaarBoven::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em;
    line-height: 40px;
    color: #fff;
}
#NaarBoven:hover {
    cursor: pointer;
    background-color: rgba(255,255,255,0.5);
}

#NaarBoven.show {
    opacity: 1;
    visibility: visible;
}

/* === Code Highlight Plugin. Zet code op een pagina in kleur. Zie highlight.org === */

.hljs {
    box-shadow: 4px 4px 4px #444;
}

td.hljs-ln-line.hljs-ln-code {
    tab-size: 2;
    padding-left:5px;
}

.hljs-ln-numbers {
    text-align: right;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px!important;
}
.hljs-ln-n:before {
    color:#bc7df4;
}

pre code {
    max-width: 65vw;
}

/* === Contact-pagina === */

.grid-container{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 20px;
}
@media screen and (max-width:1024px) {
  .grid-container{
    grid-template-columns:auto;
  }
  img.contact{
    height:13vh;
  }
}
.grid-item{
  background-color:rgba(255,255,255,0.8);
  border:0.5px solid rgba(0, 0, 0, 0.2);
  padding:30px;
  text-align:center;
  color: rgb(173, 166, 170);
  border-radius:15px;
  margin:20px;
  font-family:verdana;
  text-shadow:none;
  font-weight:bold;
}
.grid-container button{
  border:none;
  border-radius:4px;
  color:white;
  padding: 12px 32px;
  text-align:center;
  font-size:1.3em;
  transition-duration: 0.4s;
  cursor:pointer;
  margin-top:20px;
  margin-bottom:20px;
}
.button1{
  background-color:rgb(183, 203, 234);
  color:rgb(98, 101, 103)!important;
}
.button1:hover{
  background-color:rgb(26, 115, 232);
  box-shadow: 0 2px 50px 0 rgba(0,0,0,0.19);
  color:white!important;
}

.button2{
  background-color:rgb(180, 230, 188);
  color:rgb(98, 101, 103)!important;
}
.button2:hover{
  background-color:rgb(48, 203, 1);
  box-shadow: 0 2px 50px 0 rgba(0,0,0,0.19);
  color:white!important;
}

.button3{
  background-color:rgb(251, 188, 4);
  color:rgb(98, 101, 103)!important;
}
.button3:hover{
  background-color:rgb(234, 67, 53);
  box-shadow: 0 2px 50px 0 rgba(0,0,0,0.19);
  color:white!important;
}

.button4{
  border:none;
  background-color:rgb(255, 255, 255);
  color:rgb(98, 101, 103)!important;
}
.button4:hover{
  background-color:rgb(232, 28, 35);
  box-shadow: 0 2px 50px 0 rgba(0,0,0,0.19);
  color:white!important;
}

.button5{
  background-color:rgb(25, 20, 20);
}
.button5:hover{
  background-color:rgb(30, 215, 96);
  box-shadow: 0 2px 50px 0 rgba(0,0,0,0.19);
}

.button6{
  background-color:rgb(254, 40, 84);
}
.button6:hover{
  background-color:rgb(106, 201, 208);
  box-shadow: 0 2px 50px 0 rgba(0,0,0,0.19);
}

/* === Before After Image Slider. Zie https://legacy-zurb.netlify.app/playground/twentytwenty === */

.twentytwenty-container {
    border-radius: 15px 15px 0 0;
    background: white;
}
.maxheight {
    height:700px!important;
}
@media screen and (max-width:1024px) {
    .maxheight {
        height:300px!important;
    }
}

@media screen and (min-width:1025px) {
    .twentytwenty-container {
        max-height:65vh!important;
    }

}
.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    padding: 0 5px;
}

.twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0)!important;
}
.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    background: rgba(0, 0, 0, 0.5)!important;
}

/* === CSS only lightbox. Zie http://youtube.com/watch?v=6j5q-hP8sfk === */
.portfolio__button {
  display: block;
  text-decoration: none;
  color: white;
  background: #4f1ba9;
  padding: .5em 1.25em;
  text-align: center;
  border-radius: 3px;
}
.portfolio-small__button {
    background:#4f1ba9;
    padding:5px;
    border-radius:3px;
    font-size:0.7em;
}
.portfolio {
  display: grid;
  grid: auto / repeat(auto-fit, minmax(10em, 1fr));
  grid-gap: 1em;  
  padding: 1em;
}

.portfolio__item {
  position: relative;
  flex-basis: 30%;
  margin: 0;
  padding: 0;
  background: white;
  border-radius: 15px;
}

.portfolio__desc {
  padding: 0.5em;
  text-align: center;
}

.portfolio__title {
  letter-spacing: 1px;
  color: #4f1ba9;
  margin: 5px auto 15px auto;
  text-shadow: none;
}

.portfolio__body {
   color: black;
   text-shadow: none;
   overflow-y: auto;
   height: 20vh;
   margin-top: 10px;
}
.portfolio__body p {
    font-size: initial;
    margin:0;
}

.portfolio-container__image{
    display: grid;
    grid-template-rows: 2fr 1fr;
    max-height:13vh;
    overflow:hidden;
}

.portfolio__image,
.portfolio-lightbox__image{
  width: 100%;
  display: block;
  border-radius: 15px 15px 0 0;
}

.portfolio-lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0,1); 
  transition: transform 150ms ease-in-out;
  transform-origin: right; 
  padding: 2em;
  position: fixed;
  top: 0;
  left: 0;
  color: white;
  background: rgba(0, 0, 0, .75);
  width: 100vw;
  height: 100vh;
  z-index: 200;
}

.portfolio-lightbox:target {
  transform: scale(1,1);
  transform-origin: left; 

}

.portfolio-lightbox__content {
  width: 35vw;
  padding: 1em;
  background: white;
  position: relative;
  border-radius: 15px;
}
@media screen and (max-width:1024px) {
    .portfolio-lightbox__content {
        width: 55vw;
    }
}

.portfolio-lightbox__image { margin-bottom: 1em; }

.portfolio-lightbox__close {
  position: absolute;
  right: -1em;
  top: -1em;
  border: white 2px solid;
  display: flex;
  width: 2em;
  height: 2em;
  background: red;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.portfolio-lightbox__close::after {
  content: 'x';
  color: white;
}

.scale {
    transform: scale(0.5) translateY(-55%);
}
@media screen and (max-width:1024px) {
   .scale {
        transform: scale(0.6) translateY(-35%);
    } 
}


#alrt {
    text-align: center;
    color: #4f1ba9;
}