main {
  display: flex;
  margin: 0;
  padding: 0;
}

.clearBoth {
  clear: both;
}

#breadcrumbs {
  display: inline-block;
  background-color: hsla(0, 0%, 100%, .1);
  border-radius: 10px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.1);
  margin: 10px 0;
  padding: 4px 8px;
}

#breadcrumbs a,
#breadcrumbs span {
  color: white;
  font-size: .9rem;
  vertical-align: text-bottom;
}

/** Box **/
.box {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2);
  padding: clamp(10px, .5vw, 20px) 30px;
  box-sizing: border-box;
}

.box h2.title {
  display: block;
  color: var(--textColor);
  font-family: var(--robotoBold);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--blue);
}

.box > ul {
  margin: 0;
  padding: 0;
}

.box > ul li {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.box > ul li + li {
  border-top: 1px solid hsl(60, 1%, 85%);
  margin-top: 10px;
  padding-top: 10px;
}

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

/*===( Box items )===*/
.box .item {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  box-shadow: 0 1px 0 0 var(--gray1);
  cursor: pointer;
}

.box .item:last-of-type {
  box-shadow: none;
}

.box .item p {
  margin: 5px 0;
  padding: 0;
}

.box .item a {
  position: relative;
}

.box .item a:hover {
  color: var(--orange);
}

.box .item .title {
  margin: 0;
  color: var(--blue);
  text-decoration: none;
}

.box .item .title:first-line {
  text-transform: capitalize;
}

.box .item .agenda-date {
  margin: 0 0 8px;
  color: var(--blue);
  font-family: var(--robotoMedium);
  text-transform: capitalize;
}

.box .item span {
  position: relative;
  color: black;
  font-family: var(--robotoMedium);
  transition: color 0.2s ease-in-out 0s;
  user-select: none;
  pointer-events: none;
}

.box .item::before {
  content: "";
  opacity: 0;
  position: absolute;
  top: -1px;
  right: -15px;
  bottom: -1px;
  left: -15px;
  background-color: hsl(60, 1%, 95%);
  border-radius: 10px;
  transition: all 0.2s ease-in-out 0s;
}

.box .item:hover::before {
  opacity: 1;
}

.box .item .readOnLink {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/** Frontpage **/
#frontpage {
  flex: 1;
  margin: 0;
}

#frontpage .box {
  width: 21vw;
  min-width: 200px;
  max-width: 320px;
}

#frontpage .content {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2vw, 30px);
  justify-content: center;
  align-items: start;
  margin: -140px 0 0 0;
  padding: 0 clamp(20px, 2vw, 40px);
}

#frontpage #banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--blue);
  border-radius: 50px;
  padding: clamp(40px, 2vh, 100px) clamp(40px, 4vw, 200px) 160px;
  box-sizing: content-box;
  color: white;
  overflow: hidden;
  z-index: -1;
}

#frontpage #banner span {
  margin: 20px;
}

#frontpage #banner img {
  width: 100%;
  max-width: 300px;
  max-height: 100%;
}

#frontpage #banner h1 {
  color: white;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--orange);
  text-shadow: 0px 2px 1px hsla(0, 0%, 0%, .4);
}

#frontpage #banner p {
  max-width: 600px;
  color: white;
  font-size: 1.25rem;
  text-shadow: 0px 1px 1px hsla(0, 0%, 0%, .4);
}

section {
  position: relative;
  width: 150%;
  padding: 10px clamp(10px, 2vw, 40px);
  box-sizing: border-box;
}

section::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: -10px;
  right: 0;
  bottom: -10px;
  left: -120px;
  background-color: var(--blue);
  border-radius: 25px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2),
              0px -2px 0px inset hsla(0, 0%, 0%, 0.2);
  box-sizing: border-box;
}

section h1 {
  color: white;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--orange);
  text-shadow: 0px 2px 1px hsla(0, 0%, 0%, .4);
}

section article h1 {
  color: black;
  text-decoration-color: var(--blue);
  text-shadow: none;
}

section > p {
  color: white;
}

#section_head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.textbox,
article {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 6px 12px hsla(0, 0%, 0%, .2);
  margin: 20px 0;
  padding: clamp(20px, 1vw, 40px) clamp(8px, 2vw, 40px);
}

.textbox a:hover,
article a:hover {
  color: var(--orange);
}

article table :is(input[type="text"],
                  input[type="email"],
                  input[type="date"],
                  input[type="file"],
                  input[type="number"],
                  input[type="password"],
                  input[type="search"],
                  input[type="tel"],
                  input[type="url"],
                  textarea) {
  width: 100%;
}

.textbox {
  margin: 10px 0;
}

/*===[ formSubmit ]===*/
.formSubmit {
  padding: 10px 20px;
  background-color: var(--blue);
  border: none;
  border-radius: 5px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2);
  color: white;
  font-family: var(--robotoMedium);
  text-transform: uppercase;
}

.formSubmit:hover {
  background-color: #e80092;
}

.containerSubmit, .alignCenter {
  text-align: center;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ordersForm .pad {
  text-align: right;
}

.complaintForm {
  max-width: 100%;
  margin-top: 10px;
}

.complaintForm table {
  max-width: 100%;
}

.complaintForm .tableInputs {
  min-width: 600px;
}

.complaintTableBorder {
  border: 1px solid lightgrey;
  margin: 10px 0;
}

.editfield-radio span {
  white-space: normal !important;
}

.nieuws-date {
  color: var(--gray2);
  font-size: .8rem;
}

.site-sidebar {
  padding: 10px 10px 10px 5px;
}

.tags {
  border-top: 1px solid var(--gray1);
  margin-top: 18px;
  padding-top: 6px;
}

.tags label {
  color: hsl(0, 0%, 70%);
  font-size: .8rem;
}

.tags span {
  border-radius: 50px;
  box-shadow: 0 1px 3px hsla(0, 0%, 0%, .3);
  margin: 0 2px;
  padding: 2px 8px;
  color: hsl(0, 0%, 60%);
  font-size: .8rem;
}

.site-item {
  padding: 20px 0px;
  border-top: solid var(--blue) 3px;
}


.bestelformulier {
  hgroup {
    margin-bottom: 20px;
    font-style: italic;
    color: gray;

    p {
    margin: 0;
    }
  }

  .bestelTabel {
    width: 100%;
    margin: 20px 0;
    padding: 20px;
    background-color: hsl(60, 1%, 95%);
    border: none;
    border-radius: 10px;
    box-shadow: inset 0px 2px 6px hsla(0, 0%, 0%, 0.2);

    strong {
      display: block;
      margin-bottom: 10px;
      font-size: 1.125rem;
    }
  }
  
  .chooseProduct {
    margin-top: 20px;
  }
  
}

.number-spam-challenge {
  display: flex;
  align-items: center;
}

/*table row een kleurt geven zodat ze wat overzichtelijker zijn (zodra een input erin zit krijgt hij geen kleur)*/
.singleArticle tr:not(:has(input)):nth-child(2n) {
    background-color: hsl(0, 0%, 95%);
}

/* the menu goes under the logo */
@media (max-width: 1000px) {

  #frontpage .content .box {
    width: 40vw;
  }

  #frontpage .content nav {
    order: 0;
  }

  #frontpage .content #agenda {
    order: 1;
  }

  #frontpage .content #news {
    order: 2;
  }

}

@media (max-width: 800px) {

  #frontpage #banner {
    padding-top: 10px;
  }

  #frontpage #banner img {
    display: none;
  }

  #frontpage #banner p {
    max-width: none;
  }

  section::before {
    top: 0;
    left: 0;
  }

  .site {
    margin: 0;
  }

  .complaintForm .tableInputs {
    min-width: 100%;
  }

  /* using an image's width and height attributes is not a good idea but it happens often */
  .singleArticle img {
    max-width: 100%;
    height: auto; /* avoid getting a distorted image */
  }

  /* using a table's width attribute is not a good idea but it happens often when they copy/paste */
  .singleArticle table {
    /* max-width does not work to overwrite table width */
    width: auto;
    word-break: break-word;
  }

  h1, h2, h3 {
    word-break: break-word;
  }

}

@media (max-width: 500px) {

  #frontpage .content .box {
    width: 80vw;
  }

  body {
    padding: 0 10px;
  }

}