/* 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: 1px 2px 8px dodgerblue;
      border-radius: 1.25rem;
      overflow: hidden;
    }
/* Define modal button */
	button {
		font-family : Helvetica;
		font-size: 1.375rem;
		color : #fff;
		background : dodgerblue;
		padding: .5rem .75rem;
		box-shadow: 1px 2px 8px #000
	}

.button {
  
}
.button:hover {
  
}


	#openModal {
		position: fixed;
		top:1rem;
		left: 1.5rem;
		border: none;
		border-radius : 45px;
		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: 20px;
      right: 15px;
      color:#fff;
		background : dodgerblue;
      font-size: 28px;
      font-weight: 400;
		padding: 1px 4px;
		box-shadow: 1px 2px 4px #000;
      cursor: pointer;
    }

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

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

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

#theme-toggle {
		position: fixed;
		top:1rem;
		right: 10dvw;
      font-family :wingdings;
      font-size: 1.5rem;
      border: none;
      /*border-radius: 5px;*/
      cursor: pointer;
      background:transparent;
      box-shadow: none;
      /*color: white;
		border: solid 1px #fff !important;
		box-shadow: 1px 1px 4px #000 !important;*/
      transition: background-color 0.3s;
        }
#theme-toggle:hover {
      background:transparent;
		text-shadow: 1px 1px 4px #ffff00}




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: arial, serif;
color: #fff !important;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
text-indent:0;
text-shadow : 1px 1px 2px #000;
}


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

/* Exit*/
p a.button1 {
position: fixed;
top:1rem;
right: 20dvw;
border: none;
border-radius: 45px;
}

p a.button1 {
font-family : arial;
font-size: 1.25rem;
color : #fff !important;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
background : #ff931e;
padding : .5rem .75rem;
text-indent: 0;
box-shadow: -2px -2px 8px #000 inset;

}

p a:hover.button1 {
background : whitesmoke;
color:#000 !important;
text-decoration: none;
box-shadow: 2px 2px 8px #000 inset;
text-shadow:none;
border: none
}


div.iframemenu , div.explanation { /*Button container*/
display:block;
float:none;
position: relative; /* changed from relative*/

z-index:5;
width :145px;
padding:0 0;
margin : 2px 0;
}

div.iframemenu p {
padding : 0 0;
margin: 0 0
}

#myiframe {
position : fixed;
top: 3rem;
left: 1rem;
/*float:left;*/
width: 361px;
height: 305px;
clear:none;
margin: 0 0;
display:block;
/*position:absolute;*/
z-index: 7;
background:#fff;
scrollbar-width:none;
border-radius: 1.25rem;
 box-shadow: 1px 2px 8px #000;
overscroll-behavior: contain;
}

#myexplanation , #mywintip {
float:none;
width: 37rem;
height: 37rem;
clear:none;
margin: 0 20dvw;
display:block;
position:absolute;
z-index: 7;
box-shadow: 1px 2px 4px #000;
}


div.explanation {margin: 1% 20dvw}

#toggleButton {
position: fixed;
top: 1rem;
left: 1rem;
width:4rem;
color: #fff;
font-weight: 800;
font-size: 1.125rem;
padding: .312rem 0;
border-radius: 1.25rem;
background-color: dodgerblue;
box-shadow: 1px 2px 8px dodgerblue
}

#toggleEXP {
width:250px;
color: #fff;
font-weight: 800;
font-size: 1.125rem;
padding: .312rem 0;
background: #ff0000;
}

#toggleWIN {
width:250px;
color: #fff;
font-weight: 800;
font-size: 1.125rem;
padding: .312rem 0;
background: dodgerblue;
}



/* define drop down menu*/
ul.hnavbar2 {
   display :flex;
   justify-content : flex-start;
   align-items : flex-start;
	list-style:none;
	margin-bottom:0;
	float: none;
	position:relative;
	z-index:5}
ul.hnavbar2 li {
	float: none;
	margin-right: 1rem;
	margin-bottom:0;
	position:relative;
	}
ul.hnavbar2 a { /*define first tier link*/
	display:block;
	padding: .25rem;
	font-family : arial;
	font-size: clamp(1.25rem, 1.25rem + .25dvw , 1.375rem);
	font-weight: normal;
	color: dodgerblue;
   background: whitesmoke;
	border:none;
	text-decoration:none}
ul.hnavbar2 a:hover {
    color:#444;
	border:none}
ul.hnavbar2 ul {
	list-style:none;
	position:absolute;
   left: -9999px	}
ul.hnavbar2 ul li {
	float:none;
	width:100%} /* Fills empty space - prevents transparency*/
ul.hnavbar2 ul a {
   color: dodgerblue; /*2nd tier color*/
	white-space:nowrap}
ul.hnavbar2 li:hover ul {
	left:0;
	border:none;
	box-shadow: 1px 1px 4px dodgerblue /*box shadow instead of border*/
	}
ul.hnavbar2 li:hover a {
	background-color: whitesmoke;/*Needed to prevent transparency*/
	box-shadow: none}
ul.hnavbar2 li:hover ul a {
    padding : .25rem 1.5rem 0 .25rem; /*Increase white space in drop down*/
	text-decoration:none}
ul.hnavbar2 li:hover ul li a:hover {
	color: #444; /*2nd tier link color*/
	background:whitesmoke;
	text-decoration:none; /*Set underline instead of color change*/
	padding : .25rem 1.5rem 0 .25rem;;
	box-shadow:none}



/* Hide nested lists*/
ul.hnavbar2 li ul,
ul.hnavbar2 li:hover ul li ul ,
ul.hnavbar2 li:hover ul li ul li ul  {
position: absolute;
display:none
}

/*display 2nd tier list*/

ul.hnavbar2 li:hover ul {
position: absolute;
display: block;
left: 0;
min-width: 12rem;
white-space:nowrap;
z-index:5
}

/*Display 3rd tier list*/
ul.hnavbar2 li ul li:hover ul  {
display: block;
position: absolute;
top: 0;
left: 100%; /* display to right */
min-width: 12rem; /* width is based on the containing block */
z-index: 5
}


@media (max-width: 850px) {
nav ul.hnavbar2 {display: none} /*Hide Nav Menu*/

div.modal-display  {display:block} /*Show or Hide Toggle Button */
}