/* artHome.css */
body {
    /* If you want the background image defined here: */
    /* background-image: url('../gallery/page 0.jpg'); */ /* Path relative to css folder */
    /* background-repeat: no-repeat; */ /* Optional: to prevent tiling */
    /* background-size: cover; */ /* Optional: to cover the entire viewport */
    /* background-attachment: fixed; */ /* Optional: to make background fixed on scroll */
}

h1 {
    font-weight: 700;
    font-size: 4.5em;
    color: rgba(115,103,86,1);
    /* font: normal bold 72px; redundant with above and font-size */
    text-align: center;
}

/* Add a black background color to the top navigation */
.topnav {
    /* background-color: rgba(255, 255, 255, 0); */ /* This is transparent, you might not need it */
    overflow: hidden;
    margin-top: 20px;
    display: inline-block; /* This can sometimes cause alignment issues with a table, check layout */
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left; /* Be careful with float if the parent 'td' is not handling it well */
    color: rgba(115,103,86,1);
    text-align: center;
    padding: 14px 30px;
    text-decoration: none;
    font-size: 17px;
    border-radius: 20px;
    font-weight: 700;
    font-family: 'PT Sans', sans-serif;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: rgba(115,103,86,1);
    color: white;
}

/* Add a color to the active/current link */
.topnav a.active { /* This class is now set by PHP */
    background-color: rgb(75, 27, 0);
    color: white;
}

.pic {
    margin-left: 50px; /* Consider using 'auto' for horizontal centering if parent is block */
    margin-bottom: 20px;
    display: block; /* If you want margin auto to work for centering */
    margin-left: auto;
    margin-right: auto;
}

/* ... (rest of your CSS remains the same) ... */

.myButton {
	-moz-box-shadow: 3px 5px 14px 4px #8a2a21;
	-webkit-box-shadow: 3px 5px 14px 4px #8a2a21;
	box-shadow: 3px 5px 14px 4px #8a2a21;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437));
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24437',GradientType=0);
	background-color:#c62d1f;
	-moz-border-radius:23px;
	-webkit-border-radius:23px;
	border-radius:23px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial, sans-serif; /* Added fallback font */
	font-size:28px;
	font-weight:bold;
	padding:13px 44px;
	text-decoration:none;
	text-shadow:0px 0px 0px #810e05;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#c62d1f',GradientType=0);
    background-color:#f24437;
}
.myButton:active {
	position:relative;
	top:1px;
}
.fa {
    padding: 10px;
    font-size: 30px;
    width: 20px; /* This might be too small for 30px font + padding, consider auto or larger fixed width */
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    margin: 5px;
}
.fa-facebook {
    background: #3B5998;
    color: white;
    margin-top: 5px;
}
.fa-instagram {
    background: black; /* Consider Instagram's gradient or a more brand-aligned color */
    color: white;
    margin-top: 5px;
}

/* Other styles from your original CSS */
.button { /* You had a .button class, ensure it's used or remove if not */
    background-color: rgb(109, 72, 42);
    color: white;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    border: none; /* Added to match .purchase style which seems to override it */
    padding: 10px 20px; /* Added some padding */
    cursor: pointer; /* Added cursor */
    border-radius: 12px; /* Harmonized with .hover */
}
.hover { /* This class seems to only set border-radius and alignment. Is it used on its own? */
    border-radius: 12px;
    text-align: center;
    align-self: center; /* align-self is for flex/grid items */
}

.bigboy{
    font-family: 'Staatliches', cursive;
    font-size: 40px;
    color: rgb(71, 62, 48);
}
.niceborder{
    margin-left: 100px;
    width: 1150px;
    border: 10px dotted rgba(115,103,86,1);
    border-radius: 5px; /* You have border-radius: 84px; later. Choose one. */
    margin-bottom: 30px;
    border-radius: 84px;
    background: rgb(236, 224, 206);
}
.bigboypic{
    padding: 30px;
}
.bigboytext{
    margin-right: 30px;
    font-size: 22px;
    color: rgba(115,103,86,1);
}
.purchase {
    background-color: #4CAF50; /* Green - This is overwritten by the next .purchase rule */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 10px;
}
.purchase { /* This rule will take precedence for background-color, color, font-family, border */
    background-color: rgba(115,103,86,1);
    color: white;
    font-family: 'PT Sans', sans-serif;
    border: 2px solid white;
}

.purchase:hover {
    background-color: white;
    color: rgba(115,103,86,1);
    font-family: 'PT Sans', sans-serif; /* font-family usually doesn't need to be repeated on hover */
}

/* .fa styles are duplicated, remove one set */

.bigboytext2{
    margin-right: 30px;
    font-size: 30px;
    color: rgba(115,103,86,1);
    padding: 20px;
    margin-bottom: -20px;
}
.email{
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    color: rgba(115,103,86,1);
}