/* 1em is about 16 px generally. 1em is the current font size  https://www.w3schools.com/css/css_font_size.asp */
/* 1vw is 1% of the viewport width */

/* Stlye of the background */
body {
  background-color: lightblue;
  margin: 0vw;
  text-align: center;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  justify-items: center;
}

/* Style of the top bar*/
h1 {
	color: lightgray;
	font-size:max(3em, 5vw);
	font-family: "Times New Roman", Helvetica, sans-serif;
	text-align: center;
	background-color: rgba(0, 80, 0, 1);
	padding-top: 1vw;
	padding-bottom: 1vw;
	margin: 0 auto;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(100vw - 12px);  */    
	max-width: 1366px;
	margin: 0 auto;
	border-style: solid;
	border-width: 3px 6px;
	border-color: black;
}

/* Style for the main logo */
.logo {
	background-color: rgba(0, 80, 0, 1);
	vertical-align: middle;
	margin-bottom: 1%;
}

/* Style for the area surrounding the green link boxes */
.link-container {
	display: grid;                              
	grid-template-columns: auto auto auto;    
	gap: 1vw;                            /*The space between the grid items*/    
	background-color: rgba(120, 180, 100, 1);  	/* */
	margin-top: 0;
	padding: 2vw;                        /*The space surrounding the grid items*/
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(96vw - 12px);  */    
	max-width: 1366px; /*calc(1366px - 4vw);*/
	border-style: solid;
	border-width: 3px 6px;
	border-color: black;
}

/* settings to make sure the link container stays centered even after reaching it maximum width */
.centered {
	display: grid;
	justify-items: center;
}

/*Settings for the green link boxes themselves */
.link-container > div {
	background-color: rgba(0, 80, 0, 1);     
	text-align: center;                       
	padding: 1vw 0;                            /*Padding above/below the text and to the sides of the text. Not strictly just pixels though it don't seem.https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_lines */
	font-size: 3.6vw;
	color: lightgray;
	border: 2px solid black;
}

/*Settings for individiual boxes would be done this way
.link_box1 {
	color:lightgray;
	text-align: center;
}*/

/* Settings for how links (anything in the <a></a> tags) inside each box will look */
.link_box > a {
	color: lightgray;
	text-align: center;
}

/*.link_box2 > a {
	color: lightgray;
	padding-left: 1em;
	padding-right: 1em;
}

.link_box3 > a {
	color: lightgray;
	padding-left: 1em;
	padding-right: 1em;
}

.link_box4 > a {
	color: lightgray;
	padding-left: 1em;
	padding-right: 1em;
}*/

/* Defailt style settings for links */
a {
	text-decoration: none;
	color: white;
	font-size: 1.25em;
	font-family: Helvetica, sans-serif;
}

/* Style class for things that need to be centered once they reach their max width, but have a smaller max width than the normal one and need colored padding */
.collage {
	display: grid;
	justify-items: center;
	background-color: rgba(0, 80, 0, 1);
	/*width: min(1366px, 100vw); */
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(100vw - 12px);  */    
	max-width: 1366px;
	margin: auto;
	border-style: solid;
	border-width: 3px 6px;
	border-color: black;
}

/* For responsively sizing the large image on the page - https://www.w3schools.com/howto/howto_css_image_responsive.asp */
.responsive {
	width: 100%;
	height: auto;
}

/* Default style settings for pictures */
img {
	vertical-align:bottom;
	max-width: 1080px;
}

/* Style for the headers on the page indicating main style sections */

div {
	margin:auto;
}


h2 {
	color: lightgray;
	font-size:2em;
	font-family: "Times New Roman", calibri;
	text-align: left;
	text-indent: 0vw;
	background-color: rgba(0, 80, 0, 1);
	padding-top: 1vw;
	padding-bottom: 1vw;
	padding-left: 3vw;
	padding-right: 0;
	/*margin-top: 1vw;
	margin-bottom: 1vw;
	margin-left: 3vw;
	margin-right: 3vw;*/
	/*--h2width: (calc(1378px - 100vw) - abs(calc(1378px - 100vw));
	transform: translate(max(7px, var(--h2width), 0px));
	/*transform: translate(max(7px, (calc(1378px - 100vw) - abs(calc(1378px - 100vw)))));*/
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(97vw - 12px);  */    
	max-width: 1366px; /*calc(1366px - 3vw);*/
	margin: 0 auto;
	border-style: solid;
	border-width: 3px 6px;
	border-color: black;
}

/* Style for the content in the main content sections of the page */
p {
	color: black;
	font-size: 1.5em;
	font-family: calibri, Helvetica, sans-serif;
	background-color: rgba(120, 180, 100, 1);
	padding: 1vw 5vw;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(90vw - 12px);  */    
	max-width: 1366px; /*calc(1366px - 10vw);*/
	margin: 0 auto;
	border-style: solid;
	border-width: 3px 6px;
	border-color: black;
	text-align: left;
}

/* Styling for the sources dropdown in the breed description section */
/* This is supposed to make the button go darker if when the user hovers over it. It is not apparently working */
.source-dropdown-buttton:hover .source-dropdown-buttton:focus {
	background-color: rgba(0, 80, 0, 1);
}

/* Styling for the container of the source dropdown button, what is seen when the drodown is not down */
.source-dropdown {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width:100vw;
	max-width: 1366px;
}
	
/* Styling of the source dropdown, what is contained in it */
.source-dropdown-content {
	display: none;
	position: relative;
	background-color: rgba(120, 180, 100, 1);
	min-width: 160px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(94vw - 12px);  */    
	max-width: 1366px; /*calc(1366px - 6vw);*/
	overflow:auto;
	padding: 3vw;
	z-index: 1;
	border-style: solid;
	border-width: 3px 6px;
	border-color: black;
	margin-bottom: -1vw;
	/*transform: translate(min(7px, calc(1366px - 100vw)), 0px);*/
}

/* how the source-dropdown modifies the behavior of p, which is the text used within it */
.source-dropdown > p {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(90vw - 12px);  */    
	max-width: 1366px; /*calc(1366px - 3vw);*/
	/*transform: translate(7px, 0px);*/
}

/* Style settings for the button to open/close the source dropdown */
.source-dropdown-buttton {
	background-color: rgba(0, 120, 0, 1);
	color: white;
	padding: 2vw;
	font-size: 1.5em;
	border: 2px solid black;
	cursor: pointer;
	width: 50%;
}

/* Style settings for how buttons within the paragraph tags will behave - used for the source dropdown button */
p > button {
	font-size: 1em; 
	text-decoration: none;
	background-color: rgba(0, 120, 0, 1);
	color: white;
	padding: 1vw;
	border: 2px solid black;
	cursor: pointer;
	width: auto;
	margin: 3% auto;
}

/* Style class for making the block show up */
.show {display: block;}

/* Style for the writing within the dropdown itself */
p4 {
	width: 80%;
	margin: 10% auto;
	line-height: 1.6;
	font-family: calibri, Helvetica, sans-serif;
	font-size: 1.25em;
	color:black;
}

/* how the style for the writing within the dropdown itself works on the style for links */
p4 > a {
	color:blue;
	font-size: 1em;
	font-family: calibri, Helvetica, sans-serif;
	text-decoration: underline;
	word-wrap: break-word;
}

/*Settings for whole grid that has the pictures of the puppies available now */
.grid-container {
	display: grid;                              /* */
	grid-template-columns: auto auto;  
	grid-auto-flow: dense;
	gap: 1vw;                            /*The space between the grid items*/    
	background-color: rgba(120, 100, 50, 1);  	/* */
	margin-top: 0;
	padding: 1vw;                           /*The space surrounding the grid items*/
	max-width: 1080px;
	align-content: center;
}
/*Settings for how the grid container works on the div elements within it. This thus determines the style of the things put in the boxes of the grid. Each div goes in one box. */
.grid-container > div {
	background-color: rgba(0, 80, 0, 1);              /* */
	text-align: center;                        /* */
	padding: 0 0;                            /*Padding above/below the text and to the sides of the text. Not strictly just pixels though it don't seem.https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_lines */
	font-size: 1.5em;
	color: white;
	padding-left: 0;
	padding-bottom: 0;
	align-content: center;
}
/* Style for the pictures of puppies that go in the available puppies location */
.puppy-pic {
	position: relative;
	width: 100%;
}

/* Style for how being a puppy pic changes the image display to make it fit nicely in the grid boxes */
.puppy-pic > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;
	color: black;
}

/* Style settings for the puppy names on front of the images in the grid in the Available Puppies section */
h3 {
	position:absolute;
	color: black;
	font-size:2.5vw;
	font-family: Helvetica, sans-serif;
	background-color: rgba(120, 180, 100, 1);
	align-self: none;
	bottom: -3vw;
	padding-right: 0;
	padding-left: 0;
	padding-top: 1vw;
	padding-bottom: 1vw;
	left: 0;
	width:calc(100% - 3px);
	border-style: solid;
	border-width: 2px;
	border-color: black;
}

/* Style settings for how the buttons to access the modals (which are also the puppy pictures in the available puppies section) will look */
button {
	padding: 0;
	margin: 0;
	background-color: black;
	background: none;
	outline: none;
	border: none;
	cursor: pointer;
}

/* Modal Background - Style settings for the bckground of the popup that appears when you click on a puppy - background being the stuff outside the visible box*/
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px;
	padding-bottom: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto; /* Enable scroll */
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.6);
}
/* Modal Content Box - Style settings for the box of information that you see when you click on a puppy*/
.modal-content {
	background-color: rgba(210, 180, 120, 1);
	margin: auto;
	margin-bottom: 15%;
	padding: 0px;
	border: 2px solid #888;
	width: 80%;
	max-width: 1080px;
}

/* Style settings for the header bar that goes atop the informative box that shows when you click on a puppy */
h4 {
	color: white;
	font-size:2em;
	font-family: "Times New Roman", calibri, Helvetica, sans-serif;
	font-style: italic;
	text-align: center;
	background-color: rgba(0, 120, 0, 1);
	padding-top: 1vw;
	padding-bottom: 1vw;
	padding-left: 3vw;
	padding-right: 0;
	width: calc(100% - 3vw);      
	max-width: calc(1366px - 3vw);
	margin: 0 auto 2% auto;
	border-style: solid;
	border-color: #888;
	border-width: 1px 1px 3px 1px;
}

/* Style settings for the main body of text used inside the informative boax about a certain puppy */
p1 {
	color: white;
	font-size: 1.5em;
	font-family: calibri, Helvetica, sans-serif;
	padding: 2vw 1vw;
	margin: auto auto;
	line-height: 1.6;
}
	
/* Style settings for the price display used inside the popup box that talks about a particular puppy */
p3 {
	color: black;
	font-size: 1.5em;
	font-family: calibri, Helvetica, sans-serif;
	padding: 2vw 2vw 0 2vw;
	margin: auto auto;
	line-height: 1.6;
}

/* Style settings for the footer that goes accross the bottom of the box talking about a particular puppy */
footer1 {
	display: block;
	color: white;
	font-size:1.25em;
	font-family: calibri, Helvetica, sans-serif;
	text-align: center;
	background-color: rgba(0, 120, 0, 1);
	width: 100%;
	padding-bottom: 1%;
	margin: 2% auto 0 auto;
	border-style: solid;
	border-color: #888;
	border-width: 3px 1px 1px 1px;
	line-height: 1.6;
}

/* Style settings for how links behave within that footer of the modal */
footer1 > a {
	color:white;
	font-size: 1em;
	font-family: calibri, Helvetica, sans-serif;
	background-color: rgba(0, 120, 0, 1);
	text-decoration: underline;
	word-wrap: break-word;
}

/* Style settings for the container of the main body of text in the modal talking about a particular pupppy */
.divmodal {
	word-wrap: break-word;
	width: 80%;
	margin: 0 auto 3vw auto;
	background-color: rgba(0, 120, 0, 1);/*rgba(120, 180, 100, 1); rgba(210, 180, 140);*/
	border-style: solid;
	border-color: black;
	border-width: 2px;
	padding: 0 2vw;
}

/* Style settings for how the puppy's picture will be shown inside the boax talking about the puppy */
.modal-pic {
	width: 50%;
	height: auto;
	max-width: 25vw;
	border-style: solid;
	border-color: rgba(100, 80, 30, 1);
	border-width: 3vw;
}

/* Style settings for the modal close button */
.close {
	color: white;
	float: right;
	font-size: 2em;
	font-weight: bold;
}

/* Style settings for making the modal close button (the little x shown) go dark when hovered over */
.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* Style settings for the button linking to the page with additional puppy pictures */
.puppy-pic-button {
	background-color: rgba(120, 100, 50);
	border-style: solid;
	border-color: black;
	border-width: 0;
	width: 100%;
	max-width: calc(1080px + 2vw);
	padding: 3.5vw 0 2.5vw 0;
}

/* Style settings for the text of the button linking to the page with additional puppy pictures */
p5 {
	color: white;
	background-color: rgba(0, 120, 0, 1);
	font-size: min(3vw, 1.5em);
	border: 2px solid black;
	padding: 1.5vw;
}

/* Style settings for how links within the additional puppy pictures button will behave */
p5 > a {
	text-decoration: none;
	color: white;
}

/* Style settings for the container of the bios. In small devices it gets only one column */
.bio-container {
	display: grid;                           
	grid-template-columns: auto;  
	grid-auto-flow: row;
	gap: 2vw;                              
	background-color: rgba(120, 180, 100, 1);  
	margin: 0 auto;
	padding: 2vw;     
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(96vw - 12px);  */    
	max-width: 1366px; /*calc(1366px - 4vw);*/
	/*transform: translate(7px, 0px);*/
	border-style: solid;
	border-width: 3px 6px;
	border-color: black;
}

/*Settings for the content of the Parent Bio section*/
.bio-container > div {
	background-color: rgba(210, 180, 120, 1);              /* rgba(210, 180, 140, 1);*/
	text-align: center;                        /* */
	padding: 0 0;                            /*Padding above/below the text and to the sides of the text. Not strictly just pixels though it don't seem.https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_lines */
	color: white;
	padding-left: 0;
	padding-bottom: 0;
	align-content: flex-start;
	border-style: solid;
	border-width: 3px;
	border-color: black;
}

/* Class for Tanto's biography and how it appears */
.tanto-bio {
	position: relative;
	width: 100%;
	margin-top: 0;
}

/* Style settings for how images in Tanto's bio appear */
.tanto-bio > img {
	width: 75%;
	height: auto;
	border-style: solid;
	border-color: rgba(100, 80, 30, 1);
	border-width: 3vw;
	margin-top: 2vw;
}

/* Class for Bandit's biography and how it appears */
.bandit-bio {
	position:relative;
	width: 100%
}

/* Style settings for how images in Bandit's bio appear */
.bandit-bio > img {
	width: 50%;
	height: auto;
	border-style: solid;
	border-color: rgba(100, 80, 30, 1);
	border-width: 3vw;
	margin-top: 2vw;
}

/* Style settings for the main word content of the parent bios */
p2 {
	color: white;
	font-size: max(1.5em, 2vw);
	font-family: calibri, Helvetica, sans-serif;
	margin: auto auto;
	line-height: 1.6;
	text-indent: 4em;
}

/* Style settings for the container that the main word content of the parent bios is contained in */
.divbio {
	word-wrap: break-word;
	width: 80%;
	margin: 2vw auto 3vw auto;
	background-color: rgba(0, 120, 0, 1);/*rgba(120, 180, 100, 1);*/
	border-style: solid;
	border-color: black;
	border-width: 2px;
	padding: 0 2vw;
}

/* Style settings for the names of the dogs featured in the parent bios */
h5 {
	color: white;
	font-size:2em;
	font-family: "Times New Roman", calibri, Helvetica, sans-serif;
	font-style: italic;
	text-align: center;
	background-color: rgba(0, 120, 0, 1);
	padding-top: 1vw;
	padding-bottom: 1vw;
	padding-left: 3vw;
	padding-right: 0;
	width: calc(100% - 3vw);      
	max-width: calc(1366px - 3vw);
	margin: 0 auto 2% auto;
	border-style: solid;
	border-color: black;
	border-width: 0 0 3px 0;
}

/* Style settings for the footer at the bottom of the webpage */
footer {
	color: lightgray;
	font-size: 1.25em;
	font-family: calibri, Helvetica, sans-serif;
	background-color: rgba(0, 80, 0, 1);
	padding-top: 1vw;
	padding-bottom: 5vw;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(100vw - 12px);  */    
	max-width: 1366px;
	margin: 0 auto;
	border-style: solid;
	border-width: 3px 6px;
	border-color: black;
}

/* Style settings for how links in the footer at the bottom of the webpage are to behave */
footer > a {
	color:lightgray;
	font-size: 1em;
	font-family: calibri, Helvetica, sans-serif;
	background-color: rgba(0, 80, 0, 1);
	text-decoration: underline;
}

/* Style settings for the signature at the bottom of the About Us section of the website */
.paragraph {
	color: black;
	font-size: 1.5em;
	font-family: calibri, Helvetica, sans-serif;
	background-color: rgba(120, 180, 100, 1);
	padding: 1vw 5vw;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100vw;/*calc(90vw - 12px);  */    
	max-width: 1366px; /*calc(1366px - 10vw);*/
	margin: 0 auto;
	border-style: solid;
	border-width: 0 6px 3px 6px;
	border-color: black;
	text-align: center;
}

/* Style settings for the phone-number link in the footer of the website */
.phone-link {
	font-size: 1em;
}

/* Style settings for how the actual link part of the phone link will appear on small devices */	
.phone-link > a {
	color:lightgray;
	font-size: 1em;
	font-family: calibri, Helvetica, sans-serif;
	background-color: rgba(0, 80, 0, 1);
	text-decoration: underline;
	cursor: pointer;
}

p6 {
	position: absolute;
	color: white;
	font-size: min(3vw, 1.5em);
	bottom: 10vw;
	z-index: 1;
	font-family: calibri, Helvetica, sans-serif;
	padding: 1vw;
	left: 50%;
	transform: translate(-50%, 0);
	line-height: 1.6;
	width: 50vw;
	max-width: calc(683px - 5vw); 
	text-align: center;
	background-color: rgba(0, 120, 0, 1);
	border: 2px solid black;
}

p7 {
	position: absolute;
	color: rgba(0, 107, 36, 1);
	font-size: 2.5vw;/*min(5vw, 3em);*/
	bottom: 20%;
	z-index: 1;
	font-family: calibri, Helvetica, sans-serif;
	padding: 1vw;
	left: 50%;
	transform: translate(-50%, 0);
	line-height: 1;
	width: 60%;
	/*height: min(3vw, 1.5em);*/
	max-width: calc(683px - 5vw); 
	text-align: center;
	background-color: lightgray;/*rgba(0, 120, 0, 1);*/
	border: 2px solid black;
}

/* Style settings that are different for large devices (laptops/desktops, 660px and up) */
/* Default is for how it displays on small devices */
@media only screen and (min-width: 660px) {
	/* Bios shown side by side, not in a single column */
	.bio-container {
		grid-template-columns: auto auto;
	}
	
	/* Phone link is hidden */
	.phone-link > a {
		text-decoration: none;
		cursor: default;
	}
	
	/* One additional column in the available puppies grid */
	.grid-container {
		grid-template-columns: auto auto auto;
	}
	
	/* Link font is made smaller */
	.link-container > div {
		font-size: min(2vw, 1.4em);
	}
	
	.link_box > a {
		padding-left: 1em;
		padding-right: 1em;
	}
}