/* FONT FACES */

/* Goudy Old Style */
  /* Regular */
@font-face {
  font-family: "GoudyOldStyle";
  src: url("../GOUDOS.woff2") format("woff2"),
       url("../GOUDOS.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "GoudyOldStyle";
  src: url("../GOUDOSB.woff2") format("woff2"),
       url("../GOUDOSB.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: "GoudyOldStyle";
  src: url("../GOUDOSI.woff2") format("woff2"),
       url("../GOUDOSI.TTF") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* Helvetica */
  /* Regular */
@font-face {
  font-family: "Helvetica";
  src: url("../Helvetica.woff2") format("woff2"),
       url("../Helvetica.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "Helvetica";
  src: url("../Helvetica-Bold.woff2") format("woff2"),
       url("../Helvetical-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* BODY FORMATTING */
body {
  background-image: url(PrintAd.jpg);
  background-color: #F3F2ED;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #333130;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
}




/* TEXT FORMATTING */
h1 {
  font-family: Helvetica, Arial, sans-serif;
}
h2 {
  font-family: Helvetica, Arial, sans-serif;
}
h3 {
  font-family: Helvetica, Arial, sans-serif;
}

p {
  font-family: GoudyOldStyle, serif;
  font-size: clamp(18px, 2.2vw, 25px);
}

  .Sans {
    font-family: Helvetica, sans-serif;
  }
  
  .SmallText {
    font-family: Helvetica, sans-serif;
    font-size: clamp(12px, 2vw, 14px);
  }


/* LINK FORMATTING */
/* unvisited link */
a:link {
  color: #333130;
}

/* visited link */
a:visited {
  color: black;
}

/* mouse over link */
a:hover {
  color: #854D23;
}

/* selected link */
a:active {
  color: #854D23;
}


/* NAVIGATION BAR */
/* Menu full section background color */
#Menu {
  background-color: #854D23;
  display: flex;
  justify-content: center;
}

/* TopNav Element */
.topnav {
  background-color: #EDEDE5;
  display: flex;
  justify-content: center;
  align-items: center;

  width: 80%;
  border: 4px solid #854D23;
  border-radius: 20px;
  
  flex-wrap: wrap;       /* allow links to move to next line */
  gap: 0px;
}

.topnav a {
  color: #854D23;
  text-align: center;
  padding: 0.4em 1em;
  text-decoration: none;
  font-size: clamp(14px, 1.5vw, 22px);
  font-weight: bold;
}

.topnav a:hover {
  background-color: #C49242;
  color: #EDEDE5;
}

.topnav .active {
  background-color: #A96736;
  color: #EDEDE5;
}


/* PAGE TITLE AND DESCRIPTION */
#Title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  width: 70%;
  margin: auto;
  margin-top: 20px;
  padding: 3%;
  
  background-image: url(../Paper.jpg);
  background-color: #EDEDE5;
  background-size: cover;
  background-position: center;
}

#Title h1 {
  margin: 5px;
  padding: 0;
}

#Title p {
  margin: 0;
  padding: 0;
}

/* MOBILE LAYOUT */
@media (max-width: 700px) {
  #Title {
   width: 90%;
   margin: auto;
   margin-top: 20px;
   text-align: center;
  }
}


/* BACK BUTTON */
.Button {
  color: #333130;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #333130;
  border-radius: 30px;
  padding: 8px 14px;

  transition: background-color 0.2s ease;
}

.Button:hover {
  background-color: rgba(51, 49, 48, 0.2);
  color: #333130;
}


/* PORTFOLIO PAGE BUTTONS */
#Content {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.category {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 80%;

  flex-wrap: wrap;
  gap: 20px;
}

.category a {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  
  background-color: #EDEDE5;
  border: 4px solid #EDEDED;
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  text-align: center;
  width: 400px;
  height: 200px;
  
  color: #EDEDE5;
  -webkit-text-stroke: 2px #23221D;
  
  text-decoration: none;
  font-size: clamp(25px, 3.2vw, 46px);
  font-weight: bold;
}

.category a:hover {
  background-size: 110%;
  font-size: clamp(30px, 3.5vw, 50px);
}


/* LINKS TO ARTWORK */
.item {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 80%;

  flex-wrap: wrap;
  gap: 20px;
}

.item a {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  
  background-color: #EDEDE5;
  border: 4px solid #EDEDED;
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  text-align: center;
  width: 300px;
  height: 300px;
}

.item a:hover {
  background-size: 110%;
}


/* ART IMAGE DECORATION */
#Art img {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 60%;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  
  border: 20px solid #EDEDED;
  background-image: url(../Paper.jpg);
  background-color: #EDEDE5;
  background-size: cover;
  background-position: center;
  
}

/* MOBILE LAYOUT */
@media (max-width: 700px) {
  #Art img {
   width: 70%;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
  }
}


footer {
  background-color: #854D23;
  color: #EDEDE5;
  padding-top: 1px;
  padding-bottom: 1px;
  margin: 0;
}