* {
    box-sizing: border-box;
}
:root {
--col1: #fff;
--col2: #333;
--col3: #3399ff;
--col4: #f0f0f5;
--col5: #0066cc;
--col6: #ddd;
}

.largerText {
    font-size: larger;
}
.smallerText {
    font-size: smaller;
}


.productPageImage, .normalImageLeft {
    padding: 10px;
    width: 300px; 
    float: left;
}

.normalImageRight {
    padding: 10px;
    width: 300px; 
    float: right;  
}


.downloadButton a {
  
  color: var(--col1);
	display: inline-block;
	text-align: center;
	padding: 5px 10px 5px 10px;
	background-color: var(--col2);
	text-decoration: none;
	margin-right: 10px;
	font-size: 30px;
	border-radius: 5px;
}

.downloadButton a:hover {
	background-color: var(--col3);
	color: var(--col4);
	text-decoration: none;
} 

.buttonEtsy a {
  width: 100%;
  color: var(--col1);
	display: inline-block;
	text-align: center;
	padding: 10px 20px 10px 20px;
	background-color: var(--col5);
	text-decoration: none;
	margin-right: 10px;
	font-size: 30px;
	border-radius: 5px;
}

.buttonEtsy a:hover {
	background-color: var(--col3);
	color: var(--col4);
	text-decoration: none;
} 

.buttonEtsyProduct a { 
  
 	color: var(--col1);
	display: inline-block;
	text-align: center;
	padding: 10px 20px 10px 20px;
	background-color: var(--col5);
	text-decoration: none;
	margin-right: 10px;
	font-size: 30px;
	border-radius: 5px;
}

.buttonEtsyProduct a:hover {
	background-color: var(--col3);
	color: var(--col4);
	text-decoration: none;
} 

.comments {
  padding: 20px;	
  font-size: 16px;
  background-color: #eee;
  border: 1px #000 solid;
} 
/*-- BOX AROUND FREE DOWNLOADS -- */
.downloads {
  padding: 20px;	
  font-size: 16px;
  background-color: #ffffcc;
  border: 1px #000 solid;
  border-radius: 10px;
} 

#hiddenDIV {
  border: #800000 1px dashed;
  padding: 10px;
  display: none;
  background-color: #eee;
  border-radius: 10px;
}

table, tr, th {
  border: #333 1px solid;
  text-align: center;
}

table {
  width: 350px;
  border-collapse: collapse;
}

/* MAKE A DIV SIT UNDER ALWAYS */
.newLineCenter {
	float: left;
	clear:both;
	text-align:center;
	width: 100%;
}

/* ALL OTHER LINKS */
a {
    color: var(--col5);
    text-decoration: none;
}
a:hover {
    color: var(--col3);
	/*text-decoration: underline; */
}

body {
font-family: 'Quicksand', sans-serif;
font-size: larger;
margin: auto;
}

.container {
  margin: auto;
  max-width: 1200px;
  clear: both;
}

.content {
    max-width: 900px;
    float: left;
    padding: 20px;
    /* background-color: aqua; */
}

.sidebar {
    padding: 20px;
    /* background-color: #ddd; */
    width: 300px;
    float: left;
}

/* -- FOOTER -- */
footer {
    background-color: #333;
    color: var(--col1);
    padding: 10px;
    text-align: center;
    float: right;
    width: 100%;
    }
footer a {
    color: var(--col1);
    font-size: 20px;
    }
    
    footer a:hover {
    color: #ddd;
    }
#footTitle {
    color: var(--col1);
    font-size: 40px;
    
    }
    


/* --- SOCIAL MEDIA --- */
.fa {
  padding: 10px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
    opacity: 0.7;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}


.croc {
width: 100px;
border-radius: 30%;
}
/* NAVBAR SECTION */
.navBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--col1);
    color: var(--col2);
    font-size: 20px;
}
.brand-title {
    font-size: 30px;
    margin: .5rem
}
.navBar-links ul {
    margin: 0;
    padding: 0;
    display: flex;
}
.navBar-links li {
    list-style: none;
}
.navBar-links li a {
    text-decoration: none;
    color: var(--col2);
    padding: 1rem;
    display: block;
}
.navBar-links li:hover {
    background-color: var(--col4);

}
.toggle-button {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 30px;
    
}

.toggle-button .bar {
    height: 4px;
    width: 100%;
    background-color: var(--col2);
    border-radius: 10px;
}

/* --- BANNERS ---*/

.headerBanner, .footerBanner, .headerBannerCricket, .headerBannerBaseball, .downloadsBanner {
  margin:0;
  float: left;
  clear:both;
  text-align:center;
  width: 100%;
  background-color: #333;
  color:#fff;
  font-size: 36px;
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-attachment: fixed; /* set a background image as fixed */ 
}

.downloadsBanner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)) ,url(/images/fieldwithdice.jpg);
  padding-top: 50px;
  padding-bottom: 50px; 
}

.headerBanner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)) ,url(/images/bsds-image-photo-by-daniel-anthony.jpg);
  padding-top: 200px;
  padding-bottom: 200px; 
}

.headerBannerBaseball {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)) ,url(/images/baseballimagefromunsplash.jpg);
  padding-top: 150px;
  padding-bottom: 150px; 
}

.headerBannerCricket {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)) ,url(/images/alessandro-bogliari-oDs_AxeR5g4-unsplash.jpg);
  padding-top: 150px;
  padding-bottom: 150px; 
}

.footerBanner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)) ,url(images/fieldwithdice.jpg);
  padding-top: 200px;
  padding-bottom: 200px; 
}


/* --- END OF BANNERS --- */

@media (max-width: 700px) {
  .normalImageRight, .normalImageLeft {
    padding: 10px;
    width: 100%; 
    display: block
    margin: auto;
  }
  
  /* --- Responsive Toggle CSS -- */
  .toggle-button {
        display: flex;
        top: 3rem;
        
    }

     .navBar-links {
       display: none;
       width: 100%;
    }

    .navBar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navBar ul {
        width: 100%;
        flex-direction: column;
    }
    .navBar-links li {
        text-align: center;
    }

    .navBar-links li a {
        padding: .5rem 1rem;
    }

    .navBar-links.active {
        display: flex;
    }
    /* --- END OF TOGGLE CSS --- */
}