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

@font-face {
font-family: AGBook;
src: url("../fonts/AG-Book-Rounded-Regular.otf");
}

body {
	font-family: AGBook, sans-serif;
	margin: 0 auto;
	color: #FEF4E9;
	font-size: 1.1rem;
	box-sizing: border-box;
	background-color: black;
}

.breadcrumbs {
	color: #e0caa6;
	font-family: monospace;
	margin-top: 2vh;
	display: block;
	text-align: center;
}

.breadcrumbs a {
	color: #707d73;
}

.breadcrumbs a:hover {
	color: #98ab9c;
}

.breadcrumbs .current-page {
	font-weight: bold;
	color: #8d8bb5;
}

.wrapper, .codec-wrapper {
	max-height: 93vh;
	margin: 2vh;
	display: flex;
	gap: 1vh;
}

.frame {
	background: linear-gradient(360deg, rgb(114, 109, 92), rgb(87, 75, 59) 35%, rgb(34, 34, 32) 60%, rgb(89, 99, 91) 90%);
	border: solid 1px #AABDBC;
	flex: 5%;
}

.central-container {
	background: linear-gradient(360deg,  rgb(34, 34, 32) 70%, rgb(89, 99, 91));
	border: outset 2px #E1F4DE;
	padding: 1vw;
	flex: 90%;
	overflow: auto;
	scrollbar-color: #829486 #222220;
}

.navigation-box {
	font-family: MGS4;
	background: #1B1C1A;
	flex: 40%;
	height: 30vh;
	border: 1px solid #E1F4DE;
	overflow: auto;
}

.navigation-box li {
	list-style-type: none;
	font-size: 1rem;
	margin-top: 0.7rem;
}

.navigation-box a {
	color: #FEF4E9;
	text-decoration: none;
}

.navigation-box a:hover {
	color: #CBC3BA ;
}

.codec {
	background-image: url("../images/rosemary/codec.jpeg");
	background-size: cover;
	background-position: center;
	flex: 60%;
	height: 45vh;
	border: 1px solid #E1F4DE;
}

.content {
	background: #292A27;
	max-width: 95%;
	margin: 0 auto;
	border: 1px outset #E1F4DE;
	padding: 1.5rem;
}

.sideimg {
	max-width: 45vh;
}

.flex-right {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	margin: 1rem;
}

.flex-left {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	margin: 1rem;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.list li {
	padding-left: 1rem;
}

/* Text */

#codec-title {
	font-family: MGS4;
	font-size: 1.4rem;
}

#codec-frequency {
	font-family: MGS4;
	font-size: 1rem;
	border: solid 1px #AABDBC;
	display: block;
	width: 7rem;
	margin-left: 4rem;
}

#codec-name {
	font-size: 1.3rem;
	display: block;
	margin-left: 1rem;
	border-bottom: 4px solid white;
}

.break {
	display: inline-block;
	margin: 1rem;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

a {
	color: #A4BC9F;
	text-decoration: underline;
	transition: color 0.3s ease-out;
}

a:hover {
	color: #CFBC8C;
}

.external::after {
	content: "↱";
	display: inline-flex;
	margin-left: 5px;
}

h1, h2, h3 {
	font-family: MGS4;
	font-size: 1.25rem;
	border-bottom: 4px solid white;
}

.to-top {
	margin-right: 0.5rem;
	text-decoration: none;
}

ul {
	list-style-type: square;
}

/* Media Queries */
@media screen and (max-width: 850px) {
	
  .wrapper, .codec-wrapper, .flex-right, .flex-left {
	flex-direction: column;
  }
  
  .codec-wrapper {
	  height: 60vh;
  }
  
  .frame {
	display: none;
  }
}