@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap'); 
:root {
  /*color*/
  --clr-txt1: #ddffeecc;
  --clr-txt2: #ddffee99;
  --clr-txt3: #ddffee99;
  --clr-bg: #070714ff;
  --clr-bgfrm: #00000019;
  --clr-rand: #ddffee99;
  /*fontSize*/
  --fs-1: calc(1vw);
  --fs-2: calc(6px + 1vw);
  --fs-3: calc(8px + 1vw);
  /*afm*/
  --tWyd: 90vw;
  --lWyd: 32vw;
  --rWyd: 24vw;
  /*margin*/
  --rad: 0.15em;
}

.jdc_lyst {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Adjust the gap between rows as needed */
  }

  .jdc_ry {
    display: flex;
    align-items: flex-start; /* Top-align vertically */
    gap: 20px; /* Adjust the gap between columns as needed */
  }

  .ikon {
    display: flex;
    flex-direction: column; /* List children vertically */
    align-items: center; /* Center align horizontally */
    justify-content: flex-start; /* Top align vertically */
    width: 9vw;
  }

  .inhoud {
    display: flex;
    flex-direction: column; /* List children vertically */
    align-items: flex-start; /* Left align horizontally */
    justify-content: flex-start; /* Top align vertically */
  }



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 620px) {
    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    
      /* Fallback solid color */
      background-color: var(--clr-bg);  
    
      /* Gradient background */
      background: radial-gradient(ellipse at 36% 20%, #314351, #161721);
      background-size: cover;
      position: relative;
      overflow: hidden; /* Prevents any potential scrollbars */
      font-size: var(--fs-3);font-weight: 900;text-transform:uppercase;
    }
    
    /* Overlay for horizontal lines */
    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      /* Creates horizontal lines */
      background: repeating-linear-gradient(
      to bottom,
      transparent 0px 2px,  /* Space between lines */
      #16172145 2px 8px  /* Line color and thickness */
    );
    
      /* Ensures it appears above the gradient */
      pointer-events: none; /* Prevents interaction with the overlay */
    }
    
    #moz {position: fixed;width: 100vw;height: 100vh;left:0vw;top: 0vw; overflow: hidden;z-index: 1}
    .mozbox {position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    float:middle;
    vertical-align:middle;
    user-select: none;}
    .menu {position: absolute;left: 3vw;width: var(--tWyd);top: 0vh;height: 4vh;z-index: 5}
    .menuikon {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 3vw; color: var(--clr-txt1); text-decoration: none}
    .rbr_but{width: 3.2vw}
    .knv {position: absolute;left: 3vw;width: var(--tWyd); top: 4.5vh;height:93.5vh; overflow-y: auto; z-index: 3}
    .knv_list {list-style-type: none; padding: 0;position: absolute;padding-left: 0vw;width: 85vw; height: 25vh; top: 0vh}
    .iknKop{height: 8vw; padding-bottom: 20px}
    .iknLst{height: 4vw; cursor: pointer;}
    .ikn {position: relative; height: 100%; top: 0.7vw}
    .txt1, .txt2 {font-size: var(--fs-3)}
    #calender {width: 225px; background-color: var(--clr-bgfrm); border: 1px solid var(--clr-rand); border-radius: var(--rad);}
    #cal_week {font-size: 1.1rem; color: var(--clr-txt2); height:5vw;top:2vw}
    .calBut {font-size: 2.8vw; color: var(--clr-txt2); text-decoration: none; cursor: pointer}
    #kontakt {
      width: 80%;
      line-height: 1.5vw;

    }
    /*RUBR 1: */
    .ikw {max-width: 9vw;max-height: 9vw;object-fit: contain}
    .wrktechs {display: flex; flex-direction: row; height: 6vw}
    .wrktech {width: 6§vw; height:6vw; padding-right: 4px}
    .wrkikn {
      max-width: 5.6vw;
      max-height: 5.6vw;
      opacity: 1;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 621px) {
  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  
    /* Fallback solid color */
    background-color: var(--clr-bg);  
  
    /* Gradient background */
    background: radial-gradient(ellipse at 36% 20%, #2a3e4d, #161721);
    background-size: cover;
    position: relative;
    overflow: hidden; /* Prevents any potential scrollbars */
    font-size: var(--fs-1);font-weight: 900;text-transform:uppercase;
  }
  
  /* Overlay for horizontal lines */
  body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Creates horizontal lines */
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px 2px,  /* Space between lines */
      #16172145 2px 8px  /* Line color and thickness */
    );
  
    /* Ensures it appears above the gradient */
    pointer-events: none; /* Prevents interaction with the overlay */
  }
    #moz {position: fixed; width:100vw; height: 100vh; left:0vw; top: 0vh; overflow: hidden;z-index: 1}
    .mozbox {position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    float:middle;
    vertical-align:middle;
    user-select: none;}
    .menu {position: fixed;left: 2vw;width: var(--tWyd);top: 0vh;height: 3vh;margin-bottom: 2vh;z-index: 5}
    .menuikon {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 2vw; color: var(--clr-txt1); text-decoration: none}

    .rbr_but{width: 2vw}
    .knv {position: absolute;left: 2vw;width: var(--tWyd);height:94vh; top: 4vh; overflow-x:visible; overflow-y: auto;text-align: left; z-index: 3}
    .knv_list {list-style-type: none; position: absolute;padding-left: 0vw; height: 25vh;width: 100%}
    .iknKop{height: 5.5vw; padding-bottom: 20px}
    .iknLst{height: 2.5vw; cursor: pointer;}
    .ikn {position: relative; width: 1.8vw; height: 1.8vw; top: 0.2vw}
    .txt1, .txt2 {font-size: var(--fs-1)}
    #calender {width: 225px; background-color: var(--clr-bgfrm); border: 1px solid var(--clr-rand); border-radius: var(--rad);}
    #cal_week {font-size: 1.1rem; color: var(--clr-txt2); height:2vw;line-height: 2vw}
    .calBut {font-size: 1.4vw; color: var(--clr-txt2); text-decoration: none; cursor: pointer}
    #kontakt {
      width: 80%;
      line-height: 1.5vw;

    }
    /*RUBR 1: */
    .ikw {max-width: 5vw;max-height: 5vw;object-fit: contain}
    .wrktechs {display: flex; flex-direction: row; height: 3.6vw}
    .wrktech {width: 3.6vw; height:3.6vw; padding-right: 4px}
    .wrkikn {
      max-width: 3.4vw;
      max-height: 3.4vw;
      opacity: 1;
    }
}

.menu_ry {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.lngbuts {
  margin-left: auto;
  margin-right: 0;
  position: relative;
  float: right;
}

table td {
  text-align: left;
  vertical-align: top;

}


.svgbig {
  height: 100%;
  opacity: 0.2;
}

.nwshead {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;

}
.projimg {
  max-width: 100px;
  max-height: 100px;
  border: 1px solid var(--clr-rand); border-radius: var(--rad);
}
.nwsimg {
  /* -webkit-filter: grayscale(100%);
  filter: grayscale(100%);  */
  opacity: 0.4;
}

.nwsimg :hover {
  /* -webkit-filter: grayscale(100%);
  filter: grayscale(100%);  */
  opacity: 1;
}


/*=========================MENU==========================*/


.lng_buts:hover {color: var(--clr-txt1);}

/*=========================KANVAS==========================*/




/*==================RUBRIEK 0===================*/
textarea {
  background-color: var(--clr-bgfrm);
  border: 1px solid var(--clr-rand);
  border-radius: var(--rad);
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "ROND" 0; font-size: var(--fs-2); color: var(--clr-txt1); text-decoration: none;
}

#butt {
  background-color: transparent;
  border-width: 0px;
  margin-left: 0px;
  text-align: left;
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "ROND" 0; font-size: var(--fs-2); color: var(--clr-txt1); text-decoration: none;
  cursor: pointer;
}

.task {
  cursor: pointer;

}
.job {

  display: none

}
.jobline{
  position: relative;
  height: 22px;
  width: 36vw;
  /*
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
*/
}
.jobbg{
  position: absolute;
  top: 0px;
  height: 20px;
  width: 100%;
  background-color: #e6edf3;
  z-index: 1;
}
.jobikn {
  position: absolute;
  top: 0px;
  height: 20px;
  width: 20px;
  z-index: 2;
}
.jobimg {
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  border:0

}
.jobnaam {
  position: absolute;
  top: 0px;
  left: 25px;
  height: 20px;
  width: 80%;
  z-index: 3;
}





/*==================RUBRIEK 1===================*/



.hlyn {
  color: var(--clr-bgfrm);
}

/*----------TEKST-------------*/
a {cursor: pointer;}
.txt1 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; color: var(--clr-txt1)}
.txt2 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; color: var(--clr-txt2)}
.txt3 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; color: var(--clr-txt3)}

.txs1 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 0.8rem; line-height: 2.4vh; color: var(--clr-txt1); text-decoration: none}
.txs2 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 0.8rem; line-height: 2.4vh; color: var(--clr-txt2)}
.xxs1 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 0.6rem; line-height: 2.4vh; color: var(--clr-txt2);}
.xxs2 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 0.6rem; line-height: 2.4vh; color: var(--clr-txt2);}

.txr {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; color: #ae4d15}
.lnk {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; color: var(--clr-txt1); text-decoration: underline; cursor: pointer;}
.lnk2 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; color: var(--clr-txt1); text-decoration: none; cursor: pointer;}
a.lnk2:hover {color: var(--clr-txt1)}

h1 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 1.2rem; line-height: 3vh; color: var(--clr-txt1); text-decoration: none; margin-top: 5px;}
h2 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 1rem; line-height: 2.8vh; color: var(--clr-txt1); text-decoration: none; margin-top: 5px}
h3 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 0.5rem; line-height: 1.6vh; color: var(--clr-txt2); text-decoration: none; margin-top: -2vh;}
h4 {
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 0.6rem; line-height: 2vh; color: var(--clr-txt2); text-decoration: none; margin-top: -2vh;}

a {display:inline-block; top: -25px; text-decoration: none}


/*----------CALENDER----------*/

.cal {
  width: 224px;
  font-family: "DM Mono", monospace;
  display: flex;
}

#cal_head {color: var(--clr-txt2); height:2vw; line-height: 2vw; font-size: 0.7rem; justify-content: space-between}

.calBut:hover {color: var(--clr-txt1);}

#backButton {
  display:none;

}

#cal_week div {
  width: 30px;
  padding: 1px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
      font-family: "Doto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-style: normal;
      font-variation-settings: "ROND" 0; font-size: 0.7rem; color: var(--clr-txt1);
}
#cal_days {
  font-size: 0.7rem;
  flex-wrap: wrap;

}
.cal_day {
  width: 30px;
  text-align: center;
  vertical-align: middle;
  height: 30px;
  /*cursor: pointer;*/
  box-sizing: border-box;

  margin: 1px;
  /*box-shadow: 0px 0px 1px #CBD4C2;*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/*
.cal_day:hover {
  background-color: #e8faed;
}
*/
.cal_day + #pastDay {
  background-color: #ffffff34;
}
.cal_day + #futDay {
  background-color: #ffffffaa;
}
.cal_day + #rsrvDay {
  background-color: #e64f4f;
}

.event {
  font-size: 10px;
  padding: 3px;
  background-color: #58bae4;
  color: white;
  border-radius: 5px;
  max-height: 55px;
  overflow: hidden;
}
.padding {
  cursor: default !important;
  background-color: #FFFCFF !important;
  box-shadow: none !important;
}
#newEventModal, #deleteEventModal {
  display: none;
  z-index: 20;
  padding: 25px;
  background-color: #e8f4fa;
  box-shadow: 0px 0px 3px black;
  border-radius: 5px;
  width: 350px;
  top: 100px;
  left: calc(50% - 175px);
  position: absolute;
  font-family: "DM Mono", monospace;
}
#eventTitleInput {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 25px;
  border-radius: 3px;
  outline: none;
  border: none;
  box-shadow: 0px 0px 3px gray;
}
#eventTitleInput.error {
  border: 2px solid red;
}
#cancelButton, #deleteButton {
  background-color: #d36c6c;
}
#saveButton, #closeButton {
  background-color: #92a1d1;
}
#eventText {
  font-size: 14px;
}
#modalBackDrop {
  display: none;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba(0,0,0,0.8);
}
/*----------------------------*/

#proj1 {
  width: 40%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid var(--clr-rand); border-radius: var(--rad);
  background-color: var(--clr-bgfrm);
  display: none;
}