/*this is to organize the layout of page*/
.flex-container {/* Requirement-2.C */
	display: grid;/* Requirement-2.12 */
  grid-template-columns: auto auto;
  gap: 100px;/* Requirement-2.9 */
	padding: 5px;/* Requirement-2.6 */
	justify-content: center;
	z-index:5;/* Requirement-2.17 */
}
/*all the div to make a grid*/
.flex-container > div {
	background-color: #f1f1f186;/* Requirement-2.4 */
	border:5px solid whitesmoke;/* Requirement-2.5 */
	text-align: center;/* Requirement-2.2 */
	margin: 10px;
}
/*this is to organize the layout of page*/
#flex-container1 {/* Requirement-2.D */
	display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
	padding: 5px;
	background-color: #c7f7cfb3;
	border:5px solid whitesmoke;
	text-align: center;
	margin: 10px;
	margin-top: 100px;
	margin-bottom: 100px;
}
/*this is teh grid that organizes page and how to seperate the columns*/
#flex-container2 {
	display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
	padding: 5px;
	background-color: #c7f7cfb3;
	border:5px solid whitesmoke;
	text-align: center;
	margin: 10px;
	margin-top: 100px;
	margin-bottom: 100px;
}
/*conatiner for the pictures that are song album covers*/
.piccontainer {
  position: relative; /* Requirement-2.15 */
  width: 50%;/* Requirement-2.10 */
	margin-left:auto;
	margin-right: auto;
}

/*this is an id for formating fav songs*/
#songpic{
	display: block;
	width:100%;
	height:60%;/* Requirement-2.7*/
}

/*this overlays the pic with a type of card that shows what kind of fav song it is*/
.picoverlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #a9a9a981;
  overflow: hidden;/* Requirement-2.14 */
  width: 0;
  height: 100%;
  transition: .5s ease;
}

/*when you hover the mouse overtop it shows the card*/
.piccontainer:hover .picoverlay {/* Requirement-2.E */
  width: 100%;
  left: 0;
}

/*This is the text that on top of the card that labels what kind of song*/
.pictext {
  color: rgb(255, 255, 255);/* Requirement-2.3 */
  font-size: 20px;/* Requirement-2.1 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/*This is a logo I made for myself that will be on the top corner of screen*/
.logo {
  position:absolute;
  left: 8px;
  top: 29px;
  z-index: 1;
}

/*This is the border formatting for the table*/
table, th, td {/* Requirement-2.B */
  border: 3px solid rgb(41, 41, 41);
}

/*This the formatting for the table of favs*/
table {
	background-color: #ffffff68;
  width: 50%;
	border-collapse: collapse;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/*this is the text for the summary*/
p.summary {
	font-family:"New Century Schoolbook";
  font-size: 10px;
  font-weight: bold;
	text-align: left;
  
}

/*This makes a fancy box for the summary and details*/
/* Requirement-2.G */
/* Requirement-2.H */
details > summary {
  padding: 4px;
  width: auto;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

/*This makes it so the fancy fromatting stays when you click summary arrow*/
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}

/*This is the background bullet points*/
ul.bullets{
	list-style-type:none;/* Requirement-2.8 */
	margin:0;
	padding:0;
}
/*This adjusting the text in the bullets*/
.bullets{
	text-align: left;
	color: rgb(105, 56, 149);
	text-shadow:1px 1px rgb(167, 149, 184);
	font-size:20px;
	
}

/*These are the headings on homepage for background and meet the family*/
/*learn more abt me h2 on interest page*/
.head2{
	font-weight: 30;
	font-family:Copperplate, Papyrus, fantasy;
	font-size: 25px;
	color:rgb(22, 82, 150);
	text-align:center;
	background-color: rgba(245, 245, 245, 0.533);
	padding-top:10px;
	padding-bottom:10px;
	padding-left:20px;
	padding-right:20px;
	visibility: visible;/* Requirement-2.16 */
}

/*labels for the different family types*/
.famtype{
	font-weight: 5;
	border-style: ridge;
	border-bottom:thin;
	border:2px solid rgb(64, 63, 63);
	font-family:Rockwell;
	font-size: 20px;
	color:rgb(22, 125, 138);
	text-align:left;
	background-color: rgba(206, 180, 240, 0.533);
	padding-top: 5px;
  padding-right:0%;
  padding-bottom: 5px;
  padding-left: 5px;
}

/*all the captions for the pictures CONT HERE!*/
.caps{
	font-family: 'Times New Roman', Times, serif;
	font-size: 15px;
	font-style:normal;
	font-weight: 100;
	color: rgb(77, 58, 71);
	text-shadow: 1px 1px 1px rgb(71, 145, 248);
}

/*direct links to go the interest pages that point you toward my other webpages*/
/*this how the link will appear*/
a.hobdir{
	font-size: 20px;
  font-weight: bold;
	color:rgb(85, 68, 174);
}
/*this when you hover your mouse on the word hobbies link*/
a.hobdir:hover{
	color:rgba(91, 72, 186, 0.357);
	text-shadow: 2px 2px 2px rgb(18, 59, 223);
}
/*what it would like if you visited the sight already*/
a.hobdir:visited{
	color:rgb(83, 0, 128);
}

/*this the naviagtion functions*/
.topnav{
	overflow: hidden;
	background-color: rgba(78, 78, 194, 0.801);
  height: 18px;
}

/* shows the active page and what page your cureently on being a different color*/
.topnav a {
	float:none;/* Requirement-2.11 */
	color: #ffffff;
  text-align: center;
  padding: 25px 35px;
  text-decoration:wavy;
}
/*the color changes when you are curently on that page of the site*/
.topnav a.active {
  background-color: #2f82be;
}
/*when your mouse is hovering over the links on navigation*/
.topnav a:hover {
  background-color: #a059c686;
  color: rgb(14, 212, 202);
}


/*Main header on the homepage of website*/
/*main header for interest page*/
.homehead h1{/* Requirement-2.A */
	font-weight: 5;
	font-family:Copperplate, Papyrus, fantasy;
	color:white;
	font-size: 30px;
	text-align: center;
	background-color: rgba(22, 82, 150, 0.376);
	padding:30px;
}

/*footer telling who the website was made from*/
p.author{
	font-weight: 15;
	font-family:'Brush Script MT', cursive;
	color: rgba(24, 55, 181, 0.81);
	text-shadow: 1px 1px 1px rgba(24, 55, 181, 0.81);
}

/*link for hobbies and formatting it*/
a.direct:link{
	font-size: 15px;
	font-family:"American Typewriter, serif";
  font-weight: bold;
	color:rgb(85, 68, 174);
	text-decoration: none;
}
/*this when you hover your mouse on the word hobbies link*/
a.direct:hover{
	color:rgba(91, 72, 186, 0.357);
	text-shadow: 2px 1px 1px rgb(18, 59, 223);
	text-decoration: none;
}
/*what it would like if you visited the sight already*/
a.direct:visited{
	color:rgb(87, 49, 157);
}

/*this helps with organize the background section on the right side*/
#column {
  flex: 50%;
  padding: 10px;
}
/*does the row for the "background" section*/
#row {
	display :flex;
}
/*does the after the row for the "background" section*/
#row:after {
	padding-top: 500px;
}

/*formatting for the footer at bottome of page*/
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/*Formatting for the header of my poem*/
.poem h3{
font-family:"Brush Script MT, Brush Script Std, cursive";
color:rgb(52, 155, 157);
font-size: 30px;
text-align: left;

}

/*Formatting for the poem and how it will be on screen*/
.poem{
	text-align: center;
	overflow: auto;
	clear:both;/* Requirement-2.13 */
}