body {
   font-family: 'Arial', sans-serif;
   background-color: #261b33  !important;
}

#explain {
   color: rgb(255, 255, 255) !important;
   cursor: pointer;
}

b {
   color: #ccc !important;
   text-align: center !important;
}
a {
   color: #8f81e4 !important;
   text-decoration: none;
}

a:hover {
   color: #6454da !important;
   text-decoration: underline;
}


.img-fluid {
   max-width: 100%;
   height: auto;
   border-color: #3e2e4d !important;
   transition: transform 0.3s ease, box-shadow 0.3s ease; 
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   cursor: pointer;
}

.img-fluid:hover {
   transform: translateY(-5px);  
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.35); 
}


.navbar {
    background-color: #2b2037 !important;
    align-items: center !important;
    display: flex !important;
    box-shadow: #0003 0 4px 6px -1px, #0000001f 0 2px 4px -1px !important;
    touch-action: none !important;
}

.navbar-brand,
.navbar-nav .nav-link {
   color: #dadbd9 !important;
}

.navbar-brand:hover,
.navbar-nav .nav-link:hover {
   color: #d3d3d3 !important;
}

.form-control {
   border: 1px solid #3e2e4d !important;
   background-color: rgba(20, 15, 15, 0.2) !important;
   color: #ffffff !important;
}



h1 {
   color: #ccc !important;
   font-size: 6rem !important;
   animation: heartbeat 4s ease-in-out infinite;
   position: relative;
   text-decoration: none;
   text-shadow: 0 0 5px #9e4eef, 0 0 10px #9e4eef, 0 0 10px #9e4eef, 0 0 10px #9e4eef, 0 0 10px #9e4eef;
   text-align: center;
   cursor: pointer;
}
h2{
   animation: heartbeat 4s ease-in-out infinite;
}

@keyframes heartbeat {
   0% {
      text-shadow: 0 0 0 #9e4eef;
   }
   25% {
      text-shadow: 0 0 20px #9e4eef;
   }
   50% {
      text-shadow: 0 0 0 #9e4eef;
   }
   75% {
      text-shadow: 0 0 20px #9e4eef;
   }
   100% {
      text-shadow: 0 0 0 #9e4eef;
   }
}



input[type="number"], input[type="text"] {
   width: 100%;
   padding: 8px;
   margin-bottom: 15px;
   border: 1px solid #3e2e4d !important;
   border-radius: 4px;
   box-sizing: border-box;
   background-color: rgba(20, 15, 15, 0.2) !important;
   color: #ffffff !important;
}


.btn-primary {
   background-color: #6454da !important;
   border-color: #6454da !important;
   color: #fff !important;
}

.btn-primary:hover {
   background-color: #8f81e4 !important;
   border-color: #8f81e4 !important;
}


.card {
   background-color: #342144 !important;
   border-color: #3e2e4d !important;
   transition: transform 0.3s ease, box-shadow 0.3s ease; 
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
   cursor: pointer;
}

.card:hover {
   transform: translateY(-5px); 
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); 
}

.card-body {
   color: #ccc !important;
   text-align: center; 
}

.card-title {
   color: #ccc !important;
   text-align: center; 
}

.card-text {
   color: #ccc !important;
   text-align: center; 
}

footer {
   background-color: #342144 !important;
   color: #fff !important;
}

.text-muted {
   color: #ffffff !important;
}

h5,h3 {
   color: #ffffff !important;
}

#cookieConsentContainer {
   background-color: #f1f1f1; 
   padding: 10px;
   font-family: Arial, sans-serif;
   font-size: 14px;
}

#cookieConsentContainer p {
   margin-bottom: 0;
   color: #333; 
}

#acceptCookieConsent,
#rejectCookies {
   margin-top: 5px;
   padding: 5px 10px;
   font-size: 14px;
}

#acceptCookieConsent {
   background-color: #007bff; 
   border: none;
   color: #fff; 
}

#rejectCookies {
   background-color: #dc3545; 
   border: none;
   color: #fff; 
}

#acceptCookieConsent:hover,
#rejectCookies:hover {
   opacity: 0.8; 
   cursor: pointer;
}

input[type="number"],
input[type="text"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="number"] + input[type="number"],
input[type="text"] + input[type="text"] {
    margin-top: 10px;
}

li{
   color:white;
}
.note{
   color: #e50707 !important;
   text-align: center;
}
.protect{
   color: #ffffff !important;
}