/* CSS SCROLLBAR STYLING */

:root {
  --scroll-thumb: rgba(255,255,255,0.3);
  --scroll-track: transparent;
  --scroll-radius: 999px;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scroll-behavior: smooth;
}

*::-webkit-scrollbar {
  width: 3px;
  background: var(--scroll-track);
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: var(--scroll-radius);
  border: 0;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* BUTTON STYLING */

.solid_button {
	background-color: #333333;
	color: #ffffff;
	border-radius: 8px;
	font-family: Quicksand;
	text-align: center;
	padding: 12px 28px;
	border: 3px solid #333333;
	margin: 8px 16px;
	display: inline-block;
	text-decoration: none;
	transition-duration: 0.3s;
}

.solid_button:hover {
	background-color: transparent;
	border-radius: 16px;
	color: #666666;
}

/* Outline style button */
.outline_button {
	color: #333333;
	background-color: transparent;
	border-radius: 8px;
	font-family: Quicksand;
	text-align: center;
	padding: 12px 28px;
	border: 3px solid #333333;
	margin: 8px 16px;
	display: inline-block;
	text-decoration: none;
	transition-duration: 0.3s;
}

.outline_button:hover {
	background-color: #333333;
	border-radius: 16px;
	color: #ffffff;
}

/* DIVIDER STYLES */

hr.dotted {
	border-top: 3px dotted #333333;
}

/* POP-UP STYLE */

.popup_backdrop {
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: 2000; /* ABOVE EVERYTHING, INCLUDING NAVBAR */
	transition: all 0.3s ease;
}
.popup_backdrop .hidden {backdrop-filter: none; -webkit-backdrop-filter: none;}

.popup {
	overflow: hidden;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
	margin: 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.3);
	
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 40%;
	height: 30%;
	top: 35%;

	overflow-y: scroll;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	z-index: 2001;
	transition: all 0.3s ease;
}
.popup .hidden {backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: 0; height: 0; border: 0; top: 50%;}

.popup h1 {
	font-family: Montserrat;
	font-size: 2em;
	text-align: center;
	width: 100%;
	color: #333333;
	padding: 10px;
	z-index: 2002;
}

.popup p {
	font-family: Quicksand;
	font-size: 1em;
	text-align: center;
	width: 100%;
	color: #444444;
	padding: 10px;
	z-index: 2002;
}