/*-------------------- Algemene Styleing -----------------*/

body, ul, li
{
    padding: 0;
    margin: 0;
}


body {
  background-color: #87608e;
  background-image: radial-gradient(#c073c0 1px, transparent 4px);
  background-size: 50px 50px;
}


li
{
    list-style: none;
    text-align: center;
}

h1, h3, p
{
    color: black;
}



/*-------------------- Card Link styleing ----------------------*/

.btn-link
{
    text-align: center;
    display: inline-block;
    height: 40px;
    width: 110px;
    background-color: #ff66ff;
    color: black;
    border: solid 3px   #9e5791;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
}

.btn-link:active
{
    text-align: center;
    display: inline-block;
    height: 40px;
    width: 110px;    
    border: solid 3px   #9e5791;
    background-color: #ffbbff;   
    box-shadow: none;
    text-decoration: none;
}

.btn-link:hover
{
    text-align: center;
    display: inline-block;
    height: 40px;
    width: 110px;    
    color: black;
    border: solid 3px   #9e5791;
    text-decoration: none;
    background-color: #ff99ff;   
}

/*-------------- Card body Styleing ------------------*/

.card
{
    margin: 30px 20px 30px 20px;
    background-color: #f9d6f3;
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
}

.shadow
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}



/*--------------------- Primary Button Styling ---------------------*/

.modal-btn {
    height: 40px;
    width: 110px;
    background-color: #ff66ff;
    color: black;
    border: solid 3px   #9e5791;
    border-radius: 50px;
    cursor: pointer;
}

/* Hover state */
.modal-btn:hover {
    background-color: #ff99ff;   
}

/* Active */
.modal-btn:active,
.modal-btn.active {
    background-color: #ffbbff;   
    box-shadow: none;
}

/* Focus state */
.modal-btn:focus,
.modal-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/*---------------------Modal styleing---------------------*/

.modal-content {
  background-color: #2b0033;
  color: white;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}

.modal-header,
.modal-footer {
  border: none;
}

.modal-title {
  color: #ff66ff;
  font-weight: bold;
}

.modal-body {
  font-size: 19px;
  line-height: 1.6;
}

.modal .btn {
  border-radius: 20px;
}

.modal .btn-secondary {
  background-color: #ff66ff;
  border: none;
  color: black;
}

.modal .btn-secondary:hover {
  background-color: #ff99ff;
}
/*-------------------------- Contact ---------------------*/
.form-label
{
    color: white;
}