/* Sample 2280 CSS Document by Shelly L. Solberg* Fall 2024*/

/* Responsive Web Design / CSS - Cascading Style Sheet / for 
Device Independence on Large Desktop Screens and Small Mobile Phones.  */


/* Style the video: 100% width and height to cover the entire window */
#myVideo2 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content {
  position: fixed;
  top: 0px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #333333;
  width: 100%;
  padding: 0px;
}

body {
	background-color: #F0F8FF;
    background-image: url('images/2280/2280-2281-Thumbnail_500.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	background-position: center top;
    font-family: Arial, Helvetica, sans-serif;
	max-width:100%;
	max-height:100%;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	margin-bottom:0;
}


/* RESPONSIVE IMAGES IN GALLERY SCRIPT*/
.responsive {
  width: 100%;
  height: auto;
			  background-image: url('images/2280/2280-2281-Thumbnail_500.jpg');
			  background-repeat: no-repeat;
			  background-attachment: fixed;
			  background-position: center top;
}

/*CSS USER-SELECT PROPERTY https://www.w3schools.com/cssref/css3_pr_user-select.php */
 div {
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none;  Standard syntax 
} 

/* GLOW */
.glow {
  font-size: 70px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #66ccff, 0 0 20px #33ffff, 0 0 30px #33ffff, 0 0 40px #33ffff, 0 0 50px #33ffff;
  }
  
  to {
    text-shadow: 0 0 10px #fff, 0 0 15px #33ccff, 0 0 20px #33ccff, 0 0 30px #33ccff, 0 0 40px #33ccff, 0 0 50px #33ccff, 0 0 60px #33ccff;
  }
}
/* END GLOW */
/* BEGIN SECTIONS SUCH AS CHAPTERS *//* HEADINGS H1-H6*/
section {
	font-family: Arial, Helvetica, sans-serif; 
	display: block;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 1.75em;
	line-height:1.75em;
	font-weight:bold;
	color: #3399cc;
	text-align: center;
	font-style: ;
	}
/* begin body type *//* headings h1-h6*/
h1 {
	font-family: Arial, Helvetica, sans-serif; 
	color: #222222;
	display: block;
	font-size: 4.75vw;
	margin-top: 0.00em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	}

/* #ffcc33; */
div.h1 { 
	font-family: helvetica, arial, sans-serif;
	font-size:7vw;
	padding: 0px 0px 10px 0px;
	color:#3399cc;
	text-transform:none;
	vertical-align:middle;
	text-align:center;
	letter-spacing: 1px;
	font-weight: 550;
	font-variant: none;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: rgba(0, 0, 0, 0.9) 0px 1px 1px;
	}

h2 {
	font-family: Courier New, cursive;
	color: #3399cc;	
	display: block;
	font-size: 7vw;
	margin-top: 35px;
	margin-bottom: .1em;
	margin-left: 0px;
	margin-right: 0px;
	font-weight: bold;
	text-align: center;
	xoverflow: hidden;
	text-overflow: ellipsis;
	xtext-shadow: 2px 2px 2px #333
	}

h3 {
	font-family: Courier New, Helvetica, sans-serif; 
	color: #3399cc;
	display: block;
	font-size: 250%;
	margin-top: 0.50em;
	margin-bottom: 0em;
	margin-left: 10;
	margin-right: 10;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	}

h4 {
	font-family: Arial, Helvetica, sans-serif; 
	display: block;
	font-size: 125%;
	margin-top: .0em;
	margin-bottom: .0em;
	margin-left: 0px;
	margin-right: 0ps;
	font-weight: bold;
	color: #000000;
	text-align: center;
    text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	}
h5 {
	font-family: Arial, Helvetica, sans-serif; 
	display: block;
	padding: 0px;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 1.75em;
	margin-top: 1.0em;
	margin-bottom: .1em;
	color: #3399cc;
	text-align: center;
	font-style: ;
	overflow: hidden;
	text-overflow: ellipsis;
	}
h6 {
	font-family: Arial, Helvetica, sans-serif; 
	display: block;
	font-size: 75%;
	margin-top: 2.33em;
	margin-bottom: 2.33em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	color: #000000;
	text-align: center;
	text-decoration: caps;
	} 
/* begin paragraghs */
p {
	font-family: Arial, Helvetica, sans-serif; 
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 1.em;
	line-height:1.7em;
	font-weight:regular;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	}

/* paragraghs experiment with rem 
html { 16px; }

@media (min-width: 0px) {
  p { font-size: 1rem; 	line-height:2rem; margin-left: 10px; margin-right: 5px; font-family: Helvetica, sans-serif; color: #222; text-overflow: ellipsis; }
}

@media (min-width: 400px) {
  p { font-size: calc(1rem + 1vw); line-height: calc(1rem + 3vw); margin-left: 10px; margin-right: 5px; font-family: Helvetica, sans-serif; color: #222; text-overflow: ellipsis; }
}

@media (min-width: 1001px){
  p { font-size: 1.75rem; line-height: calc(1rem + 1.7vw); margin-left: 10px; margin-right: 5px; font-family: Helvetica, sans-serif; color: #222; text-overflow: ellipsis; }
}
*/

/* begin lists */
pre {
	font-family: Arial, Helvetica, sans-serif; 
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 1.em;
	line-height:1.5em;
	font-weight:regular;
	color: #red;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	}

/* begin lists */


ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}

/* will not recognize this list? So it is a "style" in the head tags */
ul {
list-style-image: url('images/buttons/blue-ball-animated.gif');
	}

li {
	font-family: Arial, Helvetica, sans-serif; 
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 1.em;
	line-height:1.5em;
	font-weight:regular;
	color: #222222;
	xverflow: hidden;
	xtext-overflow: ellipsis;
	}
/* End lists */

table.center {
  margin-left: auto; 
  margin-right: auto;
	overflow: hidden;
	text-overflow: ellipsis;
}



/* begin hyperlinks */
a:link {
	font-family: Arial, Helvetica, sans-serif; 
	padding: 0px;
	font-size: 1em;
	line-height:1.5em;
	font-weight:regular;
    color: #006699;
    background-color: transparent;
    text-decoration: underline;
	transition:0.5s;
	}
a:visited {
	font-family: Arial, Helvetica, sans-serif; 
	padding: 0px;
	font-size: 1em;
	line-height:1.5em;
	font-weight:regular;
    color: #006699;
    background-color: transparent;
    text-decoration: underline;
	}
a:hover {
	font-family: Arial, Helvetica, sans-serif; 
	padding: 0px;
	font-size: 1em;
	line-height:1.5em;
	font-weight:regular;
    color:cyan;
    background-color: transparent;
    text-decoration: underline;
	}

/* E Sub Chapter Titles */
A.class1 {color: #ff9933; line-height:1.75em; font-weight:bold; transition:0.5s;}
A.class1:link {color: #ccc; font-size:1.2em;  font-weight:bold; line-height:1.7em; font-weight:bold;}
A.class1:visited {color: #666; font-size:1.2em; line-height:1.7em; font-weight:bold;}
A.class1:hover {color: #ffffff; font-size:1.2em; line-height:1.7em; font-weight:bold;}
A.class1:active {color: #ffffcc; font-size:1.2em; line-height:1.7em; font-weight:bold;}


A.class2 {color:#ffffff; line-height:1.75em; font-weight:bold; transition:0.5s;}
A.class2:link {color: #ffffff; font-size:1.2em; font-weight:bold; line-height:1.7em;}
A.class2:visited {color: #cccccc; font-size:1.2em; font-weight:bold; line-height:1.7em;}
A.class2:hover {color: #66ccff; font-size:1.2em; font-weight:bold; line-height:1.7em;}
A.class2:active {color: #ffffcc; font-size:1.2em; line-height:1.7em;}

A.class3 {color:#ffffff; line-height:1.75em; font-weight:bold; transition:0.5s;}
A.class3:link {color: #ffffff; font-size:1.2em; line-height:1.7em; font-weight:bold;}
A.class3:visited {color: #ffffff; font-size:1.2em; line-height:1.7em; font-weight:bold;}
A.class3:hover {color: #66ccff; font-size:1.2em; line-height:1.7em; font-weight:bold;}
A.class3:active {color: #ffffcc; font-size:1.2em; line-height:1.7em; font-weight:bold;}


/* Image Fa Gallery Picture Links */
A.class4 {color:#006699; line-height:1.75em; font-weight:bold; text-decoration:none; transition:0.5s;}
A.class4:link {color: #006699; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class4:visited {color: #006699; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class4:hover {color: cyan; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class4:active {color: #ffffcc; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}

/* E Chapter Titles */
A.class5 {color:#fff; line-height:1.2em; font-weight:bold; text-decoration:none; transition:0.5s;}
A.class5:link {color: #fff; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class5:visited {color: #fff; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class5:hover {color: #999; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class5:active {color: #ffffcc; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}


/* Down Arrows */
A.class6 {color:#ff9933; line-height:1.2em; font-weight:bold; text-decoration:none; transition:0.5s;}
A.class6:link {color: #ff9933; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class6:visited {color: #ff9933; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class6:hover {color: #9e5d1c; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class6:active {color: #ffffcc; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}

/* Up Arrows */
A.class7 {color:#66ccff; line-height:1.2em; font-weight:bold; text-decoration:none; transition:0.5s;}
A.class7:link {color: #66ccff; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class7:visited {color: #66ccff; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class7:hover {color: #003a56; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}
A.class7:active {color: #ffffcc; font-size:1.2em; line-height:1.7em; font-weight:bold; text-decoration:none;}


#myDIV {
	border: 0px solid black;
	width: 400px;
	height: 100px;
	animation: mymove 5s infinite;
		}

	@keyframes mymove {
	50% {font-size: 40px;}
		}

.container {
color:black;
position: center;
width: 100%;
height: auto;
align-content: center;
align-self: center;
border: 1px solid cyan;
		}
/*    box-shadow: rgba(0, 0, 0, 0.40) -5px 5px 10px;*/
div.example {
    background-color: #fff;
	position: center;
	width: 98%;
    padding: 10px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 10px 15px 0 rgba(0, 0, 0, 0.25);
	align-content: center;
	align-self: center;
	border: 1px solid cyan;
	border-radius: 2px;
	}
/*    box-shadow: rgba(0, 0, 0, 0.40) -5px 5px 10px;*/
div.example2 {
    background-color: #111;
	position: center;
	width: 98%;
    padding: 10px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 10px 15px 0 rgba(0, 0, 0, 0.25);
	align-content: center;
	align-self: center;
	border: 1px solid cyan;
	border-radius: 2px;
	}
/*    box-shadow: rgba(0, 0, 0, 0.40) -5px 5px 10px;*/
div.example3 {
    background-color: #fff;
	position: center;
	width: 100%;
    padding: 0px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 10px 15px 0 rgba(0, 0, 0, 0.25);
	align-content: center;
	align-self: center;
	border: 1px solid cyan;
	border-radius: 2px;
	}


/* SECONDARY NAVIGATION */
* {box-sizing: border-box}

body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #333;
  overflow: auto;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 10px 15px 0 rgba(0, 0, 0, 0.25);
}

.navbar a {
  float: left;
  padding: 14px;
  color: #f2f2f2;
  text-decoration: none;
  font-size: 17px;
  width: ; /* Four links of equal widths */
  text-align: left;
  
}

.navbar a:hover {
  background-color: #3399cc;
  color: white;
}

.navbar a.active {
  background-color: #3399cc;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}
/* END SECONDARY NAVIGATION */
/* R */
video {
  width: 100%;
  height: auto;
}
/* begin button */

.button {
	background-color: #3399cc;
	color: white;
	border: none;
	border-radius: 0px;
	height: 40px;
	width: 210px;
	padding: 5px 5px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 10px 25px;
	cursor: pointer;
	border: 1px solid cyan;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 10px 15px 0 rgba(0, 0, 0, 0.25);
		}
.button:hover 
	{
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 10px 15px 0 rgba(0, 0, 0, 0.25);
	background-color:#66ccFF;
	color: #3399cc;
	}
/* end button */

}
#myBtn 
{
  display: none; /* Hidden by default */
  position: fixed; /* Fixed / sticky position */
  bottom: 59px; /* 59px Logo Place the button at the bottom of the page */
  right: 59px;  /*59px Place the button 30px from the right */
  z-index: 99; /* could be number  Make sure it does not overlap */
  border: 2px solid #000000; /* Remove borders */
  outline: 1px solid cyan; /* Remove outline */
  background-color: #3399cc; /*  Set a background color */

  color: #ffcc33; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 20px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  border: 1px solid cyan;
}

#myBtn:hover {
  background-color: #3399cc; /* Add a dark-grey background on hover */
border: 1px solid cyan;
}
/* Box Shadow CSS Settings See hidden text under Art Appreciation Title*/
.box-shadow {
	rgba(0, 0, 0, 0.25) 0px 54px 55px, 
	rgba(0, 0, 0, 0.25) 0px -12px 30px, 
	rgba(0, 0, 0, 0.25) 0px 4px 6px, 
	rgba(0, 0, 0, 0.25) 0px 12px 13px, 
	rgba(0, 0, 0, 0.25) 0px -3px 5px;
}

.image-box {
	display: block;
	margin-left: 0;
	margin-right: 0;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 10px 15px 0 rgba(0, 0, 0, 0.25);
}	
/* END Box Shadow CSS Settings See hidden text under Art Appreciation Title*/

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}
/* begin footer   position: fixed;*/

body{
margin:0;
overflow-x:hidden;
}

.footer {
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #000;
  padding: 6px;
  text-align: center;
  z-index: 50;
}

.footer{
background:#000;
padding:8px 0px;
font-family: 'Play', sans-serif;
text-align:center;
}

.footer .row{
width:100%;
margin:1% 0%;
padding:0.6% 0%;
color:gray;
font-size:0.6em;
text-align:center;
}

.footer .row a{
text-decoration:none;
color:#fff;
text-align:center;
transition:0.5s;
}

.footer .row a:hover{
color:#66ccFF;
}

.footer .row ul{
width:100%;
}

.footer .row ul li{
display:inline-block;
margin:0px 20px;
text-align:center;
}

.footer .row a i{
font-size:1.75em;
margin:0% 1%;
}

@media (max-width:720px){
.footer{
text-align:center;
padding:5%;
}
.footer .row ul li{
display:block;
margin:8px 0px;
text-align:left;
}
.footer .row a i{
margin:0% 3%;
}
}