* {
    max-width: 100%;
    box-sizing: border-box;
}

body  { font-size: large; font-family: Arial,Helvetica,sans-serif; background-color: #000000; color: hsl(131, 74%, 56%); }
table { font-size: large; font-family: Arial,Helvetica,sans-serif; background: darkgray; color: #00008B; border-color: blue blue blue;}
td    { font-size: large; font-family: Arial,Helvetica,sans-serif; border-color: blue blue blue;}
input { font-size: large;}
a:link, a:visited { color: #3ce25a; text-decoration: none;}
a:hover {color:#FF0000; text-decoration: none; }
.kleine_regel { line-height: 40%; }
.text_bold { font-weight: bold; font-size: larger;}
.bold {font-weight: bold;}
.italic { font-style: italic;}
.transparentTable { background-color: transparent; max-width: 100%;}
.center { text-align: center;}
.middle {vertical-align: middle;}
.right  {text-align:right;}
.left   {text-align:left;}
.top    {vertical-align: top;}
.red {color:red;}
.white{ color:white;}
.width30 { width: 30%;}
.width100  {width: 100%;}
.pointer {cursor: pointer;}
.marginLeft80px {margin-left: 80px;}
.largerWhite {color: white;font-size: x-large;}
.orderFormTable  {width: 90%; border-collapse: separate; border: solid 5px #00008B; border-radius: 13px;}
.orderFormTable td {border-width: 1px; border-color: #00008B; border-style:dotted; border-collapse: collapse;}


.image-container img {
    display: inline;
}

.hrefButtons {
    display: flex;
    flex-wrap: wrap; /* Laat de knoppen naar een nieuwe regel gaan als het scherm te smal is */
    gap: 10px; /* Voegt ruimte toe tussen de knoppen */
    justify-content: flex-start; /* Zorgt ervoor dat de knoppen LINKS uitgelijnd blijven */
}

.hrefButtons a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: x-large;
    font-weight: bold;
    color: blue;
    background: #3ce25a;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 8px;
    text-align: center;
    /* white-space: nowrap; /* Voorkomt dat tekst binnen een knop afbreekt */
    min-width: 150px; /* Voorkomt dat knoppen te klein worden */
    max-width: 100%; /* Zorgt ervoor dat ze binnen het scherm blijven */
}

.hrefButtons a:visited {
    color: #00008B;
}

.hrefButtons a:hover {
    background-color: #FF0000;
    cursor: pointer;
}


.deliveryTable table
{
  background: inherit;
  width: 50%;
  color:inherit;
  border:4px solid blue;
  border-radius: 10px;
  border-collapse: separate; /* Wijzig van collapse naar separate */
  border-spacing: 0; /* Verwijdert ruimte tussen de cellen */
}
.deliveryTable th
{
    background-color: darkslategrey;
    text-align:left;
    font-weight: bold; 
    font-size: larger;
    color:red;
    border:1px blue solid;
    padding: 5px;
}
.deliveryTable td{
    border:1px blue dashed;
    padding: 5px;
}



.responsive-H1 { font-size: 2.5rem; }
@media (max-width: 767px) /* seting special for mobile */
{
    .responsive-H1 {font-size: 1.5rem; }
}