@font-face {
	font-family: "Sigmar";
	src: url(assets/Vendors/fonts/Sigmar/Sigmar-Regular.ttf);
}

@font-face {
	font-family: "Bebas Neue";
	src: url(assets/Vendors/fonts/Bebas_Neue/BebasNeue-Regular.ttf);
}

:root {
	--pageBGC: #F1E3D3;
	--navBGC: #222831;
	--navHoverItemColor: #353e4d;
	--accentColor1: #00ADB5;
	--accentColor1Hover: #00c7d1;
	--accentColor1Disable: #97c5c8;
}

body {
	background-color: var(--pageBGC);
}

nav ~ div.container-fluid:first-of-type{
    background-color: var(--pageBGC);
	min-height: 100vh;
}


.navbar-brand,
h1 {
  font-family: "Sigmar", monospace;
}


h2 {
  font-family: "Bebas Neue", monospace;
}

#homeBanner {
    height: 80vh;
    background-image: url(assets/crumpled_paper.jpg);
    background-repeat: repeat;
}

#aboutContainer{
  z-index: 2;
}

.aboutBGC{
    background-color: var(--pageBGC);
}

#exploreBTN {
    z-index: 2;
    background-color: var(--accentColor1);
    animation: breathing 3s ease-in-out infinite;
}

#exploreBTN:hover {
    background-color: var(--accentColor1Hover);
}

footer,
nav{
    background-color: var(--navBGC);
}
footer a,
footer p,
.navbar-nav,
.navbar{
    --bs-navbar-color: var(--pageBGC);
    --bs-nav-link-color: var(--pageBGC);
    --bs-navbar-active-color: white;
    --bs-nav-link-hover-color: white;
    color: var(--pageBGC);
}

#footerContainer{
	height: 20vh;
	width: 100vw;
}

.nav-link:hover{
  background-color: var(--navHoverItemColor);
  border-radius: 8px;
}

.navbar-brand{
    color: white;
}
.navbar-brand:focus, .navbar-brand:hover {
    color: white;
}



.w-80{
  width: 80%;
}



nav {
  z-index: 1;
}

.badge {
  position: absolute;
  bottom: 80%;
  left: 90%;
  transform: translateX(-50%) rotate(45deg);
}

.badge:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.img-fluid:hover ~ .badge:before,
.badge:hover:before{
  opacity: 1;
}


img.placeholder{
    width: 200px;
    height: 200px;
}


.paintingBCG{
    background-color: var(--accentColor1);
}

.embroideryBCG{
	background-color: var(--accentColor1);

}

.ceramicBCG{
    background-color: var(--accentColor1);
}
.figureBCG{
    background-color: var(--accentColor1);
}


.tooltip-inner {
  background-color: #9FA6B2 ;
  color: #fff ;
}

.accordion-item {
    --bs-accordion-bg: white;
    --bs-accordion-btn-bg: var(--accentColor1);
    --bs-accordion-active-bg: var(--accentColor1);
}

.accordion-button{
  letter-spacing: .25ch;
}

.navbar-toggler {
    border-color: white;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(241,227,211, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }

  .dropdown-menu{
    --bs-dropdown-bg: var(--navBGC);
    --bs-dropdown-link-color: var(--pageBGC);
    --bs-dropdown-link-hover-color: white;
    --bs-dropdown-link-hover-bg: var(--navHoverItemColor);
    --bs-dropdown-link-active-bg: var(--navHoverItemColor);
  }

  form button.btn-primary{
    --bs-btn-disabled-color: black;
    --bs-btn-disabled-bg: var(--accentColor1Disable);
    --bs-btn-disabled-border-color: var(--accentColor1Disable);
    --bs-btn-border-color: var(--accentColor1);
    --bs-btn-hover-bg: var(--accentColor1Hover);
    --bs-btn-hover-border-color: var(--accentColor1Hover);
    --bs-btn-active-bg: var(--accentColor1Hover);
    --bs-btn-active-border-color: var(--accentColor1Hover);
    --bs-btn-bg: var(--accentColor1);
  }

  .btn.disabled{
    opacity: 1;
  }

  .particles-js-canvas-el{
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  h1.Title{
    opacity: 0;
  }
  h1.Title span{
    position: relative;
    top: 20px;
    left: 20px;
    opacity: 0;
  }


@keyframes breathing {
    0% {
      transform: scale(1);
    }
  
    25% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.2);
    }
  
    100% {
      transform: scale(1);
    }
  }

  @keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}