:root {

	--very-light-gray: #D8D8D8; 
	--light-gray: #D8D8D8; 
	--dark-gray: #494949;
	--yellow: #EEE809;
	--black: #000000;
	--white: #FFFFFF;
	
}

* {
	
	padding: 0;
	margin: 0;
	
}


img {
	
	width: 100%;
	height: 100%;
	object-fit: cover;

}


body {

	background-color: var(--very-light-gray);
	counter-reset: serial;

}


a {

	text-decoration: none;

}

input {
	
	padding: 8px 10px;
	margin: 2px;
	width: -webkit-fill-available;

}

button {
	
	padding: 4px;
	cursor: pointer;

}

table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid var(--black);
  padding: 8px;
}

tr:nth-child(even){background-color: var(--);}

tr:hover {background-color: #ddd;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}


/* CSS TABLE COUNTER FOR STOCKS LIST BELOW */
		
		
		table tr td:first-child:before {
			
				counter-increment: serial;
				content: counter(serial);
		
		}

/* FORM INPUTS */

.input-group {
 position: relative;
 margin-top: 10px;
}

.input {
 border: solid 1.5px #9e9e9e;
 border-radius: 0.5rem;
 background: none;
 padding: 0.6rem 0.5rem;
 font-size: 0.8rem;
 transition: border 150ms cubic-bezier(0.4,0,0.2,1);
}

.user-label {
 position: absolute;
 left: 12px;
 pointer-events: none;
 transform: translateY(0.6rem);
 transition: 150ms cubic-bezier(0.4,0,0.2,1);
}

.input:focus, input:valid {
 outline: none;
 border: 1.5px solid #1a73e8;
}

.input:focus ~ label, input:valid ~ label {
 transform: translateY(-40%) scale(0.9);
 background-color: var(--light-gray);
 padding: 4px;
 color: var(--black);
 font-weight: 600;
}


/* Header */

.header-content {
	
	display: inline-flex;
	justify-content: space-between;;
	align-items: center;
	width: -webkit-fill-available;
	padding: 4px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: var(--dark-gray);
	color: var(--yellow);
}

.brand {
	
	display: inline-flex;
	gap: 10px;
	padding: 6px;
	justify-content: center;
	align-items: center;

}

.logo {
	
	width: 65px;
	height: 65px;

}

.navigation {
	
	display: inline-flex;
	justify-content: center;
	align-items: flex-end;
	padding-right: 10px;

}

.navigation a {
	
	color: var(--yellow);
	font-size: 1.3rem;
	margin: 4px;

}


.footer {
	
	display: flex;
	justify-content: center;
	align-items: center;
	width: -webkit-fill-available;

}

.footer-content {
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;

}


.footer-content a {
	
	text-decoration: none;
	font-size: 1rem;
	margin: 10px 6px;

}


.main-content {

	display: flex;
	flex-direction: column;
	align-items: center;

}

.invite-card {
	
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(540px, 82%);
	margin: 10px;
	gap: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
	padding: 20px 10px;
	border: 1px solid var(--dark-gray);
	border-radius: 20px;
	
}

.invite-card-title {
	
	font-size: 1.2rem;

}

.invite-card-description {
	
	width: min(450px, 80%);
	font-weight: 500;

}


#invite-card-register-link {
	
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	height: fit-content;
	background-color: var(--black);
	color: var(--white);
	padding: 8px 12px;
	border-radius: 20px;

}


.category-card {
	
	width: 156px;
	height: fit-content;
	background-color: var(--dark-gray);
	margin: 10px;
	border-radius: 0 0 10px 10px;
	padding-bottom: 6px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
	border: 2px solid var(--dark-gray);

}

.category-image {
	
	width: 156px;
	height: 156px;

}

.category-title {
	
	display: flex;
	color: var(--yellow);
	width: -webkit-fill-available;
	justify-content: center;
	align-items: center;
	height: 60px;
	padding: 6px;
}

.categories a {
    
    display: flex;
    flex-direction: column;
    
}

.categories {

	display: inline-flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 720px;

}


#service-card {
	
	display: flex;
	width: fit-content;
	max-width: 160px;
	flex: 1;
	margin: 10px;

}

.card-image {
				
	background-image: url('../images/missing-image-icon.JPG');
	background-size: cover;
	width: 150px;
	height: 150px;
			  
}

#card-titles {
	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: fit-content;
	gap: 6px;
	color: white;
}