@font-face{
font-family: 'MicroJournal';
src: url(../fonts/MicroJournal.ttf);
}
@font-face{
font-family: 'Afacad';
src: url(../fonts/Afacad-Regular.ttf);
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'Afacad';
src: url(../fonts/Afacad-Italic.ttf);
font-weight: normal;
font-style: italic;
}
@font-face{
font-family: 'Afacad';
src: url(../fonts/Afacad-Bold.ttf);
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: 'Afacad';
src: url(../fonts/Afacad-BoldItalic.ttf);
font-weight: bold;
font-style: italic;
}
body {
  color: #FFFFE6;
  background-color:#383838;
  font-family: Afacad;
  font-size: large;
  justify-content: center;
  display:flex;
}
header, main {
  margin-top: 1ch;
  width:auto;
  max-width: 60ch;
  background-color:#474747;
  padding: 1ch 2ch;
}
main h2 {
  border-bottom: solid;
  border-color: #5c5a56;
}
p a:link {
    color:#1dcb7b;
}
p a:visited {
    color:#259a7f;
}

figure { 
  background-color:#FFFFE6;
  color:#888080;
  justify-self: center;
  text-align: center;
  padding:1ch;
  max-width: 90%;
  height: auto;
  padding-bottom:0.5ch;
}
img {
  max-width: 100%
}
figure.triple { 
  background-color:#474747;
  color:#FFFFE6;
  justify-self: center;
  text-align: center;
  padding: 0.5ch;
  margin:0;
  max-width: 100%;
  padding-bottom: 1ch;
}
figure.triple picture{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1ch;
  grid-auto-flow: dense;
  margin-bottom: 1ch;
}
figure.triple picture img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  background-color: #2c2a24;
}
/*Zoom image*/
img.zoom {
    transition: transform .2s; /* Animation */
    margin: 0 auto;
    cursor: zoom-in;
}
img.zoom:hover {
    transform: scale(1.01);
}

/*Navigation bar*/
nav {display:flex;
  flex-direction: column;
  width: 14ch;
  padding-top:4ch;}
nav a:link, a:visited {
  background-color:#7bc48c;
  color: #292c33;
  font-family: MicroJournal;
  font-size: 1rem;
  text-decoration: none;
  justify-content: center;
  text-indent: 1ch;
  margin:0.3ch 0;
  width: 10ch;
  transition: 0.5s;
  }
nav a:hover, a:active {
  background-color: #1dcb7b; 
  width: 12ch;
}
footer {
  color:#259a7f;
  font-family: MicroJournal;
  justify-self: center;
  position: fixed;
  bottom: 4%;
  left: 0;
  right: 0;
  }