/* Irvin Angeles, July 30, 2024, IST239-W01, Final Project  */
/* Imported google font */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* Resets Everything on page */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* All buttons Style*/
button {
  background-color: #007bff; /* Blue background for buttons */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  border-radius: 5px;
  margin: 10px 10px;
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
button:hover {
  background-color: #0056b3; /* Darker blue for hover effect */
}
button:active {
  background-color: #003d7a; /* Even darker blue when button is pressed */
}

/* Header Section Begins */
header {
  text-align: center;
  background-color: #007bff; /* Header background color */
  padding: 20px; /* Add more padding for a spacious look */
  position: relative; /* Relative positioning for child elements */
}

img.portrait {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Circular portrait */
  display: block; /* Ensure the image is centered */
  margin: 0 auto; /* Center the image horizontally */
}

div.student-info {
  color: white;
  margin-top: 10px; /* Add space above the student info */
}

h1.name {
  padding-bottom: 5px;
  font-size: 2em; /* Increase font size for better visibility */
}

.clock {
  position: absolute; /* Position the clock absolutely within the header */
  top: 10px;
  left: 10px;
  padding: 10px 20px; /* Add padding for the banner effect */
  background-color: #333; /* Dark background color for contrast */
  color: white; /* White text color */
  font-size: 1.2em; /* Adjust font size as needed */
  font-family: "Arial", sans-serif; /* Use a clean, readable font */
  border-radius: 5px; /* Rounded corners for the banner */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

/* Navigation*/
.main-nav {
  display: flex; /* Use flexbox for horizontal layout */
  justify-content: center; /* Center the nav items horizontally */
  padding: 0; /* Remove default padding */
  margin: 10px; /* Remove default margin */
}

.main-nav ul {
  display: flex; /* Flexbox to layout items horizontally */
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  gap: 20px; /* Space between menu items */
}

.main-nav li {
  display: inline; /* Ensure list items are inline */
}

.main-nav a {
  text-decoration: none; /* Remove underline from links */
  color: white; /* White text color */
  font-size: 1.2em; /* Increase font size for better visibility */
  padding: 5px 15px; /* Add padding around the links */
  border-radius: 5px; /* Rounded corners for links */
  transition: background-color 0.3s; /* Smooth transition for background color */
}

.main-nav a:hover {
  background-color: #0056b3; /* Darker shade of blue on hover */
}
/* Header Section Ends */

/* Main Body Beggins */
main {
  display: flex; /* Use flexbox layout for the main container */
  flex-wrap: wrap; /* Allow items to wrap onto multiple lines if needed */
  justify-content: space-around; /* Distribute items with space around them */
  padding: 10px; /* Add padding inside the main container */
  background-color: white; /* Set a white background color */
}

.link {
  flex: 1 1 30%; /* Flex-grow: 1, Flex-shrink: 1, Flex-basis: 30% - allows items to grow and shrink but take up about 30% of the width */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  padding: 10px; /* Add padding inside each link block */
  margin: 10px; /* Add margin around each link block */
  background-color: #eaeaea; /* Light grey background color for the link blocks */
  border: 1px solid #ccc; /* Light grey border around the link blocks */
}

.link a {
  font-size: 1.2em; /* Increase font size for links */
  color: #007bff; /* Set the link color to a shade of blue */
  text-decoration: none; /* Remove the default underline from links */
}

.link a:hover {
  text-decoration: underline; /* Add underline to links on hover */
}

.link p {
  margin-top: 12px; /* Add margin above paragraphs */
  font-size: 1em; /* Set the font size for paragraphs */
  color: #333; /* Dark grey color for paragraph text */
  font-family: roboto; /* Use the Roboto font family */
}

/* Main Body Ends */

/* Dollars to Pesos Beggins */
section#money-section {
  width: 100%; /* Full width of the section */
  height: 100%; /* Full height of the section */
}

.money-header {
  text-align: center; /* Center-align text inside the header */
  background-color: rgb(15, 164, 15); /* Green background color */
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; /* Modern sans-serif font family */
  padding: 20px; /* Add padding inside the header */
  font-size: 1.5em; /* Increase font size */
  color: white; /* White text color */
  width: 100%; /* Full width of the header */
}

.money-article {
  text-align: center; /* Center-align text inside the article */
  background-color: white; /* White background color */
  margin-top: 20px; /* Space above the article */
  margin-bottom: 20px; /* Space below the article */
}

.input-button-container {
  display: flex; /* Use flexbox for layout */
  flex-direction: row; /* Arrange items in a row */
  flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
  align-items: center; /* Center-align items vertically */
  text-align: center; /* Center-align text inside the container */
  justify-content: center; /* Center-align items horizontally */
}

.currency-header {
  font-size: 1.5em; /* Increase font size */
  font-family: sans-serif; /* Use a clean, readable sans-serif font */
}

.money-input {
  display: block; /* Display as block element */
  width: 100px; /* Set width */
  text-align: center; /* Center-align text inside the input */
  font-size: 1.2em; /* Increase font size */
  margin: 15px; /* Space around the input */
}

div#arrow {
  line-height: 70px; /* Set line height */
  font-size: 60px; /* Increase font size */
}

.money-message {
  margin-top: 15px; /* Space above the message */
  color: black; /* Black text color */
  margin-bottom: 10px; /* Space below the message */
}

.money-span {
  color: red; /* Red text color */
}
/* Dollars to Pesos Ends */

/* Rock Paper Scissors Beggins */

#game-section {
  width: 100%; /* Full width of the container */
  height: 100%; /* Full height of the container */
  text-align: center; /* Center-align text inside the section */
  margin-bottom: 15px; /* Space below the section */
}

.game-header {
  text-align: center; /* Center-align text inside the header */
  background-color: rgb(250, 23, 23); /* Red background color */
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; /* Set a modern sans-serif font family */
  padding: 20px; /* Add padding inside the header */
  font-size: 1.5em; /* Increase font size */
  color: white; /* White text color */
  width: 100%; /* Full width of the header */
  margin-bottom: 20px; /* Space below the header */
}

#scoreboard {
  display: flex; /* Use flexbox for layout */
  text-align: center; /* Center-align text inside the scoreboard */
  justify-content: center; /* Center-align children items horizontally */
  margin: 10px; /* Add margin around the scoreboard */
}

#scoreboard p {
  margin-left: 7px; /* Space to the left of each paragraph */
  font-size: 25px; /* Increase font size */
}

.game-buttons button {
  margin-left: 10px; /* Space to the left of each button */
  padding: 5px 20px; /* Add padding inside the buttons */
  font-size: 20px; /* Increase font size */
}

#span-message {
  font-family: Arial, Helvetica, sans-serif; /* Set a clean, readable font family */
  font-size: 20px; /* Increase font size */
}
/* Rock Paper Scissors Ends */

/* Languages Section Beggins */
#language-section {
  text-align: center; /* Center-align text within the section */
  justify-content: center; /* Center-align items horizontally (for flexbox layout) */
  padding: 20px; /* Add padding around the content */
  background-color: black; /* Set background color to black for contrast */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
  width: 100%; /* Full width of the section */
  height: 530px; /* Set a fixed height for the section */
}

.language-header {
  margin-bottom: 20px; /* Space below the header */
}

.language-title {
  font-size: 1.8em; /* Larger font size for emphasis */
  color: white; /* White text color for readability on black background */
  margin-bottom: 10px; /* Space below the title */
  font-weight: bold; /* Bold text for emphasis */
}

#language-img {
  width: 50%; /* Set width to 50% of the container */
  height: 250px; /* Fixed height for the image */
  border: 3px solid #007bff; /* Blue border to highlight the image */
  border-radius: 8px; /* Rounded corners for the image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for the image */
  transition: transform 0.3s ease-in-out; /* Smooth zoom effect on hover */
}

.language-info {
  margin: 10px; /* Space around the info */
  color: white; /* White text color for readability */
  font-size: 20px; /* Set font size for the info text */
}
/* Language Section Ends */

/* Footer Beggins */
.footer {
  background-color: #333; /* Dark background for contrast */
  color: #fff; /* White text color */
  text-align: center; /* Center-align the text */
  padding: 20px; /* Add padding around the footer */
  border-top: 5px solid #007bff; /* Bold top border in a highlight color */
  font-family: "Arial", sans-serif; /* Clean, readable font */
}

.footer p {
  margin: 10px 0; /* Spacing between lines */
  font-size: 1em; /* Standard font size */
  line-height: 1.5; /* Improve readability with line height */
}

/* Add some responsive design for smaller screens */
@media (max-width: 768px) {
  .footer p {
    font-size: 0.9em; /* Slightly smaller font size on smaller screens */
  }
}
/* Footer Ends */