/* 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(16px, 2vw, 23px);
}

  .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;
  margin-bottom: 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;
  margin-bottom: clamp(10px, 1.5vw, 15px);
}

/* 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;
  /* offset-x | offset-y | blur-radius | color */
  text-shadow: 0px 0px 5px #FFFFFF, 0px 0px 15px #FFFFFF, 0px 0px 30px #FFFFFF,  0px 0px 50px #FFFFFF;   
    
  
  text-decoration: none;
  font-size: clamp(25px, 3.2vw, 46px);
  font-weight: bold;
}

.category a:hover {
  background-size: 110%;
  font-size: clamp(40px, 4.0vw, 60px);
}

/* GAME PAGE COLUMNS */

.columns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  width: 100%;
  gap: 20px;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 50%;
  text-align: center;
}


/* 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;
  
}





/* MINESWEEPER GAME */
table { border:4px solid black; border-collapse:collapse;}
	td { 
			border:1px solid black; 
			padding-left:10px; 
			padding-right:10px; 
			padding-top:5px; 
			padding-bottom:5px;
			
			position: relative;
		}
		/* Game Over Mine Background */
		.splode { background-color:red;}
		
		/* Game Win Mine Background */
		.won { background-color:lime;}
			
		
		/* Cover Buttons */
		.cover {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
		
		.mine {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}

		.cover.hidden {
			display: none;
		}
		
		.mine.hidden {
			display: none;
		}

		/* Number Colors */
		.digit-0 { color: transparent; }
		.digit-1 { color: blue; }
		.digit-2 { color: green; }
		.digit-3 { color: red; }
		.digit-4 { color: navy; }
		.digit-5 { color: brown; }
		.digit-6 { color: teal; }
		.digit-7 { color: black; }
		.digit-8 { color: gray; }
		
		
/* FURCADIA PATCHES */
.patches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  width: 100%;
}

.patch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;

  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 400px;

  background-color: #FFFFFF;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.3);

  padding: 25px;
  gap: 20px;
}

.patch img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  flex-shrink: 1;
  min-height: 0;
}

.patch h2 {
  margin: 0;
  padding: 0;
}



/* 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;
}