@font-face{
    font-family:trajan;
    src: url('/fonts/TrajanPro-Regular.ttf')
}

body{
    background-image: url(kowloon_exterior_night-ian-lambot.jpg);
    background-position: center;
    background-attachment: fixed;
    background-size: 100%;
}

a{
    color:#dc1616;
}

#container{
    display:flex;
    flex-direction: column;
    align-items: flex-end;
}
#header{
    display:flex;
    flex-direction:column;
    align-items: flex-end;
    font-family:trajan;
    text-align:right;
    margin-top: 0;
    margin-right:10px;
    margin-left:10px;
    font-size:30px;
    color: #dc1616;
    width: 100%;
    background-color:black;
}

#topnav{
    display:flex;
    align-items: flex-end;
    
}
h1{
    border-bottom: 4px solid #dc1616; 
    vertical-align: middle;
    margin-right:20px;
    margin-left:20px;
    padding-top: 50px;
    margin-top: 0;
    margin-bottom: 10px;
}

h2{
    font-size: 25px;
    text-align-last:start;
    margin: 10px;
}
#main{
    background-color: black;
    border: 4px solid #dc1616;
    margin: 10px;
    width:60%;
}
p{
    color: #dc1616;
    padding-left: 15px;
    padding-right: 15px;
    font-size:20px;
}

#timeline{
    display:flex;
    flex-direction:column;
}

.row{
    display: flex; 
}

.photo{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-items: center;
}

figure {
    display: table;
    padding: 5px;
    font-size: .875em;
    width: 90%;
    height: max-content;
    align-items: center;
    justify-items: center;
    margin-bottom: 10px;
    margin:10px;
    box-sizing:border-box;
}

figure img {
   display: block;
   max-width: 90%;
}

figure a {
    display: block;
   max-width: 100%;
}
figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 0 5px 5px;
    margin:2px 0 2px;
    width: 100%;
    color:#dc1616;
}