body{

    font-family: Roboto;
    padding: 20px;
    background: #e6e7ed;
}

.header{

    background-color: #fed136;
    padding:40px;
    text-align: center;
}

.card-header{
    background-color: #fed13699;
    transition: 0.2s;
}


.card:hover .card-header{
    background-color: #fed136;
    transition: 0.2s;
}

.img{
    background-color:#aaa;
    padding: 20px;
    background-size: cover;
    background-position: center;
}


i{
    font-size: 30px !important;

}

a{
    text-decoration: none !important;
    color:black;
}

img
{
    width: 270px;
    height: 160px;
}

.footer{
    background-color: #fed136;
    text-align: center;
}

.modalDialog
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    display: none;
}
.modalDialog:target
{
    display:block; 
}
.modalDialog>div
{
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background:  #f3f3f3;
}

.close
{
   background: #606061;
   color: #FFFFFF;
   line-height: 25px;
   position: absolute;
   right: -12px;
   text-align: center;
   top: -10;
   text-decoration: none;
   font-weight: bold;
   border-radius: 12px;
   box-shadow: 1px 1px 3px #000;  
}
.close:hover
{
    background:#fed138; 
}