@font-face {
font-family: dinLight;
src: url(fonts/din-light.ttf);
}

@font-face {
font-family: dinMedium;
src: url(fonts/din-medium.ttf);
}

body{
margin:0;
background:#ffffff;
font-family:dinLight, sans-serif;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}

.page{
max-width:1000px;
width:90%;
text-align:center;
}

header{
margin-bottom:60px;
}

.bold{
font-family:dinMedium;
}

a{
color:inherit;
text-decoration:none;
}

.coming{
font-family:dinLight;
text-align:center;
margin-bottom:20px;
}

.projects{
display:flex;
gap:30px;
flex-wrap:wrap;
justify-content:center;
}

.project{
position:relative;
width:420px;
max-width:100%;
cursor:pointer;
}

.project img{
width:100%;
display:block;
}

.overlay{
position:absolute;
inset:0;
background:rgba(180,180,180,0.85);
color:white;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
padding:20px;
opacity:0;
transition:opacity .3s ease;
}

.overlay h3{
font-family:dinMedium;
margin:0 0 10px 0;
}

.project:hover .overlay{
opacity:1;
}

/* Mobile tap */
@media (hover:none){
.project:active .overlay{
opacity:1;
}
}

h1, h2, h3, strong, b {
  font-weight: normal;
}