article
{
    padding:5px;
    border:solid 3px #000000;
    margin-top:5px;
}

header
{
    padding:0px;
    text-align:center;
}

aside
{
    margin-top:5px;
    background-color:#f0eaea;
    padding:5px;
    text-align:center;
    font-style:italic;
    border:double 3px #b200ff;
}

section
{
    padding:5px;
    margin-top:5px;
}

footer
{
    padding:5px;
    text-align:center;
    font-weight:bold;
}

ul li
{
    padding-left:5px;
    padding-right:5px;
    text-align:left;
    font-size:16px;
    font-weight:bold;
}

.bordered
{
    padding:5px;
    border:solid 3px #000000;
    margin-top:5px;
}

.bordered-left
{   
    padding:5px;
    border-left: solid 3px #000000;
    border-top: solid 3px #000000;
    border-bottom: solid 3px #000000;
    margin-top:5px;
}

.myForm {
    display: grid;
    grid-template-columns: [labels] auto [controls] 1fr;
    grid-auto-flow: row;
    grid-gap: .8em;
    background: #eee;
    padding: 1.2em;
  }

.myForm > label  {
grid-column: labels;
grid-row: auto;
}
.myForm > input,
.myForm > textarea,
.myForm > button {
grid-column: controls;
grid-row: auto;
border: none;
padding: 1em;
}

.input-number{
width: 100px;
}

.input-file{
width: 200px;
}

.input-text{
width: 150px;
}

.input-file-name{
width: 300px;
}

.button{
background-color:#1c87c9;
width: 150px;
}

.row {
    display: flex;
}

.column {
    flex: 50%;
    text-align: left;
}

nav {
    background-color: #333;
     text-align:center;
}

.navbar {
    list-style-type: none;
    display: flex; /* Aligns the list items horizontally */
    justify-content: center; /* Centers the items in the nav */
}

.navbar li {
    margin: 0 15px; /* Space between items */
}

.navbar a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 14px 20px; /* Adds padding to make the links bigger */
    display: block; /* Makes the entire area clickable */
}

.navbar a:hover {
    background-color: #575757; /* Adds a hover effect */
}