.responsiveimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.responsiveimgleft {
  display: block;
  margin-left: 0px;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}


{background-color: coral;}

body{
    padding: 20px;
    max-width: 12800px;
    margin-left: auto;
    margin-right: auto;}

p#links{text-align: center;}
p#intro{text-align: center;}
p#footer{text-align: center;
    color: #5f69a4;}

a:link {
    color: #293785;
    text-decoration: none;}
a:visited {color: #293785;}
a:hover
    {color: #f18500;
}

::selection {
    background: #293785;
    color: #fff}
 
hr {
  border-top: 1px solid;
  border-bottom: 0px;
  border-left: 1px solid;
  border-right: 1px solid;}

.dankcontent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    grid-template-rows: repeat(2, 550px);
}

.dankcontent > div > img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center;
}

.project {
    margin: 0 5px 0 5px;
}

.hover_img a { position:relative; }
.hover_img a span {
    position:fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    display:none;}

.hover_img a:hover span { display:block; }

.fadein {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    grid-template-rows: repeat(2, 550px);
}

.fadein > div > img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center;