* {
	font-family: "Helvetica";
}

.navbar {
  display: flex;  
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;
	z-index: 2;
}

h1 {
	color:rgb(8, 98, 216);
	margin: 1rem 4rem;
	/* display: flex; */
	align-content: center;
  justify-content: space-evenly;
}

h2 {
	color:rgb(8, 98, 216);
	margin: 1rem 4rem;
	height: 2.5rem;
	padding: 10px;
	display: flex;
	font-size: 25px;
	align-items: center;
  justify-content: space-evenly;
	border-radius: 10px;
	border: 2px solid rgb(8, 98, 216);

}

.opt-group {
	font-size: 25px;
}
.col-count {
	color:rgb(8, 98, 216);
	margin: 1rem;
	font-size: 20px;
}

.dropdownmenu {
	position: right fixed;
	align-content: center;
}

.dropdownmenu-content {
	border-radius: 5px;
	align-content: flex-end;
	display: none;
	position: absolute;
  grid-template-columns: 1fr 1fr 1fr 1fr;
	z-index: 1;
	background-color: rgba(245, 245, 245, 0.0);
}

.dropbutton {
	border-radius: 10px;
	margin-right: 5rem;
	width: 12rem;
	height: 4rem;
	font-weight: 600;
	background-color:rgba(255, 255, 255, 0.8);
	color: rgb(8, 98, 216);
	padding: 10px;
	font-size: 25px;
	border: 2px solid rgb(8, 98, 216);
	cursor: pointer;
}

.dropdownmenu-content button {
	border-radius: 5px;
	color: rgb(8, 98, 216);
	margin: .5rem;
	width: 5rem;
	font-size: 15px;
	border: 1px solid rgb(8, 98, 216);
	font-weight: 500;
	height: 3rem;
	padding: 10px 10px;
	text-decoration: none;
	display:inline;
	background-color: rgba(255, 255, 255, 1);
}

.dropbutton:hover, .dropbutton:focus {
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
	border: 3px solid rgb(8, 98, 216);

}

.dropdownmenu-content button:hover {
	color: rgb(1, 71, 161);
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}

.dropdownmenu a:hover {
	background-color: #f1f1f1
}

.show {
	display:block;
}

.show-dropdown {
	display: flex;
	flex-direction: column;
}

.grid-container {
	margin: 7% 5%;
  display: grid;
	align-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-box {
	position: relative;
	z-index: 1;
	margin: 5px;
	padding: 1rem;
  background-color: white;
  border: 1px solid darkgray;
  font-size: 22px;
  text-align: left;
	color:rgb(49, 52, 226);
	border-radius: 10px;
	height: 10rem;
}

.grid-box:hover {
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  background-color: rgb(224, 251, 253);
	/* z-index: -2; */
}
 
.grid-box:hover .del{
  display: block;
}

.del {
	display: none;
  float: right;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(163, 163, 163);
	color:rgb(49, 52, 226);
	z-index: 2;
}

.del:hover {
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}