body{
	font-family:Arial;
	margin:0;
	padding-top:25px;
}

.navbar {
	position:fixed;
	top:0;
	width:100%;
	background-color:gray;
	left:0px;
}

.navbar a {
	float:left;
	display:block;
	color:white;
	text-align:center;
	padding:10px;
}

.navbar a:hover{
	background-color:violet;
	color:black;

}

.nav-right {
float:right;
}

.grid-container{
	display:flex;
	flex-direction:row;
	padding:20px;
	gap:10px;
}

.main{
	flex: 75%;
	padding:0px;
}

iframe {
	border-radius:20px;
	height:620px;
	width:100%;
	border: 1px solid red;
}

ul {	height:620px;
	font-size:25;
	flex:10%;
	text-align:center;
	position:static;
	list-style-type:none;
	margin:0;
	border:3px solid black;
	padding:0;
	background-color:#f1f1f1;
}

li a{
	display:block;
	width:fit-content;
	text-decoration:none;
	color:black;
	padding: 8 px 16 px;
	border-bottom: 1px solid black;
}

li a:hover {
	background-color:violet;
	color:white;
}

.drop-nav{
	float:left;
	overflow:hidden;
}
.drop-nav .dropbtn {
	font-size:16px;
	border:none;
	outline:none;
	margin:0;
	color:white;
	padding: 14 16px;
	background-color:inherit;
	font-family:inherit;
	cursor:pointer;
}

.drop-nav:hover .dropbtn{
	background-color:violet;
	color:black;
}

.drop-content{
	display:none;
	min-width:160px;
	box-shadow 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index=1;
	position:absolute;
	background-color:#dfdfdf;
	position:absolute;
	
}

.drop-content a{
	float:none;
	color:black;
	padding: 12px 16px;
	display:block;
	text-decoration:none;
	text-align:left;
}

.drop-content a:hover{
	background-color:cyan;
	color:red;
}

.drop-nav:hover .drop-content{
	display:block;
}