*, *::before, *::after {
    box-sizing: border-box;
}
html {
	font-family: "Roboto", sans-serif;
	color: #fff;
}

body {
	width:850px;
	margin-left:auto;
	margin-right:auto;
	background-size: cover;
	background-position: center;
}
@media (max-width: 850px) {
	body {
		width:100%;
        padding: 10px;
	}
}

#page {
	background-color: #000;
	border: 4px solid #FF5500;
	border-radius: 22px;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-left: 40px;
	padding-right: 40px;
}
@media (max-width: 850px) {
	#page {
		margin: 0px;
        padding-left: 20px;
        padding-right: 20px;
	}
}

p {
	font-size: 14px;
}
h1 {
	color: #FF5500;
}
@media (max-width: 850px) {
	h1 {
		font-size: 25px;
	}
}
h2 {
	margin-top: 35px;
}
@media (max-width: 768px) {
    h2 {
        margin-top: 20px;
    }
}

#logo {
	display: block;
	margin: auto;
	height: 180px;
}
@media (max-width: 850px) {
	#logo {
		height: 120px;
	}
}

.orange {
	color: #FF5500;
	font-weight: 600;
}

li::marker {
    color: #FF5500;
}



/* Menu */
.navbar {
    background-color: #212121;
    border-radius: 22px;
    margin-bottom: 50px;
}
.nav-links {
    display: flex;
    justify-content: space-evenly; /* eller space-between */
    align-items: center;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-links li {
    flex: 1;              /* Alle punkter bliver lige brede */
    text-align: center;
}
.nav-links a {
    display: block;       /* Fylder hele li */
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 14px 0;
    transition: 0.3s;
}
@media (max-width: 850px) {
    .nav-links a {
        font-size: 14px;
        padding: 12px 0;
    }
    .nav-links li {
        flex: 0;              /* Alle punkter bliver IKKE lige brede */
    }
}

.nav-links a:hover, a.active, a {
    color: #FF5500;
    text-decoration: none;
    /* box-shadow: 0 0 52px #FF5500; */
}
a:hover {
	text-decoration: underline;
}


/* Progress bars - https://codeshack.io/pure-css-modern-progress-bars-collection/ */
.pb-showcase-container {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
}
.pb-section-title {
  font-size: 1.6em;
  color: #2c3e50;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 8px;
}
.pb-section {
  display: flex;
  flex-direction: column; /* Stack progress bars */
  gap: 20px; /* Space between progress bars */
  padding: 0px;
  padding-top: 5px;
  padding-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 50, 100, 0.06);
}

/* ==== Base Progress Bar Styles ==== */
.pb-container {
  background-color: #e9ecef; /* Track color */
  border-radius: .25rem; /* Default Bootstrap-like radius */
  overflow: hidden; /* Important for border-radius on fill */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
  height: 20px; /* Default height */
  position: relative; /* For labels if any */
}

.pb-fill {
  height: 100%;
  background-color: #007bff; /* Default blue, will be overridden by color classes */
  transition: width .6s ease;
  display: flex; /* For label alignment */
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ==== Style Variation 3: Animated Stripes (pb-animated) ==== */
.pb-striped.pb-animated .pb-fill {
  animation: pb-stripes-animate 1s linear infinite;
}
@keyframes pb-stripes-animate {
  0% { background-position-x: 1rem; }
}

/* ==== Color Variations for .pb-fill ==== */
/* Blue (Default, but explicit class for clarity) */
.pb-blue .pb-fill { background-color: #2196F3; }

/* Green */
.pb-green .pb-fill { background-color: #4CAF50; }

/* Red */
.pb-red .pb-fill { background-color: #f44336; }

/* yellow */
.pb-yellow .pb-fill { background-color: #f4b300; }

/* Grey */
.pb-grey .pb-fill { background-color: #78909c; }



/* Footer */
footer {
	border-top: 3px solid #FF5500;
	margin-top: 40px;
	padding-bottom: 20px;
	padding-top: 20px;
	text-align: center;
}



/* 2 Kolone Layout */
#container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    #container {
        grid-template-columns: 1fr;
    }
}



/* Søger Hold Blink */
.blink_me {
  animation: blinker 3s linear infinite;
  font-weight: 700;
  font-size: 25px;
  color: #FF5500;
  text-align: center;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* youtube responsive */
.video {
    display: flex;
    justify-content: center;
}
iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}