/* Reset default styles and set base styles for body and HTML */
body, html {
  min-width: 600px; /* Ensure minimum width for responsiveness */
  height: 100%; /* Make body and HTML take up full height of the viewport */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
  overflow-y: scroll; /* Enable vertical scrolling if content overflows */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  background-color: lightslategray; /* Set background color */
  font-size: 14px; /* Set base font size */
  font-family: "B612 Mono", monospace; /* Set base font family */
  font-weight: 400; /* Set base font weight */
  font-style: normal; /* Set base font style */
}

/* Styles for the container with fluid width */
.container-fluid {
  background-color: #00a3a3; /* Set background color */
  float: left; /* Allow other elements to float around it */
  width: 100%; /* Take up full width */
}

/* Styles for the header */
header {
  width: 100%; /* Take up full width */
  float: left; /* Allow other elements to float around it */
  margin: 0; /* Remove default margin */
  padding: 25px; /* Add padding */
  background-color: #00a3a3; /* Set background color */
  border-color: #00a3a3; /* Set border color */
  font-size: x-large; /* Set font size */
}

/* Styles for h2 inside header */
header h2{
  padding-left: 525px; /* Add left padding to h2 */
}

/* Styles for a specific font */
.inconsolata-mainfont {
    font-family: "Inconsolata", monospace; /* Set font family */
    font-optical-sizing: auto; /* Set font optical sizing */
    font-weight: 200; /* Set font weight */
    font-style: normal; /* Set font style */
    font-variation-settings: "wdth" 100; /* Set font variation settings */
    float: left; /* Allow other elements to float around it */
}

/* Styles for a container */
.container {
    width: 80%; /* Set container width */
    margin: 50px auto; /* Center container horizontally with top margin */
}

/* Styles for a contact box */
.contact-box {
    background-color: #fff; /* Set background color */
    display: flex; /* Use flexbox */
}

/* Styles for left side of contact box */
.contact-left {
    flex-basis: 60%; /* Set flex basis */
    padding: 40px 60px; /* Add padding */
}

/* Styles for right side of contact box */
.contact-right {
    flex-basis: 40%; /* Set flex basis */
    padding: 40px; /* Add padding */
    background: #00a3a3; /* Set background color */
    color: #fff; /* Set text color */
}

/* Styles for h1 */
h1 {
    margin-bottom: 50px; /* Add bottom margin */
    color: white; /* Set text color */
}

/* Styles for paragraphs inside container */
.container p {
    margin-bottom: 50px; /* Add bottom margin */
    color: white; /* Set text color */
}

/* Styles for input row */
.input-row {
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Space between items */
    margin-bottom: 20px; /* Add bottom margin */
}

/* Styles for input groups */
.input-row .input-group {
    flex-basis: 45%; /* Set flex basis */
}

/* Styles for input elements */
input {
    width: 100%; /* Take up full width */
    border: none; /* Remove border */
    border-bottom: 1px solid #ccc; /* Add bottom border */
    outline: none; /* Remove outline */
}

/* Styles for text area */
textarea {
    width: 100%; /* Take up full width */
    border: 1px solid #ccc; /* Set border */
    outline: none; /* Remove outline */
    padding: 10px; /* Add padding */
    box-sizing: border-box; /* Ensure padding and border are included in width */
}

/* Styles for labels */
label {
    margin-bottom: 6px; /* Add bottom margin */
    display: block; /* Make it a block element */
    color: #00a3a3; /* Set text color */
}

/* Styles for buttons */
button {
    background: #00a3a3; /* Set background color */
    width: 100px; /* Set width */
    border: none; /* Remove border */
    outline: none; /* Remove outline */
    color: #fff; /* Set text color */
    height: 35px; /* Set height */
    border-radius: 30px; /* Add border radius */
    margin: top 20px; /* Add top margin */
}

/* Styles for h3 inside contact left */
.contact-left h3 {
    color: #00a3a3; /* Set text color */
    font-weight: 600; /* Set font weight */
    margin-bottom: 30px; /* Add bottom margin */
}

/* Styles for h3 inside contact right */
.contact-right h3 {
    font-weight: 600; /* Set font weight */
    margin-bottom: 30px; /* Add bottom margin */
}

/* Styles for first td inside tr */
tr td first-child {
    padding-right: 30px; /* Add right padding */
}

/* Styles for td inside tr */
tr td {
    padding-top: 20px; /* Add top padding */
    padding-right: 30px; /* Add right padding */
}

/* Styles for site title */
.site-title {
    color: white; /* Set text color */
    float: left; /* Allow other elements to float around it */
    width: auto; /* Set width to auto */
    text-align: center; /* Center text */
    font-size: x-large; /* Set font size */
}

/* Styles for content */
.content {
    padding: 25px 540px; /* Add padding */
    margin: 10px; /* Add margin */
    float: left; /* Allow other elements to float around it */
    clear: left; /* Clear left float */
}

/* Styles for h2 */
h2 {
    width: 100%; /* Take up full width */
    padding-top: 0px; /* Remove top padding */
    padding-bottom: 0px; /* Remove bottom padding */
    color: white; /* Set text color */
    float: left; /* Allow other elements to float around it */
    clear: left; /* Clear left float */
}

/* Styles for hr */
hr {
    border: 10px solid #00a3a3; /* Set border */
    border-radius: 5px; /* Add border radius */
}

/* Styles for footer */
footer {
    text-align: center; /* Center text */
    padding: 20px; /* Add padding */
}

/* Styles for counter-strike changes */
.counter-strike-changes {
    display: block; /* Make it a block element */
    justify-content: center; /* Center content horizontally */
    max-width: 560px; /* Set max width */
    width: 100%; /* Take up full width */
    margin-left: 350px; /* Add left margin */
}

/* The below code is adapted from How To Create a Responsive Navbar with Dropdown. (n.d.). Www.w3schools.com. https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp */

/* Add a black background color to the top navigation */
.topnav {
  padding-left: 550px; /* Add left padding */
  padding-right: 920px; /* Add right padding */
	background-color: #333; /* Set background color */
	overflow: hidden; /* Hide overflow */
  float: left; /* Allow other elements to float around it */
  width: 100%;
}

/* Styles for links inside navigation bar */
.topnav a {
	float: left; /* Float links to the left */
	display: block; /* Make them block elements */
	color: #f2f2f2; /* Set text color */
	text-align: center; /* Center text */
	padding: 14px 16px; /* Add padding */
	text-decoration: none; /* Remove default underline */
	font-size: 17px; /* Set font size */
}

/* Add an active class to highlight the current page */
.active {
	background-color: #04AA6D; /* Set background color */
	color: white; /* Set text color */
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none; /* Hide the icon */
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
	float: left; /* Float dropdown to the left */
	overflow: hidden; /* Hide overflow */
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
	font-size: 17px; /* Set font size */
	border: none; /* Remove border */
	outline: none; /* Remove outline */
	color: white; /* Set text color */
	padding: 14px 16px; /* Add padding */
	background-color: inherit; /* Inherit background color */
	font-family: inherit; /* Inherit font family */
	margin: 0; /* Remove default margin */
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
	display: none; /* Hide by default */
	position: absolute; /* Set position */
	background-color: #f9f9f9; /* Set background color */
	min-width: 160px; /* Set minimum width */
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Add shadow */
	z-index: 1; /* Set z-index */
}

/* Style the links inside the dropdown */
.dropdown-content a {
	float: none; /* Remove float */
	color: black; /* Set text color */
	padding: 12px 16px; /* Add padding */
	text-decoration: none; /* Remove default underline */
	display: block; /* Make them block elements */
	text-align: left; /* Left-align text */
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #555; /* Set background color */
	color: white; /* Set text color */
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd; /* Set background color */
	color: black; /* Set text color */
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
	display: block; /* Show on hover */
}