#bootstrap-override, body {
    background: url(src/bg.jpg), center, fixed;
    background-size: fixed;
    background-repeat: no-repeat;
    background-position: top;
    color: #dc143c;
    
}

#bootstrap-override, .container-fluid {
    position: center;
}

#header_id {
    padding: 10%;
    padding-top: 5%;
    padding-bottom: 0%;
    opacity: 0.0;
    transition: opacity 4s ease-in-out;
}

#title_header {
    font-size: 5rem;
    color: white;
}

#subtitle_header {
    font-size: 2.5rem;
}

#bootstrap-override, .bg-dark{
    padding: 0%;
    margin: 0%;
    background-color: black !important; 
}

#bootstrap-override, .navbar {
    --bs-navbar-active-color: rgb(255,255,255);
    
}

.nav-link {
    font-size: large;
    color: white;
    
}

#navbarSupportedContent {
    padding-left: 10%;
    padding-right: 10%;
}

#arrow {
    filter: invert(98%) sepia(100%) saturate(8%) hue-rotate(158deg) brightness(102%) contrast(102%);
}

#arrow-btn {
    margin-top: 0.5%;
    margin-bottom: 0.5%; 
}

#arrow-btn:hover, #arrow-btn:focus {
    border-color: white;
}

[aria-current="page"] {
    border-bottom: 0.25rem solid #dc143c;
}
.nav-link:hover, .nav-link-active:hover {
    color: #dc143c !important;
}

.nav-link:focus, .nav-link-active:focus {
    color: white !important;
}

.nav-link:focus:hover, .nav-link-active:focus:hover {
    color: #dc143c !important;
}

#audio_container {
    visibility: hidden;
    margin-top: 2.5%;
    margin-bottom: 2.5%;    
}

.nav-icon {
    
    filter: invert(98%) sepia(100%) saturate(8%) hue-rotate(158deg) brightness(102%) contrast(102%);
}

.nav-link:hover .nav-icon {
    filter: invert(21%) sepia(65%) saturate(6149%) hue-rotate(339deg) brightness(86%) contrast(100%);
}

.nav-link:focus .nav-icon {
    filter: invert(98%) sepia(100%) saturate(8%) hue-rotate(158deg) brightness(102%) contrast(102%);
}

.nav-link:focus:hover .nav-icon {
    filter: invert(21%) sepia(65%) saturate(6149%) hue-rotate(339deg) brightness(86%) contrast(100%);
}

.nav-item {
    padding-left: 1.0rem;
}

.nav-item-dropdown-toggle {
    padding-left: 1.0rem !important;
}

.section {
    padding-top: 0%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10%;
    opacity: 0.0;
    transition: opacity 1s ease-in-out;
    
}

#section-container {
    background-color: rgba(0,0,0,0.75);
    border-style:dashed;
    border-radius: 1rem;
    border-color: #dc143c;
    padding-top: 1rem;
    transition: background-color 1s ease-in-out; 
}



#page-title {
    font-size: xx-large;
    color: white;
}

.page-p {
    color: hsla(0, 0%, 100%, 0.65);
    font-size: small; 
}

.page-p-title {
    color:  hsla(0, 0%, 100%, 0.9);
    font-size: medium;
    margin-bottom: 0%;
}

.modal-content-bg-dark {
    min-height: 80vw;
    max-height: 80vw;
}

.d-block-w100 {
    max-height: 80vw !important;
}

.img-thumbnail {
    margin-top: 5%;
    margin-bottom: 5%; 
    max-height: 20rem;
}

#om::before {
    content: "";
    display: block; 
    height: 1.5rem; 
    margin: 1.5rem; 
}

#audio_container::before {
    content: "";
    display: block; 
    height: 1.5rem; 
    margin: 1.5rem; 
}

#tidigare::before {
    content: "";
    display: block; 
    height: 1.5rem; 
    margin: 1.5rem; 
}

.card-img-top {
    margin-top: 0.75rem;
}


.text-bg-dark {
    background-color: black !important;
    border-width: 0.15rem;
    border-color: rgba(255,255,255,0.25);
    margin: 0.5%;
    width: 18rem;
}



.card-text {
    color: rgba(255,255,255,0.5);
    transition: color 1s ease-in-out;
}

.card-text:hover {
    color: white;
}

#exampleModalLabel {
    color: White;
}

.dropdown-menu-dark {
    background-color: black;
}

.card-subtitle, .mb-2-text-muted {
    color: #dc143c !important; 
    opacity: 0.75;
}