/* Fido's Freezzys Style Sheet - Written by Tegan Rohne */

/* These are important don't mess with these */
* {box-sizing: border-box;}

html {scroll-behavior: smooth;}

/* Font and font color that is used across the site consistently */
body {color: #303030;}

/* Heading font size */
h1 {text-align: center; font-size: 27.5pt; font-family: "Patua One"; letter-spacing: 2px;}

/* Subheading font size */
h2 {font-family: Verdana, sans-serif; text-align: center; font-size: 17.5pt; margin-bottom: 0;}

/* Paragraph font size and code to center align it */
p {font-family: Verdana, sans-serif; text-align: center; font-size: 13pt; margin-left: auto; margin-right: auto; width: 75%;}

/* Code specific to the paragraph text on the contact page */
.PContacts {
	text-align: center;
    font-size: 10.5pt;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding: 4px;
	width: 75%;
}

/* Code for the navigation bar. This took the longest. */
nav {overflow: hidden; background-color: #D1174F; height: 58px;}

nav a {
	float: left;
	color: #FFFFFF;
	font-family: Verdana, sans-serif; 
	text-align: center;
	padding: 21px 17px 20px 17px;
    text-decoration: none;
	font-size: 11.5pt;  
	transition-duration: 0.5s;
}

/* This is what makes the sections of the navigation bar change color when you hover over them. */
nav a:hover {background-color: #B01040; transition-duration: 0.5s;}

/* This is what makes the active page stay shaded in. */
nav a.active {background-color: #B01040; color: #FFFFFF;}

/* These are both code for the social media icons on the navigation bar. */
.NavRight {float: right;}

.Icon {height: 30px; width: 30px;}

/* Logo size settings on the About page */
.Logo {display: block; margin-left: auto; margin-right: auto; height: 22%; width: 22%;}

/* This is what makes the button look like a button */
.ToTop {
	padding: 9px;
	border-radius: 16px;
	background-color: #425393;
	color: #FFFFFF;
	margin: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
    font-size: 12pt;
	transition-duration: 0.5s;
    cursor: pointer;
	border: 3px solid #425393;
	font-family: Verdana, sans-serif;
}

/* This is what makes the button change color when you hover over it. */
.ToTop:hover {background-color: #6A8CC0; border: 3px solid #6A8CC0; transition-duration: 0.5s;}

/* Code for the images on the home page, since I put them in a table to organize them. */
.PhotoTable {margin-left: auto; margin-right: auto; width: 65%; padding: 0;}

.PhotoTable img{height: 375px; width: 285px;}

td.PhotoTable {padding: 10px;}

/* This is how I got those 3 dots on the contact page */
.Dots {display: block; margin-left: auto; margin-right: auto; margin-bottom: 0; height: 5%; width: 5%;}

/* Size for the picture on the contact page */
.ContactPic {display: block; margin-left: auto; margin-right: auto; height: 480px; width: 360px;}

/* Small text in the footer */
.End {text-align: center; font-size: 8pt;}

/* Code for the boxes of text with info on the ingredients. This was the fun part. */
table.IngredientInfo {margin-left: auto; margin-right: auto; border-spacing: 24px; width: 65%;}

.Yogurt {border: 4px solid #98EDED;}

.Banana {border: 4px solid #EBE48D;}

.PeanutButter {border: 4px solid #C9A173;}

.IngredientInfo td {padding: 12px; text-align: center; width: 33%; font-size: 12pt; font-family: Verdana, sans-serif;}

/* Code for a second table created just to organize pictures */
.PhotoTable2 {margin-left: auto; margin-right: auto; width: 65%; padding: 0; border-spacing: 28px;}

.PhotoTable2 img {height: 480px; width: 360px; margin-left: auto; margin-right: auto;}

.PhotoTable2 td {padding: 12px; text-align: center; font-weight: bold; font-size: 14pt; border: 4px solid #D1174F; font-family: Verdana, sans-serif;}

/* Boxes on the product page */
.ProductTable {margin-left: auto; margin-right: auto; width: 65%; border: 4px solid #425393;}

.ProductTable img {width: 201x; height: 301px; margin-left: auto; margin-right: auto;}

.ProductTable td {text-align: center; width: 50%; padding: 12px; font-family: Verdana, sans-serif;}

/* Heading for the text in the boxes on the product page */
.TableDataHeading {font-weight: bold; font-size: 14pt; font-family: Verdana, sans-serif;}

/* This is the code for the animation applied to the word new on the products page */
.New {font-size: 15.5pt; animation: NewText 1.6s infinite; font-family: Verdana, sans-serif;}

@keyframes NewText {
	0% {color: #D1174F;}
	
	50% {color: #FF306E;}
	
	100% {color: #D1174F;}
}

/* Turd on a spoon picture */
.YoSplash {display: block; margin-left: auto; margin-right: auto; width: 893px; height: 302px;}

/* I can't believe I had to do this. */
.LogoAndAd {margin-left: auto; margin-right: auto; border-spacing: 32px;}

.LogoAndAd img {height: 75%; width: 75%;}

/* Blue highlighter because I got bored and decided to randomly change something just for fun */
::selection {background-color: #81D5E5;}