* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 10px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #8e018e; /* dark purple */
}

/* Code Font */
.code {
  font-family: 'Courier New', monospace;
}

/* Submit Buttons */
input[type=submit] {
  border: none;
  font-size: 1.5rem;
  background-color: #ffffff
}

input[type=submit]:hover {
  color: #8e018e; /* dark purple */
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #000000;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #000000;
  color: #f466df; /* pink */
}

/* Style the content */
.content {
  background-color: #000000;
  color: #ffffff;
  padding: 10px;
  /* width: fit-content; */
  text-align: left;
  /*height: 200px;*/
}

.content a {
  color: #f466df; /* pink */
}

.content a:hover {
  color: #d071ed; /* light purple */
}

/* Style the footer */
.footer {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  padding: 1px;
}

.footer a {
  color: #f466df; /* pink */
}

.footer a:hover {
  color: #d071ed; /* light purple */
}