@charset "utf-8";

@font-face {
  font-family: "InterVar";
  src: url("fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}
/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 5
   Tutorial Case
   
   Author:   
   Date:     
   
   Filename: tf_styles1.css
   
   This file contains the layout styles used in the Trusted Friends
   home page.

*/



/* HTML and Body Styles */

html {
	background-color: black;
	color: rgb(58,255,0);
	font-family: "Papyrus", "Avantgarde", "TeX Gyre Adventor", URW Gothic L, sans-serif;
	font-size:12px
}

body {
	font: 16px "Papyrus", "Avantgarde", "TeX Gyre Adventor", URW Gothic L, sans-serif;
	margin:0;
}


.hero {
   background-image: 
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
    url("background1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  text-align: center;
  padding: 40px 0;
  text-shadow:
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}
/* Header and Navigation Styles */

header {
	color: #000000;
	text-align:center;
	padding: 15px;
	opacity: 0.98;
}

header > nav { 
border-bottom: 2px solid rgb(58,255,0);
}

header h1 {
	color: red;
}

nav ul li { letter-spacing: 0.5px; }

nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

nav li {
	display: inline-block;
	color: rgb(58,255,0);
	margin:10px 50px;
	outline:  1px solid;
	padding: 5px 30px;
}

nav a:link, nav a:visited {
	color: rgb(58,255,0);
	text-decoration: none;
}

nav a:hover {
	color: purple;
}
nav a:active { opacity: 0.7; }

/* Photos, figures, and figcaption */

.family-photo {
  width: 500px;
  height: auto;
  border-radius: 10px;
  margin: 10px;
}

.portfolio-img {
	width: 300px;
    height: auto;
    border-radius: 10px;
    margin: 10px;
}

.portfolio-gallery {
  display: flex;
  justify-content: center; 
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap; 
}

.portfolio-img:hover { transform: scale(1.05); }
figure:last-child .portfolio-img:hover { transform: rotate(-2deg);
}

figure:first-child .portfolio-img { filter: grayscale(20%); }
figure:last-child  .portfolio-img { filter: saturate(120%); }

figcaption {
	color: red;
}

figcaption.highlight { letter-spacing: 0.5px; }

/* Headings, Sections, and Paragraph Styles */

section {
	text-align: center;
}

section ul {
	list-style-type: square;
	list-style-position: inside;
	display: inline-block;
	text-align: left;
}

h2 {
	color: red;
}



p {
	text-align: center;
	display: block;
	padding: 50px 100px;
}



.highlight {
  color: rgb(255, 0, 255);
  text-transform: uppercase;
}


h1 {
	text-align: center;
	color: red;
}
/* Footer Styles */


footer {
	color: black;
	text-align:center;
	padding: 15px;
}

footer > nav {
	border-top: 2px solid rgb(58,255,0);
}

/* Print */

@media (max-width: 768px) {
  nav li { display: block; margin: 6px 0; }
  .family-photo, .portfolio-img { width: 90%; }
}

@media print {
  nav, footer, img { display: none !important; }
  body { color: rgb(0, 0, 0); background: rgb(255, 255, 255); font: 12pt Georgia, serif; }
}