@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --shadow-color: 0deg 0% 60%;
  --shadow-elevation-low:
    0.3px 0.3px 0.5px hsl(var(--shadow-color) / 0.34),
    0.5px 0.6px 0.9px -1.2px hsl(var(--shadow-color) / 0.34),
    1.1px 1.3px 1.9px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    0.3px 0.3px 0.5px hsl(var(--shadow-color) / 0.36),
    0.9px 1.1px 1.6px -0.8px hsl(var(--shadow-color) / 0.36),
    2.3px 2.8px 4.1px -1.7px hsl(var(--shadow-color) / 0.36),
    5.7px 6.7px 9.9px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high:
    0.3px 0.3px 0.5px hsl(var(--shadow-color) / 0.34),
    1.7px 2px 3px -0.4px hsl(var(--shadow-color) / 0.34),
    3.1px 3.7px 5.4px -0.7px hsl(var(--shadow-color) / 0.34),
    5.1px 6px 8.9px -1.1px hsl(var(--shadow-color) / 0.34),
    8.1px 9.6px 14.1px -1.4px hsl(var(--shadow-color) / 0.34),
    12.6px 15.1px 22.1px -1.8px hsl(var(--shadow-color) / 0.34),
    19.2px 22.9px 33.6px -2.1px hsl(var(--shadow-color) / 0.34),
    28.3px 33.7px 49.5px -2.5px hsl(var(--shadow-color) / 0.34);
}

* {
  box-sizing:border-box;
  background: #F3F3F3;
  font-family: 'Karla', sans-serif;
}

/* HEADER */
header h1{
  font-family: 'Philosopher', sans-serif;
  color: #1B1B1B;
  font-size: 3rem;
  text-align: center;
  padding-left: 150px;
  margin-bottom: 4px;
}
header p {
  color: #1B1B1B;
  font-size: 0.95rem;
  text-align: center;
}

/* NAV LOGO AND LINKS */
.links > li {
  display: inline;
  list-style: none;
}
.links > li > a {
   text-decoration: none;
   color: #1B1B1B;
}
.links > li > a:hover{
  color: #C67943;
  text-decoration: underline;
}
.links2 a {
  position: relative;
  top: -50px;
}
.links2 {
  float: right;
  padding-right: 30px;
}
.links1,  .links2 {
  word-spacing: 10px;
}

.logo{
  text-align: center;
  justify-content: center;
  display: flex;
  position: absolute;
  left: 50%;
  top: 3%;
  font-family: 'Philosopher', sans-serif;
  font-size: 1.5em;
  padding:1px;
}
.logo:hover{
  color: #C67943;
}

/* GALLERY */
.gallery {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 3fr));
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
}

figure img {
  width: 270px;
  height: 370px;
  border-radius: 8px;
  box-shadow: var(--shadow-elevation-high);
  cursor: pointer;
}

/* FOOTER */
footer{
  text-align: center;
  width: 100%;
  height: 80px;
  margin: 0;
  padding-top: 7px;
}
footer h3 {
  font-family: 'Philosopher', sans-serif;
  color: #1B1B1B;
}
footer h3 > p {
  display: inline;
  font-size: 0.95rem;
  font-family: 'Karla', sans-serif;
}
footer h3 > p > a{
  text-decoration: none;
  color: #C67943;
}
footer h3 > span {
  font-size: 0.75rem;
  font-family: 'Karla', sans-serif;
}