img{max-width:100%;height:auto} 
#content p, #content li{max-width:560px}
img.framed{outline:1px solid #ddd; }
img.pop{border:1px solid #ddd; }
img.pop{margin-bottom: 15px}
img.pop:hover{border: 1px solid black;}
.pop {
  cursor: pointer;
  transition: 0.3s;
}
.pop:hover {
  opacity: 0.7;
}
p{line-height: 150%;}
@media screen and (max-width: 600px){
#content{text-align:left;} 
#create #content{text-align:center;} 
.pop:hover{opacity: 1;}}
.modal {
display: none; 
position: fixed; 
z-index: 1;
padding-top: 5px; 
width: 100%; 
height: 100%;
overflow: auto; 
background-color: rgb(0, 0, 0); 
background-color: rgba(0, 0, 0, 0.7); 
top: 50%;
left: 50%;
transform: translate(-50%, -50%);     
box-sizing: border-box;     
}
.modal-content {
  margin: auto;
  display: block;    
}
.caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0 15px;
}
.modal-content,
.caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.5s;
  animation-name: zoom;
  animation-duration: 0.5s;
}
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.close {
  position: sticky;
  top: 0;
  right: 10%;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  float: right;
  z-index: 2
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}
#goTop{padding: 1px 5px 0px 6px;
    border: 1px solid #056fc1;
    border-radius: 3px;
    text-decoration: none;
    font-weight: bold;
}
#goTop:hover{
background-color: #056fc1;
color:#fff;
}