/* Add custom styles for the video banner */

@font-face {
	font-family: 'Magic Owl';
	src: url('font/MagicOwl.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

.navbar a {
	font-family: 'Magic Owl';
	font-size: 1.5em;
}

#discord-button {
	font-family: 'Magic Owl';
	font-size: 2em;
	border-radius: 15px;
	
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}

.video-banner {
	/*background-image: url("https://images.unsplash.com/photo-1517331153500-29c85a43e3f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
	background-size: cover;*/
	/*height: 500px;*/
	display: flex;
	align-items: center;
	justify-content: center;

}
/* Add custom styles for the text on the video banner */
.video-banner h1 {
	color: white;
	text-shadow: 2px 2px 4px #000000;
	font-family: 'Magic Owl';
	font-size: 4em;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 576px) {
	.video-banner h1 {
		transform: translate(-50%, -50%) scale(0.5) ;
	}
}

@media (min-width: 576px) and (max-width: 992px) {
	.video-banner h1 {
		transform: translate(-50%, -50%) scale(0.8) ;
	}
}

@media (min-width: 992px) {
	.video-banner h1 {
		transform: translate(-50%, -50%) scale(1) ;
	}
}


.video-banner video {
	width: 100%;
	/*height: auto;*/
	/*height: 100%;*/
}
.shiny-box {
	background-color: #ffffff; /* or any other color you want */
	box-shadow: 0 0 10px #cccccc; /* or any other shadow you want */
	padding: 20px;
}




/* Modal overlay */
.modal-backdrop {
	background-color: rgba(0, 0, 0, 0.7);
}

/* Modal header */
.modal-header {
	background-color: #5a6268;
	color: white;
	border-bottom: none;
}

/* Modal body */
.modal-body {
	background-color: #f5f5f5;
	padding: 20px;
}

/* Modal footer */
.modal-footer {
	background-color: #f5f5f5;
	border-top: none;
	text-align: right;
}

.modal-title {
	font-family: 'Magic Owl';
	font-size : 2em;
}

.modal-buttons button {
	font-family: 'Magic Owl';
	font-size : 1.3em;
	margin: 2px 2px 0 2px;
}

/*
.row {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 80%;
    margin: 0 auto;
}
*/

.content-block{
	display: flex;
	align-items: center;

	border-radius: 10px;
	
	/*padding: 10px;*/
	/*margin: 10px;*/
	margin: 10px;
}

.writing-block {
	padding: 20px;
}

.bg-white {
	background-color: #fff;
}

.bg-primary {
	color: white;
}

.content-block img {
	max-width: 100%;
	height: auto;
	/*object-fit: cover;*/
	border-radius: 10px;
	border: 2px solid black;
	/*padding: 0px;*/

	margin: 0 0 10px;
	box-shadow: 0 10px 30px #00000029;
}

.img-legend {
	color: #585c6a;
	font-size: 14px;
}


.writing-block dl {
	font-family: Roboto,sans-serif;
}

.writing-block dd {
	font-size: 14px; 
}

.writing-block dt{
	font-family: 'Magic Owl';
	font-size: 26px;
}

.writing-block a {
	color: #0b5394;
}


@media (min-width: 576px) {
	.writing-block dd {
		font-size: 14px;
	}
	.writing-block dt {
		font-size: 26px;
	}
} 

@media (min-width: 768px) {
	.writing-block dd {
		font-size: 18px;
	}
	.writing-block dt {
		font-size: 30px;
	}
	.writing-block {
		padding: 30px;
	}
}

@media (min-width: 992px) {
	.writing-block dd {
		font-size: 20px;
	}
	.writing-block dt {
		font-size: 38px;
	}
	.writing-block {
		padding: 40px;
	}
}

@media (min-width:1200px) {
	.writing-block dd {
		font-size: 24px;
	}
	.writing-block dt {
		font-size: 44px;
	}
}


@media (max-width: 992px) {
	.modal-buttons button {
		background-color: white;
		color: #585c6a;
		border-color: white;
	}
}


/*Progress Bar*/

.data-container {
	width: 100%;
	min-height: 50px;
}

.progress-container {
	position: relative;
	left: 10%;
	width: 80%;
}

.progress-bar-container {
	/*display: flex;
	align-items: center;
	justify-content: center;*/
	width: 100%;
	height: 30px;
	background-color: lightgray;
	border-radius: 10px;
	position: relative;
}

.progress-bar {
	height: 100%;
	background-color: #007BFF;
	border-radius: 10px;
	/* width: 25%; change this value to reflect the current progress */
}

.milestone {
	position: absolute;
	top: 0;
	height: 100%;
	width: 8px;
	background-color: #FF8400;
	border-radius: 10px;
	/* left: 25%; change this value to reflect the position of the milestone */
}

.milestone-text {
	height: auto;
	position: relative;
	top: 0; /*30px*/
	/*margin-top: 20px;*/
}

.progress-perc {
	position: absolute;
	left : 102%;
	top: 0;
}

h2 {
	font-family: 'Magic Owl';
	font-size: 3em;
}


@media (max-width: 576px) {
	h2 {
		transform: scale(0.7) ;
	}
}

@media (min-width: 576px) and (max-width: 992px) {
	h2 {
		transform: scale(0.8) ;
	}
}

@media (min-width: 992px) {
	h2 {
		transform: scale(1) ;
	}
}


#transcription-result {
	font-family: 'Magic Owl';
	font-size: 1.5em;

	border-radius: 30px;
	border: 5px solid #007bff;
	padding: 20px;
}