/* https://brandguide.tamu.edu/visual-style/brand-colors */
/* Aggie Maroon #500000 */
/* Aggie White #ffffff */
/* Aggie Blue #fefefe */
/* Aggie Green #5b6236 */
/* Aggie Brown #744f28 */
/* Aggie Gold #998542 */
/* Aggie Dark Gray #332c2c */
/* Aggie Light Gray #707373 */
/* Aggie Beige #d5d2c3 */
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans&display=swap');
:root {
  --td-background-color:  #913939;
	--button-background-color1: #c62418;
	--focus-background-color:  #913939;
  --hover-color-1: #b71f1f;
  --hover-color-2: #e22929;
}

body {
	font-family: Arial, sans-serif; /* default fonts if others not available */
	margin: 0; /* base margin initially 0 all around */
	padding: 0; /* base padding initially 0 all around */
/*	background-color: #500000; /* Body main background color */
	margin-top: 25px; /* Add margin at the top */
	margin-left: 10px; /* Add margin on the left side */
	margin-right: 10px; /* Add margin on the right side */
  background-image: url('images/red_background_4.jpg'); /* Initial background image */
  background-size: cover; /* Background size */
  background-position: center center; /* Positioning the background to center */
}

.container {
	max-width: 800px; /* Max width of content container */
	margin: 0 auto; /* center-align a block-level element */
	padding: 20px 10px 20px 10px; /* Padding around the container as to body */
	text-align: center; /* Text alignment */
	background-color: #ffffff; /* Container background color */
	border-radius: 15px; /* Div corner roundness */
	border: 3px solid black; /* Adds border to container */
  box-shadow: 5px 5px 5px #3b3939; /*	Adds box shadow to container */
}

.avatar {
	width: 100px; /* Adjust the size as needed */
	height: 100px; /* Adjust the size as needed */
	border-radius: 50%; /* Makes it circular */
	overflow: hidden; /* Hides the overflow of the image */
	text-align: center; /* Center text if alt */
	margin: auto; /* Centers the avatar horizontally within its parent */
	display: block; /* Ensures the avatar is a block-level element */
}

.avatar img {
	max-width: 100%; /* Allow the image to scale down, maintaining its aspect ratio */
	max-height: 100%; /* Allow the image to scale down, maintaining its aspect ratio */
	object-fit: cover; /* Scales and centers the image within the circle */
}

.name {
	text-align: center; /* Horizontally center the content */
	font-family: 'Oswald', sans-serif; /* Set font of name */
	color: #913939; /* Set font color */
}

.summary {
	text-align: Left; /* Left justify the content as standard so editor can change */
	font-family: 'Open Sans', sans-serif; /* Set font of summary */
}

.styleButton {
	border-radius: 50%; /* Set border width to make button a circle */
	border: 1px solid black; /* Set border of Styling Button */
	font-family: 'Oswald', sans-serif; /* Set font of Styling Button */
	background: white; /* Set background color of Styling Button */
	width: 23px; /* Set width of Styling Button */
}

.styleButton2 {
	border-radius: 50%; /* Set border width to make button a circle */
	border: 1px solid black; /* Set border of Styling Button */
	padding-top: 2px; /* Set top padding of Styling Button */
	padding-bottom: 2px; /* Set bottom padding of Styling Button */
	padding-left: 0px; /* Set left padding of Styling Button */
	padding-right: 0px; /* Set right padding of Styling Button */
	width: 25px; /* Set width of Styling Button */
	background: white; /* Set background color of Styling Button */
	font-family: 'Oswald', sans-serif; /* Set font of Styling Button */
}

/*Style Button Hover Classes */
.HoverClass1:hover { color: white; background: #913939}
.HoverClass2:hover { color: white; background: #913939}
.HoverClass3:hover { color: white; background: #515194}
.HoverClass4:hover { color: white; background: #77429f}
.HoverClass5:hover { color: white; background: #ac7da6}
.HoverClass6:hover { color: white; background: #366a3d}
.HoverClass7:hover { color: white; background: #a16d30}
.HoverClass8:hover { color: white; background: #918530}
.HoverClass9:hover { color: white; background: #7e7e94}
.HoverClass10:hover { color: white; background: #505072}
/*Style Button Hover Classes End*/

/*Style Button Highlighted Classes */
.buttonClass1 {color: white; background: #913939}
.buttonClass2 {color: white; background: #913939}
.buttonClass3 {color: white; background: #515194}
.buttonClass4 {color: white; background: #77429f}
.buttonClass5 {color: white; background: #ac7da6}
.buttonClass6 {color: white; background: #366a3d}
.buttonClass7 {color: white; background: #a16d30}
.buttonClass8 {color: white; background: #918530}
.buttonClass9 {color: white; background: #7e7e94}
.buttonClass10 {color: white; background: #505072}
/*Style Button Highlighted Classes End*/



.button {
	border: 2px solid #995555; /* Set border properties for button that are not the Styling Buttons */
}

.toggle-button {
	background-color: #FFFFFF; /* button Background color */
	/* border: none; */
	color: #000000; /* Text color */
	padding: 10px 20px; /* padding of button */
	cursor: pointer; /* Cursor on hover */
	border-radius: 15px; /* Roundness of corners */
	font-family: 'Oswald', sans-serif;
	font-size:  16px;
}

.linkBlocks-container, .socialBlocks-container {
	max-width: 375px; /* Max width of container */
	margin: 0 auto; /* Center the container horizontally */
	display: none; /* Hide the container initially */
}

.linkBlocks { /* Container styles */
	display: flex; /* Allows flex */
	flex-direction: column; /* Vertically align the link divs */
	max-width: 375px; /* Set the maximum width */
}

.linkBlocks > div {
	margin: 10px 0; /* Add spacing between each link div */
	padding-top: 10px;  /* Padding at the top */
	padding-right: 0px; /* Paddint on the right */
	padding-bottom: 10px; /* Padding on the bottom */
	padding-left: 0px; /* Padding on the left */
	text-align: center; /* Alignment of link text */
	background-color: #FFFFFF; /* Background color of link div */
	border-radius: 15px; /* roundness of div corners */
	width: 100%; /* take up full width of linkBlocks div */
}

.linkBlocks div:hover {
	background: var(--button-background-color1); /* Set background color based on the value of --button-background-color1 */
	color: white !important; /* Set font color */
}

.linkBlocks a {
	text-decoration: none; /* No line under link text */
	color: #000000; /* Link text color */
	font-size: 16px; /* Font size for links */
	font-family: 'Open Sans', sans-serif; /* Set font family */
}

.link-button i {
	padding-right: 10px; /* Add right padding to link button icons */
	color: #de4d45; /* Sets initial color for link button icons */
}

.linkLink {
	/* Holder for possible styles */
}

.linkEmail {
	/* Holder for possible styles */
}

.linkPhone {
	/* Holder for possible styles */
}

.linkLocation {
	/* Holder for possible styles */
}

.socialBlocks {
	display: flex; /* Allows flex and assumes flex-start making the list horizontal */
	flex-wrap: wrap; /* Allow icons to wrap within the container */
	justify-content: center; /* Center the entire list horizontally */
	margin: 0 auto; /* Center the container horizontally */
	padding-top: 20px; /* Puts some padding between the buttons and social icons */
	max-width: 375px; /* Set the maximum width */
	overflow: hidden; /* Hide it too wide */
}

.socialBlocks a {
	/* Link styles */
	text-decoration: none;  /* No line under link text */
	font-size: 35px; /* Font size for social icons */
	margin-right: 15px; /* Add spacing between each icon */
	margin-bottom: 15px;
}

a:nth-of-type(1n+0) .social-icon {
 color: #e22929; /* Sets colors for every odd social icon */
}

a:nth-of-type(2n+0) .social-icon {
 color: #b71f1f; /* Sets colors for every even social icon */
}


.show-blocks {
	display: flex; /* Allows flex */
	flex-direction: column; /* flex direction */
}

.pageFooter {
	max-width: 800px; /* Max width of footer div to make it the same as the content div if outside of it */
	margin: 0 auto; /* center-align a block-level element */
	margin-top: 5px; /* Margin of footer starting below buttons, links, and/or socials */
	padding: 0px 10px; /* Padding on left and right of footer to edge */
	background-color: #707373; /* Bockground color of footer div */
	color: white; /* Text color */
	display: flex; /* Allows flex */
	justify-content: space-between; /* distribute content evenly */
	border-radius: 15px; /* Add rounded corners */
	margin-top: 25px; /* Add margin at the top */
	font-family: 'Inclusive Sans', sans-serif; /* Set font family */
	font-weight: 300; /* Set font weight of text */
	background: #bf5757; /* Set initial background color */
}

.footerLeft,
.footerRight,
.footerCenter {
	width: 33%; /* Divide the footer into thirds */
}

.footerLeft {
	text-align: left; /* Left justify */
	padding-left: 20px; /* Adds left padding for footerLeft text */
}

.footerCenter {
	text-align: center; /* Center justify */
}

.footerRight {
	text-align: right; /* Right justify */
	padding-right: 20px;  /* Adds right padding for footerRight text */
}