/*--------------------*/
/* VARIABLES/DESIGN CLASSES */
/*--------------------*/
/* Colors variables */
:root {
	--darker: color-mix(in srgb, var(--bs-dark) 86%, black);
	--darkest: color-mix(in srgb, var(--bs-dark) 60%, black);
	--link-dark: rgba(255, 255, 255, .55);
	--link-dark-hover: rgba(255, 255, 255, .75);
	--theme-dark-blue: rgba(3, 23, 33, 1);
}

/* Custom gradients */
.grad-purple-orange {
	background: linear-gradient(142deg, #fd7e14 0%, #6f42c1 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}



/*--------------------*/
/* THEMING */
/*--------------------*/
/* Background */
body {
	background-color: var(--bs-dark);
	background-image: url(../backgrounds/forest_trees_fog_110131_1920x1080.jpg);
	background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
}


/* Scrollbar */
/* Mozilla firefox */
* {
	scrollbar-color: var(--theme-dark-blue) black;
}
/* Scrollbar thumb */
* ::-webkit-scrollbar-thumb {
	background: var(--theme-dark-blue);
}


/* Sidebar design (replication of Bootstrap's navbar links' colors and animations) */
#sidebar {
	background-color: var(--darkest);
}

/* Editing the styling of the Bootstrap accordion based on the website theme */
#sidebar .accordion {
	--bs-accordion-color: var(--link-dark-hover);
	--bs-accordion-bg: color-mix(in srgb, var(--bs-dark) 47%, black);
	--bs-accordion-active-color: white;
	--bs-accordion-active-bg: var(--darkest);
	--bs-accordion-btn-color: var(--link-dark-hover);
	--bs-accordion-btn-bg: var(--darkest);
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-border-color: none;
}
/* Since it's fucking impossible to fucking edit the fucking icon in the fucking Bootstrap variable, I fucking had to fucking do it that fucking way after fucking spending a fucking afternoon fucking trying fucking otherwise. Might be a tad fucking annoyed */
#sidebar .accordion-button.collapsed::after {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(255, 255, 255, .75)' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>");
}
#sidebar .accordion-button::after {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>");
}

/* Styling of the links in the sidebar (the same as Bootstrap's dark navbar default) */
#sidebar .accordion-body a {
	text-decoration: none;
	color: var(--link-dark);
	transition: color .15s ease-in-out;
}
#sidebar .accordion-body a:hover, #sidebar .accordion-body a:focus {
	color: var(--link-dark-hover);
	transition: color .15s ease-in-out;
}


/* Grid items content holder's design (thumbnails' content) */
.grid-item-content {
	border-radius: 4px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow:
	0 1.4px 1.7px rgba(0, 0, 0, 0.027),
	0 3.3px 4px rgba(0, 0, 0, 0.034),
	0 6.3px 7.5px rgba(0, 0, 0, 0.13),
	0 11.2px 13.4px rgba(0, 0, 0, 0.046),
	0 20.9px 25.1px rgba(0, 0, 0, 0.053),
	0 50px 60px rgba(0, 0, 0, 0.16);
    transition: all .3s ease;
}
/* Grid items content holder's itself animation on hover */
.grid-item-content:hover {
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	box-shadow:
	0 1.4px 1.7px rgba(0, 0, 0, 0.037),
	0 3.3px 4px rgba(0, 0, 0, 0.044),
	0 6.3px 7.5px rgba(0, 0, 0, 0.23),
	0 11.2px 13.4px rgba(0, 0, 0, 0.056),
	0 20.9px 25.1px rgba(0, 0, 0, 0.063),
	0 50px 60px rgba(0, 0, 0, 0.26);
    transition: all .3s ease;
}

/* Thumbnails' title design and animation on hover (shadow gradient and up translation) */
.grid-item-content:hover .thumbnail-shadow {
  background: linear-gradient(to bottom, rgba(3, 23, 33, 0) 0%, var(--theme-dark-blue) 40%);
}
.grid-item-content .thumbnail-title {
/*  font-size: 14px;*/
  letter-spacing: 1px;
  opacity: 0;
  color: #fff;
  transform: translate3d(0, -2px, 0);
  transition: opacity 0.2s, transform 0.3s;
}
.grid-item-content:hover .thumbnail-title {
  opacity: 1;
  transform: translate3d(0, -20px, 0);
}

/* Thumbnails' images animations (little zoom in and grey filtering) */
.grid-item-content img {
    transition: all .3s ease;
}
.grid-item-content:hover img {
    transform: scale(1.1);
    filter: grayscale(60%);
    transition: all .3s ease;
}


/* Footer design (replication of Bootstrap's navbar links' colors and animations) */
footer a {
	text-decoration: none;
	color: var(--link-dark);
	transition: color .15s ease-in-out;
}
footer a:hover, footer a:focus {
	color: var(--link-dark-hover);
	transition: color .15s ease-in-out;
}


/* Socials */
/* Facebook */
.socials-fb {
	color: #4661b0;
}
/* Actual colors of the Instagram logo on text (Fontawesome) */
.socials-in {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* Actual colors and design of the TikTok logo on text (Fontawesome) */
.socials-ti {
	color: white;
	filter: drop-shadow(2.4px 0px 0px #ff0050) drop-shadow(-2.4px -2px 0px #00f2ea);
}