#navbar
{
    z-index:3;
	position:fixed;
	
	top:25vh;
	left:0;
	right:0;
	
	margin:auto;
	
	width:50vw;
	min-width:320px;
	height:3vh;
	min-height:1.1rem;
	
	border-width:2px;
	border-style:solid;
	border-color:#deddda;
	
	font-weight:bold;
    color:#243288;
}

#navbar a
{
    text-decoration:none;
    color:#243288;
}

#navbar span
{
	display:block;
    
	margin-left:10px;
}

.dropdown
{
	float:left;
    
	width:25%;
	height:100%;
}

.navbutton, .alertnavbutton
{
	display:flex;
    
	width:100%;
	height:100%;
    
	background-image: linear-gradient(45deg, #ba8f24, #deddda);
    
    font-size:1.5rem;
	align-items:center;
}

.alertnavbutton
{
    animation-name:ping;
    animation-duration:1s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
}

@keyframes ping
{
    0% {background-image: linear-gradient(45deg, #ba8f24, #deddda);}
    50% {background-image: linear-gradient(45deg, #ac1e20, #deddda);}
    100% {background-image: linear-gradient(45deg, #ac1e20, #deddda);}
}

.dropmenu
{
	display:none;
	position:absolute;
    
	width:25%;
	height:100%;
    
	opacity:0.9;
}

.extension
{
	position:relative;
    
	width:100%;
	height:100%;
}

.dropbutton, .alertdropbutton
{
	display:flex;
    
	width:100%;
	height:100%;
    
    background-color:#deddda;
	background-image: linear-gradient(45deg, #ba8f24, #deddda);
    
	align-items:center;
}

.alertdropbutton
{
    background-image: linear-gradient(45deg, #ac1e20, #deddda)
}

.extensionmenu
{
	display:none;
    
	position:relative;
    
	top:-100%;	
	left:100%;

	width:100%;
	height:100%;
}

.extensionbutton
{
	display:flex;
    
	width:100%;
	height:100%;
    
    background-color:#deddda;
	background-image: linear-gradient(45deg, #ba8f24, #deddda);
    
	align-items:center;
}

.dropdown:hover .dropmenu
{
	display:block;
}

.extension:hover .extensionmenu
{
	display:block;
}

.dropbutton:hover, .alertdropbutton:hover
{
    background-image:none;
}

.extensionbutton:hover
{
    background-image:none;
}

.dropbutton, .alertdropbutton .extensionbutton
{
	font-size:1.0rem;
}