/* From Copilot: Absolutely! Here's a friendly and approachable default CSS template to get you started. 
This template includes some basic styling to ensure your website looks clean and modern: */

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Styling */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
  padding: 20px;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 20px;
  color: #444;
}

/* Paragraphs */
p {
  margin-bottom: 20px;
}

/* Links */
a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Lists */
ul {
  list-style: none;
}

ul li {
  margin-bottom: 10px;
}

/* Buttons */
button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #2980b9;
}

/* Forms */
input,
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background-color: #333;
  color: white;
  margin-top: 20px;
}

/* This CSS template is a great starting point for any project. 
It resets default browser styles, sets a clean and readable font, 
and includes basic styling for common elements like headings, 
paragraphs, links, buttons, forms, and containers. 
Feel free to customize it further to match your specific design needs! */

/* Below are the specific styles for the Percentages page: */

h1 {
  font-size: 2rem;
  font-weight: bold;
}

h2 {
  font-size: 1.75rem;
  font-weight: bold;
}

h3 {
  font-size: 1.5rem;
  font-weight: bold;
}

ol {
  padding-left: 20px;
}

ul {
  list-style-type: disc; /* Default bullet points */
  padding-left: 20px; /* Indent the list */
}

ul li {
  margin-bottom: 1px; /* Adjust the value as needed */
}

.inputamount {
  width: 10rem;
  margin-right: 1rem;
}

.percentamount {
  width: 6rem;
  margin-right: 1rem;
}

.yearsamount {
  width: 5rem;
  margin-right: 1rem;
}

.resultamount {
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
  height: 3rem;
  background-color: white;
  padding: 10px;
  margin: 0 0 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.section {
  border: 1px solid blue;
  border-radius: 5px;
  margin-top: 1rem;
}

.italic {
  font-style: italic;
}

.textcenter {
  text-align: center;
}

.ml-1 {
  margin-left: 1rem;
}

.ml-2 {
  margin-left: 2rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.right-edge {
  display: inline-flex;
  justify-content: flex-end;
  margin-right: 1rem;
  gap: 10px;
  float: right;
}

.hidden {
  display: none;
}

.specified-width {
  width: 60rem;
  margin: 0 auto;
}