@font-face {
    font-family: 'Neuropol X Rg';
    src: url('fonts/neuropolxrg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
/*  font-family: 'Neuropol X Rg', sans-serif; */
  background-color: powderblue;
  border: 0px;
  padding: 0px;
  margin: 0px;
}
h1 {
  color: blue;
}
p {
  color: red;
}

.two-tone-btn {
  /* Dimensions & typography */
  font-family: 'Neuropol X Rg', sans-serif;
  padding: 5px 5px;
  font-size: 1rem;
  font-weight: bold;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 0px;
  cursor: pointer;
  
  /* Two-tone gradient split down the middle */
  background: linear-gradient(to bottom, #6ae2d8, #ffffff);
  background-size: 200% 100%;
  background-position: right bottom;
  
  /* Smooth transition on hover */
  transition: all 0.3s ease-in-out;
}

.two-tone-btn:hover {
  /* Inverts the colors on hover for an engaging animation */
  background-position: left bottom;
  background: linear-gradient(to bottom, #6ae2d8, #000000);
  color: #ffffff;
}

.two-tone-btna {
  /* Dimensions & typography */
  font-family: 'Neuropol X Rg', sans-serif;
  padding: 5px 5px;
  font-size: 1rem;
  font-weight: bold;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 0px;
  cursor: pointer;
  
  /* Two-tone gradient split down the middle */
  background: linear-gradient(to bottom, #6ae2d8, #000000);
  background-size: 200% 100%;
  background-position: right bottom;
  
  /* Smooth transition on hover */
  transition: all 0.3s ease-in-out;
}

.two-tone-btna:hover {
  /* Inverts the colors on hover for an engaging animation */
  background-position: left bottom;
  background: linear-gradient(to bottom, #6ae2d8, #ffffff);
  color: #000000;
}