@font-face {
  font-family: "Noto Serif Bold";
  src: url("NotoSerif-Bold.ttf");
} 

@font-face {
  font-family: "Noto Serif";
  src: url("NotoSerif-Regular.ttf");
} 

@font-face {
  font-family: "Josefin Sans";
  src: url("JosefinSans-Regular.ttf");
} 

:root {
  --white: #FDEBD1;
  --gold: #F9B42E;
  --gold-dark: #ED8F23;
  --brown: #8A3B0E;
  --black:#1B0602;

  --shadow: 2px 2px 0px #541C04;
  }
.header{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 24px 64px;
  gap: 48px;
  align-self: stretch;

  background: #F2D3B0;
  border: 2px solid #F3CD96;
  box-shadow: inset 0px -27px 40px rgba(115, 58, 5, 0.02);
}
.nav{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 0px;
  margin: 0;
  align-self: stretch;
  
  position: -webkit-sticky;
	position: sticky;
  top: 0;

  background: url(img/pattern.png), var(--white);
  border: 2px solid #F3CD96;
  box-shadow: 0px 0px 120px rgba(115, 58, 5, 0.25);
}

.nav li{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 32px;

  font-family: "Noto Serif";
  font-size: 20px;
  color: var(--black);
  background: rgba(255, 255, 255, 0.01);
}

li a{  color: var(--black) !important;
text-decoration: none;}

.nav li a:hover{color: var(--brown) !important; text-decoration: underline;}

.selected{
background: rgba(138, 59, 14, 0.03);
border-bottom: 4px solid var(--gold);
box-shadow: inset 0px 0px 6px rgba(115, 58, 5, 0.28);
}

.selected a{color: var(--brown) !important; text-decoration: underline;}

.vl{
  height: 100%;
  width: 1px;

  background: #F3CD96;
}

body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: url(img/texture.png), var(--white);
  background-blend-mode: overlay, normal;
  gap: 0;
  margin: 0px;
  padding: 0px;
}

.content img{
  border: 4px solid var(--gold-dark);  
  box-sizing: border-box;
  object-fit: cover;
}

.content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  align-self: center;
  width: 890px;
  gap: 24px;
}

.section{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  align-self: stretch;
}

.section.small{
  gap: 8px;
}

.section.fill{
  flex-grow: 1;
}

.content.two_columns{
  flex-direction: row;
}

.hr{
  height: 4px;
  width: 100%;

  background: var(--gold-dark);
}

.header .hr{
  box-shadow: var(--shadow);
}

.vr{
  height: 100%;
  width: 4px;

  background: var(--gold-dark);
  box-shadow: var(--shadow);
}

.horiz{
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.horiz.menus{
  flex-wrap: wrap;
  justify-content: center;
  align-self: stretch;
}

input, textarea{
  background: rgba(138, 59, 14, 0.03);
  border: 1px solid #F2D3B0;
  box-shadow: inset 0px -2px 0px #3E1508, inset 0px 2px 6px rgba(115, 58, 5, 0.1);
  font-family: 'Josefin Sans';
  font-size: 19px;
  padding: 12px 8px;
  align-self: stretch;
  
  color: (--black);
}

textarea{
  height: 12em;
}

input::placeholder, textarea::placeholder{
  color:#A15D33;
}

button{
  background: var(--gold);
  border: 1px solid var(--white);
  box-shadow: 0px 4px 8px rgba(115, 58, 5, 0.2), inset 0px -2px 0px rgba(84, 28, 4, 0.2);
  font-family: 'Josefin Sans';
  font-size: 19px;
  padding: 12px 8px;
  
  color: (--black);
}

button:hover{
  box-shadow: 0px 4px 8px rgba(115, 58, 5, 0.4), inset 0px -2px 0px rgba(84, 28, 4, 0.2);
}

button:focus{
  background: var(--gold-dark);
}

/*Fonts*/
.section-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  align-self: stretch;
}



h1{
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 54px;
  margin:0;
  text-shadow: var(--shadow);

  font-family: 'Noto Serif Bold';
  color: var(--gold-dark);
}

h1.pgtitle{
  font-size: 64px;
}

h2{
  font-style: normal;
  font-weight: normal;
  font-size: 28px;
  line-height: 110%;
  margin:0;

  font-family: 'Noto Serif';
  color: var(--brown);
}

p{
  font-size: 19px;
  line-height: 120%;
  margin:0;

  font-family: "Josefin Sans";
  color: var(--black);
}