/* Modal container styling */
    .modal {
      display: none; /* Hidden by default */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 20rem;
      height: 25rem;
      overflow: auto;
		scrollbar-width: none;
      background-color: whitesmoke */
    }


    /* Modal content styling */
    .modal-content {
      position: relative;
      margin: 2dvw 0;
      padding: 0;
      width: 17rem; /* Adjust width here if changed on lmenu.html */
      max-width: 22rem;
      height: 20rem;
      background-color: whitesmoke;
		box-shadow: 2px 2px 4px dodgerblue;
      border-radius: .5rem;
      overflow: hidden;
    }
/* Define modal button */
	button {
		font-family : Helvetica;
		font-size: 1.375rem; 
		color : #fff; 
		background : dodgerblue;
		padding: .5rem .75rem
	}

	#openModal {
		position: fixed;
		top:1rem;
		left: 1.5rem;
		border: none;
		border-radius : .75rem;
		box-shadow: -2px -2px 8px #000 inset
	}

	#openModal:hover { 
		color: #000;
		background: whitesmoke;
		box-shadow: 2px 2px 8px #000 inset
	}
    /* Close button styling */
    .close {
      position: absolute;
      top: 15px;
      right: 15px;
      color:#000;
		background : whitesmoke;
      font-size: 28px;
      font-weight: 300;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
    }

    /* Iframe styling */
    iframe {
      width:22rem;
	height:20rem;
      border: none;
    }

.menu-display { display: none} /* hide modal button */




p a.top-button {
/*Button*/
display : flex;
justify-content : center;
align-items: center;
position: fixed; /*Make it Sticky*/
bottom: 2rem;
left: 1.5rem;
width: 3rem;
height: 3rem;
background: dodgerblue;
border: solid 4px #ffff00;
border-radius: 50%;
box-shadow: 1px 1px 4px #000;
/*Button Text*/
font-family: Helvetica , arial, serif;
color: #fff !important ;
font-size: 1.125rem;
font-weight: bolder;
text-decoration: none;
text-indent:0;
text-shadow : 1px 1px 2px #000;
}


p a:hover.top-button {
color: #000 !important;
background-color: whitesmoke ;
box-shadow: 1px 1px 4px #000 inset ;
text-shadow:none;
border: solid 1px #000;

}

#theme-toggle {
		position: fixed;
		top:1rem;
		right: 10dvw;
      font-family :wingdings;
      font-size: 1.5rem;
      border: none;
      cursor: pointer;
      background:transparent;
      transition: background-color 0.3s;
        }
#theme-toggle:hover {
      background:transparent;
		text-shadow: 1px 1px 4px #ffff00}




/*Define main navbar*/
ul.vnavbar6 {
max-width: 16rem; /*Adjust for longest link to prevent wrap*/
min-width : 13rem;
position:relative;
z-index:5;
padding: 0;
border:none;
box-shadow: none;
margin: 0 0 2rem 3rem ; /* Left and bottom margin */
float: right;
}


/*Define link text - remove underline*/
ul.vnavbar6 a {
font-family: Helvetica , system-ui , arial, serif;
font-size: clamp(1.125rem , 2vw , 1.375rem);
text-shadow: none ;
text-decoration: none;
}

ul.vnavbar6 {
list-style: none;
box-shadow:none;
border: none;
padding: 0 0
}



ul.vnavbar6 li ul,
ul.vnavbar6 li ul li ul {
list-style: none;
border: none;
border-radius: 1rem;
}

/*position list items - 1rst tier*/
ul.vnavbar6 li {
position: relative;
line-height: 120%
}

/* Define Button Appearance and Hover change*/

ul.vnavbar6  a {
display:block;
padding:.25rem 1rem;
margin: 0 0 ;
color: dodgerblue; /*Link Color*/
background: whitesmoke; /* Background color*/
border: none;
border-radius: 1rem;
box-shadow: 1px 1px 8px dodgerblue;
transition: transform 0.3s ease-in-out;
}

ul.vnavbar6  a:hover {
color:#fff;
text-shadow : 1px 2px 2px #000;
font-weight: 800;
background: dodgerblue; /*hover background change*/
border:none;
box-shadow: 0px 4px 14px dodgerblue;
position:relative;
z-index: 99 /* display in front */
transition: transform 0.3s ease-in-out;
transform : scale(1.1); /*Enlarge on hover*/
}


/* Hide 2nd and 3rd tier nested lists*/
ul.vnavbar6 li ul,
ul.vnavbar6 li:hover ul li ul {
display:none
}


/*display 2nd and 3rd tier list*/
ul.vnavbar6 li:hover ul, /*2nd tier*/
ul.vnavbar6 li ul li:hover ul { /*3rd tier*/
display: block;
position: absolute;
white-space: nowrap;
top: 0;
right: 100%; /* display  to left */
min-width:185px; /*set minimum width*/
z-index: 5
}


@media (max-width: 768px) {
ul.vnavbar6 {display:none}

div.menu-display {display: block;} /*Show Toggle Button */
}