* {
	box-sizing: border-box;
}

@font-face {
	font-family: "monsterrat";
	src: url("/fonts/Montserrat-VariableFont_wght.ttf")
}

body {
	color: white;
	font-size: clamp(10pt, 1vw, 15pt);
	font-family: monsterrat;
	background-color: black;

}

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

#logo,
#footer_logo {
	width: clamp(20px, 10vw, 100px);
	margin: 0 20px;
	cursor: pointer;
}

#logo-text,
#footer_logo-text {
	font-size: clamp(12pt, 1vw, 24px);
}

#logo-with-text,
#footer_logo-text {
	display: flex;
	align-items: center;
}

footer #logo-with-text {
	display: none;
	justify-content: center;
}

#mobile-menu-button {
	height: 15px;
	width: 20px;
	margin: 0 30px;
	border: none;
	background-image: url(/images/mobile-button.svg);
	background-size: contain;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
}

.mobile-menu-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	width: 100%;
	left: 0;
	background-color: black;
	z-index: 100;
}

div.mobile-menu-dropdown ul {
	list-style: none;
	border-top: 1px solid #7304BD;
	padding-inline-start: 0;
}

div.mobile-menu-dropdown ul li {
	border-bottom: 1px solid #7304BD;
	font-weight: 600;
	padding: 10px;
	background-image: url(/images/nav-next.svg);
	background-size: 10px;
	background-position: 95% center;
	background-repeat: no-repeat;
}

.quick_links {
	/* position: absolute; */
	/* top: 100%; */
	width: 100%;
	/* left: 0; */
	background-color: black;
	z-index: 100;
}

div.quick_links ul {
	list-style: none;
	border-top: 1px solid #7304BD;
	padding-inline-start: 0;
}

div.quick_links ul li {
	border-bottom: 1px solid #7304BD;
	font-weight: 600;
	padding: 10px;
	background-image: url(/images/nav-next.svg);
	background-size: 10px;
	background-position: 95% center;
	background-repeat: no-repeat;
}

#menu_list {
	display: flex;
	list-style: none;
}

#menu_list li {
	margin: 10px 2em;
	padding: 5px;
}

#menu_list li:hover {
	background: linear-gradient(to bottom right, #2B41E0, #421D86 70%);
	border-radius: 10px;

	box-sizing: content-box;
}

a {
	color: white;
	text-decoration: none;
	font-weight: 600;
	font-style: italic;
}

a:visited {
	color: white;
	text-decoration: none;
}

.content-block {
	margin: 0 auto;
	background: linear-gradient(to bottom right, #2B41E0, #421D86 70%);
	border-radius: 10px;
	padding: 10px;
}

.content-block h2 {
	text-align: center;
	margin: 10px auto;
	font-size: 16px;
	position: relative;
	z-index: 2;
}

.content-block p {
	position: relative;
	z-index: 2;
}

footer {
	border-top: 1px solid rgb(255, 255, 255, 0.3);
	margin-top: 20px;
	padding: 20px;
	/* grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); */
}

#footer_logo-with-text {
	display: none;
}

footer ul {
	list-style: none;
	padding-inline-start: 0;
}

.footer_content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	justify-items: center;
	align-items: center;
}

.footer_content div {
	padding: 10px;
	/* border-bottom: 1px solid #7304BD; */
}

.contact_info p {
	margin: 10px;
}

/* Loader stuff */

.loaderContainer {
	width: 100%;
	height: 100%;
	display: flex;
	background-color: rgba(0, 0, 0, .7);
	position: absolute;
	top: 0;
	left: 0;
	justify-content: center;
	align-content: center;
	align-items: center;
}

dialog:-internal-dialog-in-top-layer::backdrop {
	background-color: rgba(0, 0, 0, .7);
}

.loader {
	border: 16px solid #f3f3f3;
	/* Light grey */
	border-top: 16px solid #2B41E0;
	/* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	50% {
		border-top: 16px solid #421D86;
	}

	75% {
		border-top: 16px solid #421D86;
	}

	100% {
		transform: rotate(360deg);
		border-top: 16px solid #2B41E0;
	}
}

#snackbar {
	visibility: hidden;
	/* Hidden by default. Visible on click */
	min-width: 250px;
	/* Set a default minimum width */
	margin-left: -125px;
	/* Divide value of min-width by 2 */
	background-color: #333;
	/* Black background color */
	color: #fff;
	/* White text color */
	text-align: center;
	/* Centered text */
	border-radius: 2px;
	/* Rounded borders */
	padding: 16px;
	/* Padding */
	position: fixed;
	/* Sit on top of the screen */
	z-index: 1;
	/* Add a z-index if needed */
	left: 50%;
	/* Center the snackbar */
	bottom: 30px;
	/* 30px from the bottom */
}

.social-links {
	display: flex;
	justify-content: space-between;
}

.social-links img {
	width: 100px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible;
	/* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}

	to {
		bottom: 30px;
		opacity: 1;
	}
}

@keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}

	to {
		bottom: 30px;
		opacity: 1;
	}
}

@-webkit-keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}

	to {
		bottom: 0;
		opacity: 0;
	}
}

@keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}

	to {
		bottom: 0;
		opacity: 0;
	}
}

@media screen and (max-width: 745px) {
	.footer_content {
		display: revert;
		max-width: 300px;
		margin: auto;
	}

}

@media screen and (min-width: 760px) and (max-width: 1135px) {
	.footer_content {
		grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	}

	#footer_logo-with-text {
		display: block;
	}

	#footer_logo-text {
		display: none;
	}

	.quick_links {
		grid-column: 1 / 3;
		max-width: 360px;
	}
}

@media screen and (min-width: 1136px) {

	#footer_logo {
		width: clamp(20px, 10vw, 200px);
		margin: auto;
	}

	#footer_logo-with-text {
		display: flex;
		height: 60%;
		width: 100%;
		text-align: center;
		border-right: 1px solid #7304BD;
	}

	.footer_content {
		grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	}
}