@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
	margin: auto;
	padding: 0;
	font-family: 'Inter', sans-serif;
	
}

header, 
section {
	width: auto;
	margin: auto;
	padding: 0 16px;
	
}

main {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 3em;
}

input, 
textarea,
select,
button {
	font-family: 'Inter', sans-serif;
}

h3 {
	margin-top: 0;
	margin-bottom: 1.6rem;
}

p {
	line-height: 1.6;
	margin-top: 0;
	
}

label[for]::after {
	content: " *";
	color: red;
}



#main-title,
#secondary-title {
	flex-direction: column;
}



#adminContainer,
#adminContainerExp,
#alertContainer,
#featuredAlertContainer {
	display: flex;
	flex-direction: column;
  width: auto;
  margin: 0 auto 1em auto;
  gap: 1em;
}


#main-intro {
	margin: 3em auto;
}

#clearData {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

fieldset {
	display: flex;
	flex-direction: column;
	border: none;
	gap: 1em;
	padding: 0;
	margin: 1em 0;
}

legend {
	font-weight: 700;
	margin: 1.25em 0em;
}

input {
	box-sizing: border-box;
	margin: 0;
}

#summary {
	resize: none;
		height: 100px;
		box-sizing: border-box;
}

textarea {
  resize: none;
  height: 250px;
  box-sizing: border-box;
}

body{
  background: #f9f7f6;
}

button,
.button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 25px;
	color: rgb(0, 0, 0);
	background-color: #a8c208;
	padding: 1.1rem;
	border-radius: 3.125rem;
	border: none;
	outline: none;
	transition: background-color 0.25s ease;
}

button:hover {
	background-color: #a8c208cc;
	cursor: pointer;
}

#clearBtn {
	background-color: rgb(183, 198, 198);
}

#clearBtn:hover,
#rejectBtn:hover {
	opacity: 0.8;
}

#rejectBtn {
	background-color: #e53935;
	color: white;	
}

/* Form - Call to Action */

#ctaContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 2rem;
}

/* Alert Card Styling */

.alertCard{
	width: auto;
	background-color: white;
	padding: 2rem;
	border: 0.0625rem solid rgb(220, 214, 209);
	border-radius: 1rem;
}

.featuredAlert { 
	border: 0.2rem solid #a8c208;
}

.alertHeader {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: top;
	justify-content: space-between;
}

.alertType {
	display: inline-block;
	color: rgb(0, 45, 45);
	background-color: rgb(183, 198, 198);
	font-size: 11px;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 4px;
	align-items: center;
}

.new {
	display: inline-block;
	background-color: #e63946;
	font-size: 11px;
	color: white;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 4px;
	align-items: center;
}

.meta-main {
	display: flex;

}

.meta {
	display: flex;
	flex-direction: column;
	margin-left: auto;
	justify-content: right;
}

.meta p {
	text-align: right;
}

/* Header */

#primary-section {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 2em 0;
}

.primary-links {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12px;
}		
	
.primary-links a {
		text-decoration: none;
		color: #003a4a;
		font-size: 14px;
}


.logo-section {
	width: 350px;
	height: auto;
}

#secondary-section {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding: 2em 0;
	border-top: 1px solid lightgray;
	border-bottom: 1px solid lightgray;
}

.main-nav {
	display: flex;
	gap: 16px;
}

.main-nav a {
	text-decoration: none;
	color:black;
	

}



/* Media Query */

@media (min-width: 945px ) {
	header,
	section {
		width: 1000px;
	}
}