:root {
  --bg-color:white;
  --pg-color:red;
  --accent:pink;
  --accent-2:white;
}

*{
  box-sizing:border-box;
}

html, body {
  margin:0px;
  font-family:sans-serif;
  font-size:1em;
}
.image-button {
             width: 150px;
             height: 150px;
             position:absolute;
  top:250px;
  left:25px;
  z-index:9;
             background-image: url(https://psv4.userapi.com/s/v1/d2/34GuSQ4qz9pZzZ-pjgc6ySr2cqysC221bh5oRaLHzlJ8Ngkw57RkQFvyVSbPKsaHjA4iwJ_EqvYmg9jJgk1FCv9GuBMEALtCa42FQgk3XD2ZCMYjzbNWlqmrWw_DuV7Xf5nwPiYEindV/mail.png);
             background-size: 100%;
  background-repeat: no-repeat;
             border: none;
             cursor: pointer;
}
.image-button:hover {
  text-decoration: wavy underline;
  text-decoration-color: white;
  background-image: url(https://psv4.userapi.com/s/v1/d2/RwuiYWNFo9muos1TxI7alCR8uRzI7IxXcGe-HioOQ-EwO1lM1LV0L9QOhp15bwCGYTfcvVXcXK_5aLfy5SO3dy3mxMZ5QkOI6RiAllUQytzYIEfs_mAD5uMb0AW5A2QmkPsDjkvLbkXq/mail2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: transparent;
}

.pic{
  width: 100%;
}
h1{
  color: red;
  font-size: 1.7em;
}
header{
}
body {
  background-color: red;
}
#container {
  background-image: url(https://psv4.userapi.com/s/v1/d2/XP3QpxJHqpJKq5RQWJMd9TYDx18BfuANoYLVpw_LbQ46SHuov9dMION2ky8nVCg57JOj3jEFm-QqawM2PyyZJhTOoitXzzV60qLeHHpPuYKBGhsHJtEnt2QQYdshcXvn6MBWJR_vXTsC/background.png);
  background-size:50%;
  width:93%;
  height:100%;
  border-left:100px solid var(--bg-color);
  position:relative;
}
#outer {
  border-left:4px dashed var(--accent);
  margin-left:100px;
}
nav {
  background-color:var(--pg-color);
  position:absolute;
  top:100px;
  left:50px;
  border:5px solid var(--accent);
  width:120px;
  height:120px;
  z-index:9;
}
article { 
  padding:5px;
  padding-top: 1px;
  line-height:1.7em;
  text-align: center;
  
}
h2 {
  font-size:15px;
  border-bottom:2px dashed var(--accent-1);
  padding-bottom:1px;
  padding-top:2px;
}
nav > ul {
  background-color:var(--accent-2);
  margin:20px;
  padding:0;
  list-style:none;
}
nav > ul > li {
  border-bottom:1px solid white;
  text-align:center;
}
nav > ul > li:last-child {
  border-bottom:none;
  text-align:center;
}
nav > ul > li > a {
  font-size:12px;
  padding-top:5px;
  padding-bottom:5px;
  display:inline-block;
  color:red;
}
p{
  color: red;
}
footer{
  text-align: right;
  font-weight: 0.5em;
}
.progress{
width: 97%;
margin-left:0;
margin-top:0;
}
.gospel1{
  width: 100%;
margin-left:0;
margin-top:0;
border: 5px dashed pink;
}

a:visited {
  color: orange;
}
a:link {
  color: red;
}
a:hover {
  color: red;
  text-decoration: wavy underline;
  text-decoration-color: white;
  background: pink;
}
 @media only screen and (max-width: 850px) {
   nav {
     left:0;
   }
   #container {
     width:100%;
     margin-left:0;
   }
   #outer {
     margin-left:0;
   }
}