@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Englebert&family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
	--card-gradient-color-corner-1: #DDC571;
	--card-gradient-color-corner-2: #F7D55C;
	--card-gradient-color-center: #E8D590;
	--icon-size-view: 90px;
	--icon-size-list: 100px;
}

.background-container {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: linear-gradient(0deg, #2EC2D7 0%, #189AE3 99.99%);
    z-index: -1;
}

.main-content {
    margin-top: 20px;
}

.search-bar {
    background: #59B7EB;
    color: white;
    border: 1px solid #FFFFFF4D;
    backdrop-filter: blur(30px);
    box-shadow: 0px 5.86px 43.91px 0px #0000000D;
    padding: 10px 15px 10px 15px;
    gap: 0px;
    border-radius: 25px;
}

.mud-pagination-item button {
	font-family: Montserrat;
	font-size: 16px;
	font-weight: 400;
	color: #FFFFFF;
	border-radius: 1px;
	border: 1px solid #eddcdc;
}

.mud-pagination-item.mud-pagination-item-selected button {
    background-color: #FFFFFF;
    color: #373737;
    font-weight: 700;
}

.nav-menu-link {
    font-family: Concert One;
    color: #ffffff;
    width: auto;
    font-size: 20px;
}

.nav-menu-link .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #FAEC8E;
}

#drawer {
    background: linear-gradient(0deg, #2EC2D7 0%, #189AE3 99.99%);
}

.quiz-form {
	align-items: center;
	display: flex;
	flex-flow: column;
}

.title {
	margin-left: 70px;
	font-family: Englebert;
	font-size: 40px;
	letter-spacing: -0.02em;
	text-align: left;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	color: #253884;
}

.page-title {
	color: white;
	font-size: 45px;
	text-shadow: 2px 2px 1px #404040;
	margin: 5px 0px 20px 0px;
	display: inline;
}

.login-name {
	color: #414968;
	font-size: 16px;	
}

div .card-link-quizzle {
	border-radius: 18px;
	border: 1px solid #D1AE58;
	color: #314081;
	padding: 20px;
	margin: 20px;
	box-shadow: 7px 7px 5px #404040;
	background: linear-gradient( to right, var(--card-gradient-color-corner-1) 0%, var(--card-gradient-color-center) 15%, var(--card-gradient-color-center) 20%, var(--card-gradient-color-corner-2) 100%);
	max-width: 60vh;
}

.card-icon-list {
	position: absolute;
	top: 60px;
	left: -10px;
	width: var(--icon-size-list);
	height: var(--icon-size-list);
	z-index: 1;
}

.card-icon-view {
	width: var(--icon-size-view);
	height: var(--icon-size-view);
	margin-bottom: 40px;
}

.main-quizzle-info-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;	
}

a .card-link {
	padding: 14px;
}

.byWho {
	font-size: 14px;
}

.caption {	
	color: #E8D590;
}

span.ageGroup {
	font-size: small;
	margin-top: 12px;
}

div.description {
	margin: 15px 0px 15px 0px;
	font-family: serif;
	font-size: 22px;
}

div.hashtags {
	margin: 10px 0px 10px 0px;
}

div.quizzle-info {
	padding: 10px 5px 0px 15px;
	color: white;	
}

.hashtag {
	color: black;
	font-size: small;
	margin-right: 8px;
}

span.answer-typable-letter {
	color: green;
	font-family: monospace;
	font-size: 22px;
	font-weight: bold;
	text-decoration: underline;
}

span.answer-static-letter {
	color: grey;
	font-family: monospace;
	font-size: 22px;
}

.list-filter {
	color: white;
}

.view-button {
	border-radius: 18px;
	border: 1px solid #D1AE58;
	color: #314081;
	padding: 10px 17px 10px 17px;
	margin: 4px;
	background: #FFFFFF4D;
}

.view-button:hover {
	background: #efe5cd;
}