@charset "UTF-8";


html {
  font-family: "Raleway", "Georgia", "Verdana", "arial", sans-serif;
font-size: 1.2em
}

body {
  background-color: lightgrey;
}

div.ctr {
text-align: center;
}

:is(h1,h2,h3,h4,h5,h6){
color:blue;
font-weight:bold;
text-align: center;
}

:is(h4,h5,h6){
color:blue;
font-weight:bold;
text-align: left;
}

p {

color: navy;
}

p1 {
text-align: center;
  color: red;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ul,
ol,
li {
color:blue

}

li{
  margin: 1em 0;
}

/*li:not(:last-child) {
    margin-bottom: 5px;
}*/

hw2 {
text-align: center;
color: green;
}

hw3 {
text-align: center;
font-size: 14px;
}

.modal {
z-index:1;
display:none;
padding-top:10px;
position:fixed;
left:0;
top:0;
width:90%;
height:90%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.8)
}

.modal-content{
margin: auto;
display: block;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}


.close {
text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white
}
.container1 {
width:200px;
display:inline-block;
}
.modal-content, #caption {

    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  background-color: none;
  color: blue;
  font-style: italic;
  padding: 2px;
  text-align: center;
}

.photocaption {
div {text-align: center;
}