*{
  border:0;
  margin: 0;
}
.d1{
  width: auto;
  height: 280px;
  background-color: hsl(0,0%,.5%,0.8);
  color: white;
  margin: 0;

}
.head h2,p{
  margin-left: 30px;

  line-height: 30px;
  padding-top: 15px;
}
.head h2,h4{
  display: inline;
  padding-top: 20px;
  padding-bottom: 30px;
}
.head h4 {
  margin-left: 10px;
  color:silver;
}
hr {
  background-color:  hsla(207, 64%, 48%, 1);
  height: 1px;
  width: 90%;
  margin-left: 30px;
}
.contact span{
  margin-left: 10px;
  color: hsla(207, 64%, 48%, 1);
}
.content-out {
  display: flex;
}
.content  {
  display: flex;

}
.content p {
  color: silver;
}
.afterds {
  background-color:  hsla(207, 64%, 48%, 1);
  height: 3px;
  width: auto;
  margin: 0;
}
.d2{
  width: auto;
  height: 500px;
  background-color: rgba(218, 223, 225, 0.7);
  overflow: hidden;
  border: 1px solid #444;
}

.d2:hover {
        overflow: auto;
}

div.d2{
   padding-right: 16px;
}
div.d2:hover {
        padding-right: 0px;
}

.margin{
  margin-left: 30px;
}
.topic{
  width:auto;
  height: auto;
  margin-left: 30px;
margin-right: 80px;
}
/*.in1{ 
                float:left;  
                width:8%; 
  height:auto;
               height:300px;
            }*/
.in-topic{
  width:90%;
  height: auto;
  margin-left: 100px;
  float: center;
}

a{
  color:  hsla(207, 64%, 48%, 1);
  font-size: 24;
  margin-top: 10px;
}
.content3{
 width: auto;
  height: 180px;
  background-color: hsl(204,8%,95%);
  
 

}
.content31{
  width: auto;
  height: 180px;
  background-color: hsl(204,8%,95%);
  color: black;
  margin-left: 30px;
}
.content2{
margin-right: 100px;}



/*.head a{
a:hover {text-decoration:none;color:yellowgreen;font-weight:bold;}*/