/* Bootstrap list group overloads */
:root {
    /* Colors */
    --color-black: rgba(0, 0, 0, 1);
    --color-black-75: rgba(0, 0, 0, 0.5);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-25: rgba(0, 0, 0, 0.25);
    --color-white: rgba(255, 255, 255, 1);
    --color-teal: var(--bs-color-teal);

    /* Borders */
    --border-color: rgb(37, 68, 90);
    --border-color-light: rgb(52, 93, 122);

    /* Backgrounds */
    --background-primary: #200134;

    /*colors */
    --primary-color: #200134;
    --primary-shade-1: #361a48;
    --primary-shade-2: #4d345d;
    --primary-shade-3: #634d71;
    --secondary-color: #FBAE34;
    --secondary-shade-1: #e29d2f;
    --secondary-shade-2: #c98b2a;
    --secondary-shade-3: #fcc671;

    --lakrids: #0d0014;

    --white:#FDF6EC;
    --black: #0D0014;

    /* mere shit her under */
}

:global(.list-group) {
    
    --bs-list-group-bg: transparent;
    --bs-list-group-color: initial;
    --bs-list-group-border-color: var(--border-color);

    --bs-list-group-action-hover-color: var(--bs-white);
    --bs-list-group-action-hover-bg: var(--list-group-hover-color);

    --bs-list-group-action-active-bg: var(--header-two-bg-color);
    --bs-list-group-action-active-color: var(--bs-white);

    --bs-list-group-active-bg: var(--list-group-active-color);
    --bs-list-group-active-border-color: var(
        --list-group-active-border-color
    );
}


.body-primary-bg {
    background-color: var(--background-primary) !important;
}

.navbar-container{
    border-bottom: 1px var(--harvest-gold) solid;
}

.pt-10{
    padding-top: 10rem !important;
}

.nav-link{
    color: rgba(0, 0, 0, 0) !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    padding-bottom: 0rem !important;
    -webkit-text-stroke: 0.5px var(--secondary-shade-2);
}

.nav-link:hover{
    color: var(--secondary-shade-2)!important;
}

.nav-link.aria-current\=true{
    color: var(--secondary-color) !important;
}

.navbar-brand{
    color: var(--primary-color) !important;
    font-family: "Sansation", sans-serif;
    font-size: 8rem !important;
    font-weight: 700;
    font-style: normal;
    -webkit-text-stroke: 1px var(--harvest-gold);

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.navbar-brand:hover{
    -webkit-text-stroke:1px #bb6b2e !important;
}

.main-content-rigodk{
    font-family: "Inconsolata", serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--secondary-color)
}

footer{
    color:#40194b;
}

.navbar-collapse{
    flex-grow: 0 !important;
}

.navbar-right{
    position:fixed;
    right: -180px;
    top:0px;
    height: 100vh;
    -webkit-transition: right 0.4s ease-out;
}

.navbar-right.active{
    right: -140px;
    -webkit-transition: right 0.4s ease-out;
}


.navbar-right:hover{
    right: 0px;
    -webkit-transition: right 0.4s ease-out;
}

.navbar-right .row{
    background-color: #bb6b2e;
    border-radius: 0.375rem 0px 0px 0.375rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    
}

.navbar-right .row .col i{
    color:var(--secondary-shade-2);
    opacity: 0.5;
}


.navbar-right .row .col .nav-link:hover{
    color: var(--secondary-shade-2) !important;
}

.navbar-right .row .col .nav-link.active{
    color: var(--secondary-color) !important;
    -webkit-text-stroke: 0px rgba(0, 0, 0, 0) !important;
}

.navbar-right .navbar-brand{
    color: #bb6b2e !important;
    font-family: "Lato", sans-serif;
    font-size: 1.5rem !important;
    font-weight: 700;
    font-style: normal;
    -webkit-text-stroke: 1px var(--harvest-gold);
    margin-right: 0px;
}



h1{
    font-family: "Lato", sans-serif !important;
    font-size: 5rem !important;
    color: var(--secondary-color) !important;
}

h2{
    font-family: "Lato", sans-serif !important;
    color: var(--secondary-shade-1) !important;
}

h3{
    font-family: "Lato", sans-serif !important;
    color: var(--secondary-shade-1) !important;
}

h4{
    font-family: "Lato", sans-serif !important;
    color: var(--secondary-shade-1) !important;
}

p{
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 1.2rem !important;
    color: var(--white) !important;
    line-height: 1.5rem !important;
}

a{
    color: var(--secondary-color) !important;
    text-decoration: none !important;
    font-weight: bold;;
}

.lead{
    padding-left: 1.5rem;;
}

/*LANDING PAGE*/

@keyframes slide-in-left{
    from {
        opacity:0%;
        transform: translateX(-50px);
    }
    to {
        opacity: 100%;
        transform: translateX(0px);
    }
}

@keyframes slide-in-right{
    from {
        opacity:0%;
        transform: translateX(50px);
    }
    to {
        opacity: 100%;
        transform: translateX(0px);
    }
}

@keyframes slide-in-top{
    from {
        opacity:0%;
        transform: translateY(-30px);
    }
    to {
        opacity: 100%;
        transform: translateX(0px);
    }
}

@keyframes slide-in-bottom{
    from {
        opacity:0%;
        transform: translateY(30px);
    }
    to {
        opacity: 100%;
        transform: translateX(0px);
    }
}

.mugshot{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 0 20px var(--secondary-color);
    transition: box-shadow 0.3s ease-in-out;
}

.mugshot:hover{
    box-shadow: 0 0 30px var(--secondary-color);
    transition: box-shadow 0.3s ease-in-out;
}


.left-content{
    opacity: 0%;
    cursor:default;
    animation: slide-in-left 1s ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
}

.right-content{
    opacity: 0%;
    cursor:default;
    animation: slide-in-right 1s ease-in-out;
    animation-delay: 100ms;
    animation-fill-mode: forwards;
}

.top-content{
    opacity: 0%;
    cursor:default;
    animation: slide-in-top 1s ease-in-out;
    animation-delay: 100ms;
    animation-fill-mode: forwards;
}

.bottom-content{
    opacity: 0%;
    cursor:default;
    animation: slide-in-bottom 1s ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
}

.gallery-content .col-12:nth-child(1){
    opacity: 0%;
    animation: slide-in-bottom 1s ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
}

.gallery-content .col-12:nth-child(2){
    opacity: 0%;
    animation: slide-in-bottom 1s ease-in-out;
    animation-delay: 700ms;
    animation-fill-mode: forwards;
}

.gallery-content .col-12:nth-child(3){
    opacity: 0%;
    animation: slide-in-bottom 1s ease-in-out;
    animation-delay: 900ms;
    animation-fill-mode: forwards;
}

.gallery-content .col-12:nth-child(4){
    opacity: 0%;
    animation: slide-in-bottom 1s ease-in-out;
    animation-delay: 1100ms;
    animation-fill-mode: forwards;
}

.gallery-content .col-12:nth-child(5){
    opacity: 0%;
    animation: slide-in-bottom 1s ease-in-out;
    animation-delay: 1300ms;
    animation-fill-mode: forwards;
}

.gallery-content .col-12:nth-child(6){
    opacity: 0%;
    animation: slide-in-bottom 1s ease-in-out;
    animation-delay: 1500ms;
    animation-fill-mode: forwards;
}



/*-- Work Page -- */

.card{
    background-color: var(--secondary-color) !important;
    box-shadow: 0 0 10px var(--secondary-color);
    transition: box-shadow 100ms ease-in;
    text-decoration: none;
    cursor: pointer;
}

.card:hover{
    box-shadow: 0 0 20px var(--secondary-color);
    transition: box-shadow 100ms ease-in;

}

.card-body{
    background-color: var(--lakrids);
    color:var(--white) !important;
    border-radius: 0px 0px var(--bs-border-radius) var(--bs-border-radius);
    text-decoration: none;
}

.card-body h5{
    color:var(--secondary-color);
}

.card-img-top{
    border: 5px solid var(--lakrids);
}

.modal-content{
    background-color: var(--lakrids) !important;
    color:var(--white) !important;
    border-radius: 0px 0px var(--bs-border-radius) var(--bs-border-radius);
    box-shadow: 0 0 10px var(--secondary-color);
    border: var(--secondary-color) solid 1px !important;
}

.modal-content .modal-header .modal-title{
    color:var(--secondary-color) !important
}

.modal-content .modal-header{
    border-bottom: var(--bs-modal-header-border-width) solid var(--secondary-shade-2)
}

.modal-content .modal-footer{
    border-top: var(--bs-modal-header-border-width) solid var(--secondary-shade-2)
}

.modal-content .btn-close{
    color:var(--secondary-color) !important;
}


.modal-content .modal-footer a{
    color: var(--white) !important;
    text-decoration: none;
}

.modal-content .modal-footer .bg-secondary{
    font-family: "Lato", sans-serif !important;
    background-color: var(--secondary-color) !important;
    color: var(--lakrids) !important;
    cursor: default;
}

@keyframes modal-slide-in-bottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modal-slide-out-bottom {
    from {
        opacity: 0;
        transform: translateY(0px);
    }
    to {
        opacity: 1;
        transform: translateY(100px);
    }
}

.modal.fade .modal-dialog{
    transform: translate(0,50px) !important;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.modal.show .modal-dialog{
    transform: none !important;
}

.modal{
    overflow: hidden !important;
}