/*
    Developer Names: Timothy Bartsch, Ian Schroeder, Mark Tsvyan
    File Description: Styles page for the website
    Date: 05/15/23
*/

/* Set background color, text color, and full height for the body */
body {
    background-color: #FAC671;
    color: #ffffff;
    height: 100%;
}
/* Style the anchor tags to have a white color */
a {
    color: #ffffff;
}
/* Style the anchor tags on hover to light blue*/
a:hover {
    color: #87cefa; /* Light blue */
}
/* Style the class of .container with white background, black text, and padding*/
.container {
    background-color: #ffffff;
    color: #000000;
    padding: 20px;
}
/* Style the button tags with light blue background, white text, padding, no border, and rounded corners */
button {
    background-color: #85BDAA; /* Light blue */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
}
/* Change button tags background color on hover to a darker shade of light blue */
button:hover {
    background-color: #6495ed; /* Darker shade of light blue */
}
/* Set color for h1, h2, h3 tags to white */
h1, h2, h3 {
    color: #ffffff;
}
/* Set color for h5 tags to black */
h5 {
    color: black;
}
/* Set color for p tags to black */
p {
    color: black;
}
/* Set color for small text tags to black */
small {
    color: black;
}
/* Center an element with the class of .center horizontally by setting display to block and setting left and right
margins to auto */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Style for button1 class: position, border radius */
.button1 {
    position: absolute;
    top: 12px;
    right: 12px;
    border-radius: 5px;
}


/*Bootstrap Layout Styles*/

/* Set background color for container */
.container {
    background-color: #FAC671;
}
/* Set background color and width for footer */
.footer {
    background-color: #FAC671;
    width: 100%;
    padding: 20px 0;
    bottom: 0;
}
/* Styled the tableDisplay and globalTableDisplay IDs: border, padding, border radius, width, and center alignment */
#tableDisplay, #globalTableDisplay {
    border: 1px solid black; /* Add a border around the row */
    padding: 10px; /* Add some padding for spacing */
    border-radius: 10px; /* Apply rounded corners to make it look like a square */
    width: fit-content; /* Adjust the width based on the content */
    margin: 0 auto; /* Center the row horizontally */
}
/* Styled the topleft class: width, position, and alignment */
.topleft {
    width: 9%;
    position: absolute;
    top: 10px;
    left: 12px;
}
/* Styled the center class: padding-top and width */
.center {
    padding-top: 100px;
    width: 600px;
}
/* Styled the list-group class: background color */
.list-group {
    background-color: #85BDAA;
}

/* Add a black background color to the top navigation */
.topnav {
    float: right;
    list-style: none;
    margin: 0px;
    padding: 0px;
    background-color: #333;
    border-radius: 5px;
    overflow: hidden;
}
/* Styled the topnav li to float */
.topnav li {
    float: left;
}

/* Style the links inside the navigation bar */
.topnav li a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #85BDAA;
    color: white;
}
/* Styled a container class within a header tag to float to the right.*/
header.container {
    float: right;
}