:root {
    /* Bakgrunnsfarger */
    --bs-primary: #1a1a1a !important;  /* Hovedgår */
    --bs-secondary: #ffcc00; /* Gul */
    --bs-success: #00c851;  /* Grønn */
    --bs-danger: #ff4444;    /* Rød */
    --bs-warning: #ffbb33;   /* Oransje */
    --bs-info: #33b5e5;      /* Turkis */
    --bs-light: #27272a;     /* Lys grå til hovedfargen */
    --bs-dark: #121212;      /* Mørk grå til hovedfargen */
    --hovedorange: #d3631f;  /*Hovedoranje*/
    --sekundorange: #be4512; /*Sekundær orange*/

    /* Tekstfarger */
    --bs-primary-text: ##f3f4f6; /* Hvit tekst på mørk bakgrunn */
    --bs-secondary-text: #333333; /* Mørkere grå */
    --bs-success-text: #008c4a; /* Mørkere grønn for kontrast */
    --bs-danger-text: #b20000; /* Mørkere rød */
    --bs-warning-text: #cc8c00; /* Dypere oransje */
    --bs-info-text: #006b9a; /* Dypere blå-turkis */
    --bs-light-text: #d1d1d1; /* Lys grå tekst */
    --bs-dark-text: #ffffff; /* Hvit tekst for mørk bakgrunn */
}

header.bg-primary{
    background-color: var(--bs-light) !important;
}

body {
    background-color: var(--bs-primary) !important;
    /*background-color: white;*/
}

/*Setter bakgrunnsfarge på markert tekst*/
::selection{
    background-color: var(--hovedorange) !important;
    color: var(--bs-primary-text:) !important;
}

h1 {
    color: var(--bs-primary-text:) !important;
}

input.form-control{
    background-color: #27272a !important;
    color: #f3f4f6 !important; 
    border:none;
    padding-top: 16px;
    padding-bottom: 16px;
}

.form-control:focus {
    background-color: #323236 !important;
    color: #ffffff !important;
    border-color: #555 !important;
    outline: none !important;
    box-shadow: none !important; /* Remove Bootstrap default focus glow */
    border: 1px solid #f3f4f6 !important; /* Optional: Change border color */
}

/* Styling the placeholder text */
.form-control::placeholder {
    color: #f3f4f6 !important; 
    opacity: 0.50; 
}

.btn-primary{
    background-color: #d3631f;
    padding-top: 16px;
    padding-bottom: 16px;
    color: #f3f4f6;
    border: none;
}   
    

.btn-primary:hover{
    background-color: #be4512;
    color: #f3f4f6;
    border: 1px solid #f3f4f6 !important; 
}

.btn-primary:active{
    background-color: #be4512 !important;
    color: #f3f4f6;
    border: 1px solid #f3f4f6 !important; 
}

.footer{
    background-color: var(--bs-dark) !important;
    width: 100%;
}

#footertekst{
    margin-left:15%;
    margin-top: 10px;
}

#footertekst a{
    text-decoration: none;
}

#footertekst a:hover{
    color:#d3631f !important;
}

/*Effekt på boksene*/
.card {
    transition: transform 0.2s;
    background-color: var(--bs-primary) !important;
    border: solid 1px gray !important;
    color: gray !important;
}
.card:hover {
    transform: scale(1.05); /* Zoom-effekt ved hover */
    background-color: var(--sekundorange) !important;
    color: white !important;
    box-shadow: 0 0 15px 5px #d3631f !important; /* Oransje glow */
    border: solid 1px white !important;
}