:root {--theme-color: #241f31;}
.navbar{background-color: var(--theme-color) !important;}

/* make the scoreboard elements the correct color for visibility */
.container-fluid{
	background-color: rgba(36, 31, 49, 0.7) !important;
}


.input-filled-valid{
	background-color: rgba(36, 31, 49, 0.7) !important;
	color: rgb(255,255,255) !important;
}

.form-control{
        background-color: rgba(36, 31, 49, 0.7) !important;
        color: rgb(255,255,255) !important;
}

.form-text{
	color: #00FF00 !important;
}

#password-policy-error{
    background-color: rgba(36, 31, 49, 0.7); 
}

/* Ovverride buttons */
.btn-primary {
  --bs-btn-border-color: #40c125 !important; 
  --bs-btn-hover-border-color:  #40c125 !important;
}

.alert-danger{
  --bs-alert-bg: rgba(87, 77, 66, 0.7) !important;
  --bs-alert-color: rgb(255, 39, 62) !important; 
}

.alert-info{
  --bs-alert-bg: rgb(86, 101, 104); !important;
  --bs-alert-color: rgb(76, 226, 255) !important;
}

.btn-close{
  --bs-btn-close-color:	#00FF00 !important;
}

::placeholder { /* Text in input fields */
    color: #999 !important;
}



body {
        /* Set the background image */
        background-image: url('https://kpn-ctf.nl/kpnctf-theme/background2.jpg');
        background-size: cover; /* Scale the image to cover the entire background */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent the image from repeating */
        background-attachment: fixed; /* Keep the background fixed while scrolling */
        color: #00FF00; /* Neon green text color for the body */
        font-family: 'Courier New', monospace; /* Monospace font for a hacker vibe */
        margin: 0;
        padding: 0;
        height: 100vh; /* Ensure the body takes up the full viewport height */
}

    /* Style for headings */
h1, h2, h3, h4, h5, h6 {
        color: #00FF00; /* Neon green for headings */
        text-shadow: 0 0 4px #00FF00, 0 0 20px #00FF00; /* Glow effect */
}

    /* Style for paragraphs and other text */
p, span, div {
        color: #00FF00; /* Neon green for all text */
}

    /* Style for links */
a {
        color: #39FF14; /* Slightly brighter green for links */
        text-decoration: none; /* Remove underline */
}

a:hover {
        text-shadow: 0 0 5px #39FF14; /* Glow effect on hover */
}

.nav-link {
        color: #39FF14; /* Slightly brighter green for links */
        text-decoration: none; /* Remove underline */
}
    
.nav-link:hover {
        text-shadow: 0 0 5px #39FF14; /* Glow effect on hover */
}

    /* Optional: Style for banners or containers */
.banner {
        background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background for contrast */
        padding: 20px;
        border: 2px solid #00FF00; /* Green border */
        box-shadow: 0 0 10px #00FF00; /* Green glow */
        margin: 20px;
        text-align: center;
}
.modal-content{
        /*background-image: url('https://kpn-ctf.nl/kpnctf-theme/background1.png');  */
        background-image: url('https://kpn-ctf.nl/kpnctf-theme/challenge_teaser.png');  
        background-size: cover;
}

/* CHALLENGES Section */
/* The Challenges Categories */
.category-header {
    display: inline-block !important; /* Shrinks to fit content */
    background-color: #212529 !important; 
/*    padding: 0.25rem 0.5rem !important;   /* optional spacing */
    border-radius: 8px !important;    /* optional rounded corners */
    text-align: center;

}

/* center challenges if not 4 */

.challenges-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;           /* allows wrapping if needed */
  max-width: 100%;           /* restricts to parent's width */
  overflow-x: hidden;        /* hides overflow */
  box-sizing: border-box;    /* respects padding in sizing */
  row-gap: 12px;
}

html body main div.container div#challenges-board div#misc-row.pt-5 div.category-challenges.col-md-12 div.challenges-row.col-md-12 div {
  flex: 0 1 auto;
  max-width: 23.5%;          /* ensures no single child takes too much space */
}

/* Stamped RESOLVED effect for solved challenges */

.solved-challenge {
  background-color: rgb(33, 37, 41) !important;
  opacity: 0.9 !important;
  position: relative;
  overflow: hidden;
}

.solved-challenge::after {
  content: "SOLVED";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-size: 2rem;
  font-weight: bold;
  color: rgba(255, 0, 0, 0.85);
  border: 2px solid rgba(255, 0, 0, 0.75);
  padding: 6px 14px;
  border-radius: 4px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: stampIn 0.6s ease forwards;
}

@keyframes stampIn {
  0% {
    transform: translate(-50%, -50%) scale(2) rotate(-15deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(-15deg);
    opacity: 1;
  }
}

/* Custom CSS to override Bootstrap's table-striped */
.table-striped thead,
.table-striped td,
.table-striped a, 
.table-striped span{
    color: #000 !important;                       /* header text */
} 


/* Make sure that the labels for forms are readable */
.text-muted,
html body main div.container div.row div.col-md-6.offset-md-3 p,
html body main div.container div.row div.col-md-6.offset-md-3 form div.mb-4 b label,
html body main div.container div.row div.col-md-6.offset-md-3 h5.text-center,
html body main div.container div.row div.col-md-6.offset-md-3 form.form-horizontal div.mb-4 label,
html body main div.container div.row div.col-md-6.offset-md-3 form.form-horizontal div.row div.col-md-12 p,
html body main div.container div.row div.col-md-8 div#v-pills-tabContent.tab-content div#profile.tab-pane.fade.show.active form#user-profile-form.form-horizontal div.mb-4 b label{
    background-color: rgba(36, 31, 49, 0.7); 
    padding: 2px;
    border-radius: 4px !important;
}

/* Give awards also a background */
html body main div.container div.row div.col-md-3.col-sm-6{
    background-color: rgba(36, 31, 49, 0.7); 
    padding: 10px;
    border-radius: 4px !important;
}

/* make challenge descriptions more readable */
html body.modal-open main div#challenge-window.modal.fade.show div.modal-dialog div.modal-content div.modal-body div div.tab-content div#challenge.tab-pane.fade.show.active span.challenge-desc p{
    background-color: rgba(36, 31, 49, 0.7); 
    padding: 4px;
    border-radius: 8px !important;
}

/* Hint screen text readable */
html body.modal-open div.modal.fade.show div.modal-dialog.modal-dialog-centered.modal-lg div.modal-content div.modal-body p {
    background-color: rgba(36, 31, 49, 0.7); 
    padding: 4px;
    border-radius: 8px !important;
}

/* custom modal for Docker Challenges */
/* Custom Table-Striped for the Challenges Solves window */
#solves .table-striped {
    --bs-table-accent-bg: rgba(71, 64, 88, 0.7) !important; /* your custom color */
    color: #0000ff !important; /* optional: change text color if needed */
}

#solves .table-striped thead,
#solves .table-striped td,
#solves .table-striped a, 
#solves .table-striped span{
    color: rgb(34,40,34) !important;                       /* header text */
}

/* round the hint fields a bit */
.load-hint{
	border-radius: 8px;
}

/* Hints warning when not enough points */
html body.modal-open div.modal.fade.show div.modal-dialog.modal-dialog-centered.modal-lg div.modal-content div.modal-body div.text-danger{
    background-color: rgba(36, 31, 49, 0.7);
    padding: 2px;
    border-radius: 4px !important;
    text-align: center;
}


/* Make the users score page look better */
html body main div.container div.row div.col-md-12.d-none.d-md-block.d-lg-block div#score-graph.w-100.d-flex.align-items-center div canvas{
	background-color: rgba(255,255,255,0.4);
}
html body main div.container div.row div.col-md-12.d-none.d-md-block.d-lg-block div#score-graph.w-100.d-flex.align-items-center div div div {
	color: rgb(0,0,0) !important;
}
html body main div.container div.row div.col-md-12.d-none.d-md-block.d-lg-block div#score-graph.w-100.d-flex.align-items-center div div div div div div{
	text-align: center;
}
html body main div.container div.row div.col-md-12.d-none.d-md-block.d-lg-block div#score-graph.w-100.d-flex.align-items-center div div div div div div span {
	color: rgb(0,0,0) !important;
	margin-right: 10px;
}
html body main div.container div.row div.col-md-12.d-none.d-md-block.d-lg-block div#score-graph.w-100.d-flex.align-items-center div div div div div div span:nth-of-type(3) {
	font-weight: bold;
}

html body main div.container div.row:nth-of-type(2) {
	background-color: rgba(255,255,255,0.9) !important;
	border-radius: 4px !important;
	padding: 4px;
}
.table-striped {
	opacity: 0.8;
}
html body main div.container div.row div.col-md-12.d-none.d-md-block.d-lg-block div#score-graph.w-100.d-flex.align-items-center {
	background-color: rgba(255,255,255,0.3) !important;
	border-radius: 8px !important;
}



/* Make score board graph text more visible */
#score-graph{
	background-color: rgba(255,255,255,0.8) !important;
}

#scoreboard{
	background-color: rgba(255,255,255,0.8) !important;
}
html body main div.container div#score-graph.row.d-flex.align-items-center div {
	width: 400px;
	color: rgb(0,0,0) !important;
}
html body main div.container div#score-graph.row.d-flex.align-items-center div div div div {
	text-align: center;
}
html body main div.container div#score-graph.row.d-flex.align-items-center div div div div div div span{
	color: rgb(0,0,0) !important;
	margin-right: 10px;
}
html body main div.container div#score-graph.row.d-flex.align-items-center div div div div div div span:nth-of-type(3) {
  font-weight: bold;
}


.custom-modal-content {
	background-color: rgba(36, 31, 49, 0.7); !important;
}
.custom-modal-header {
	background-color: rgba(36, 31, 49, 0.7) !important;
}

html body footer.footer div.container.text-center a.text-secondary small.text-muted{
	color: #74BD74 !important;
	opacity: 0.0;
}