/* Styles for holding page */

/* variables */
:root {
 --springgreen: #ECEBBD;
 --onyx: #353935;

}

@font-face {
    font-family: 'PT SansRegular Webfont';
    src: url('fonts/ptsans_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
  font-family: 'PT SansRegular Webfont', Arial, sans-serif;
  font-size: 16px;
  background-color: var(--springgreen);
  color: var(--onyx);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

a {
  text-decoration: none;
  color: #51414F;

}

ul {
  padding-left: 0;
  list-style: none;

}

header, main, footer {
  max-width: 1080px;
  margin: auto;
  padding: 0 5px;
  text-align: center;

}

img.hero {
  display: block;
  width: 100%;
  border: solid 2px teal;
  border-radius: 10px;
  box-shadow: 0px 3px 8px 0px rgb(0 0 0 / 30%);

}

.socials {
  margin: auto;
  width: 64px;

}

.socials-container {
  padding: 2px;

}

.socials img {
  display: block;
  width: 100%;

}

.socials p {
  font-size: 0.875em; /* 14px */
  margin-top: 10px;

}

/* Gallery samples */

.thumbnails {
	display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 5px 0 0;

}

.thumbnails li {
  flex: 1 0 261px; /* start with three per row */
  aspect-ratio: 350 / 270;
  max-width: 350px;
  margin: 10px 0;

}

.thumbnails figure.tile {
	margin: 0;

}

.thumbnails figure.tile img {
  border: solid 2px teal;
  border-radius: 10px;
  width: 100%;
  box-shadow: 0px 3px 8px 0px rgb(0 0 0 / 30%);

}