@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Varela&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');

:root{
    --black: #333;
    --grey: #555;
    --light-grey: #f0f0f0;
    --dark-grey: #ccc;
    --background: #f0f0f0;
    --white: #fff;
    --red: crimson;
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Variables */
body.dark-mode {
    --black: #f0f0f0;
    --grey: #ccc;
    --light-grey: #626262;
    --dark-grey: #f1f1f1;
    --background: #333;
    --white: #444;
    --red: #a43131;
    --box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}

*{
  box-sizing: border-box;
}

body {
background-color: var(--background);
font-family: 'Poppins', sans-serif;
 margin: 50px;
 transition: background-color 0.3s, color 0.3s;
}



.menu {
display: flex;
justify-content: space-around;
align-items: center;
background-color: var(--white);
flex-wrap: wrap;
/* padding: 10px 20px; */
border-radius: 5px;
box-shadow: var(--box-shadow);
font-size: 18px;
color: var(--black);
}

.menu a {
text-decoration: none;
color: var(--black);
margin-right: 10px;
cursor: pointer;
}

.menu a:hover {
color: var(--grey);
text-emphasis: bold;
text-decoration: underline;
}

.icoon {
margin-right: 5px;
}

span {
font-weight: bold;
color: var(--red);
font-style: italic;
text-transform: uppercase;
}

h1 {
color: var(--black);
font-size: 40px;
}

h2 {
color: var(--black);
text-transform: capitalize;
}

.content {
position: relative;
display: flex;  
justify-content: center;
align-items: start;
flex-wrap: wrap;
flex-direction: column;
}

.container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column; 
  align-items: center;
  /* flex-wrap: wrap; */
  background-color: var(--white);
  padding: 20px;
  border-radius: 5px;
  box-shadow: var(--box-shadow) ;
  color: var(--black);
}

.pagina {
display: flex;
justify-content: right;
align-items: center;
flex-wrap: wrap;
padding: 20px;
}

.begin-tekst {
  font-size: 18px;
  color: var(--black);
  font-weight: bold;
  font-style: italic;
}

 a {
text-decoration: none;
color: var(--black);
/* margin-right: 10px; */
cursor: pointer;
}

 a:hover {
color: var(--grey);
text-emphasis: bold;
text-decoration: underline;
}



label {
  font-size: 18px;
  font-weight: bold;
  color: var(--black);
  /* margin-bottom: 5px; */
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

input {
  padding: 12px 15px;
  margin: 12px 0;
  border-radius: 8px;
  font-size: 16px;
  width: 17vw;
  border: 1px solid var(--grey);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus {
  border-color: var(--black);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  outline: none;
}

button {
  padding: 12px 25px;
  margin: 12px 10px;
  border: none;
  border-radius: 30px;
  background-color: var(--red);
  color: var(--white);
  font-size: 16px;
  width: 17vw;
  height: auto;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:focus {
  border-color: var(--black);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  outline: none;
}

button:hover {
  background-color: var(--black);
  transform: scale(1.05);
}

button:active {
  background-color: var(--grey);
  transform: scale(0.98);
}

input[type="radio"] {
  margin: 10px;
  border: 1px solid var(--black);
}

input[type="submit"] {
  padding: 12px 25px;
  margin: 12px 10px;
  border: none;
  border-radius: 30px;
  background-color: var(--red);
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

input[type="submit"]:hover {
  background-color: var(--black);
  transform: scale(1.05);
}

input[type="submit"]:active {
  background-color: var(--grey);
  transform: scale(0.98);
}

textarea {
  padding: 12px 15px;
  margin: 12px 0;
  font-size: 16px;
  border-radius: 8px;
  width: 25vw;
  height: 18vw;
  border: 1px solid var(--grey);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea:focus {
  border-color: var(--black);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  outline: none;
}


.rating {
  margin-top: 10px;
  border: none;
  display: flex;
  flex-direction: row-reverse;
  align-items: start;
  /* float: left; */
  justify-content: flex-end;
  }

.rating:hover {
    cursor: pointer;
  }
  
  .rating > label {
    color: var(--grey);
    float: right;
  }
  
  .rating > label:before {
    margin: 5px;
    font-size: 2em;
    font-family: FontAwesome;
    content: "\f005";
    display: inline-block;
  }
  
  .rating > input {
    display: none;
  }
  
  .rating > input:checked ~ label,
  .rating:not(:checked) > label:hover,
  .rating:not(:checked) > label:hover ~ label {
    color: #F79426;
  }
  
  .rating > input:checked + label:hover,
  .rating > input:checked ~ label:hover,
  .rating > label:hover ~ input:checked ~ label,
  .rating > input:checked ~ label:hover ~ label {
    color: #FECE31;
  }

  .bericht {
    border: 1px solid var(--black);
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    min-width: 100%;
    background-color: var(--white);
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
}

.bericht:hover {
    background-color: var(--light-grey);
    /* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); */
    box-shadow: var(--box-shadow);
}

.reply {
    border: 1px solid var(--black);
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    min-width: 80%;
    max-width: 90%;
    /* background-image: linear-gradient(to right, var(--light-grey), var(--grey)); */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
}

.reply:hover {
 /*    background-image: linear-gradient(to right, var(--grey), var(--dark-grey)); */
   /*  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); */
    box-shadow: var(--box-shadow);
   
}


.pagina a, .pagina span {
  margin-right: 10px;
}

.current-page {
  color: var(--black)!important;
  font-weight: bold!important;
  font-style: normal!important;
}

.tijd {
    font-size: 12px;
    color: var(--grey);
}

.parent-message {
    margin-top: 20px;
    border: 1px solid var(--black);
    padding: 10px;
    border-radius: 5px;
    
    color: var(--black);
}

.sort-options {
    background-color: var(--white);
    /* padding: 20px; */
    margin-left: 14px;
   
}

.sort-options a {
  text-decoration: none;
  color: var(--black);
  cursor: pointer;
  }
  
  .sort-options a:hover {
  color: var(--grey);
  text-emphasis: bold;
  text-decoration: underline;
  }


  .photo img {
    width: 20%;
    height: auto;
    border-radius: 5px;
    /* margin: 20px; */
    border-radius: 5px;
    box-shadow: var(--box-shadow);
  }

footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--white);
    padding: 20px;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    font-size: 18px;
    color : var(--black);
}

footer a {
text-decoration: none;
color: var(--black);
margin-right: 10px;
cursor: pointer;    
}

footer a:hover {
color: var(--grey);
text-emphasis: bold;
text-decoration: underline;
}

#dark-mode-toggle {
    background-color: var(--red);
    color: var(--white);
    padding: 10px;
    border-radius: 5px;
    font-size: 24px;
    cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  
}

th {
  background-color: var(--background);
}

tr:hover {
  background-color: var(--white);
}

tr:nth-child(even) {
  background-color: var(--grey);
  color: var(--white);
}

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

.model:hover {
  cursor: pointer;
}

.modal-content {
  margin: auto; 
  display: block; 
  max-width: 90%; 
  max-height: 90%;
  animation-name: zoom;
  animation-duration: 0.6s;
}

.close {
animation-name: zoomout;
animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

@keyframes zoomout {
  from {transform: scale(1)}
  to {transform: scale(0)}
}

@media  (max-width: 768px) {
    .menu {
        flex-direction: column;
    }
    .container {
        max-width: 100%;
    }
    .bericht {
        max-width: 100%;
    }
    input {
        width: 90%;
    }
    textarea {
        width: 100%;
        min-height: 100% ;
    }
    body {
        margin: 5px;
    }
    input[type="submit"] {
        margin-right: 0px;
        margin-top: 10px;

    }
    .sort-options {
        margin-left: 0px;
    }
    button {
      width: 33vw;
    }
    
    
}