@font-face {
  font-family: 'CheapSignage';
  src: 
    url('fonts/CheapsignageStandard-KV1D.ttf'),
}

@font-face {
  font-family: 'Lupina Demo';
  src: 
    url('fonts/LupinademoRegular-X3ovd.otf'),
}

body {
  font-family: 'Lupina Demo', sans-serif;
  padding: 50px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #123a2c00;
  border-radius: 1px;
}

::-webkit-scrollbar-thumb {
  background-color: hsl(159, 73%, 29%);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #446c8b;
}

h2 {
    font-family: 'CheapSignage', sans-serif;
}
h3 {
    font-family: 'CheapSignage', sans-serif;
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.column {
  padding: 20px;
  border-radius: 10px;
}

.navbar {
  width: 100%;
  overflow:auto;
}

.navbar a {
  float: left;
  width: 20%;
  text-align: center;
}

a {
  font-family: "Lupina Demo";
  color: rgb(12, 112, 82);
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: blue;
}

/* selected link */
a:active {
  color: blue;
}

img {
  max-width: 300px;
  height: auto;
}

.buttons img {
  width: 100px;
  height: auto;
  cursor: pointer;
  margin: 0px;
  border: 2px solid transparent;
}

.content {
      margin-top: 20px;
      display: flex;
      justify-content: left;
      gap: 20px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .column {
      flex: 1 1 200px;
      max-width: 400px;
    }

    .column img {
      width: 200px;
      height: auto;
    }

    /* Text formatting styles */
    .column h2 {
      color: darkblue;
      margin-top: 0;
    }

    .column p {
      text-align: left;
      font-size: 1.1em;
      line-height: 1.6;
    }

    .column ul {
      padding-left: 20px;
      text-align: left;
    }

    .column blockquote {
      font-style: italic;
      border-left: 4px solid #ccc;
      padding-left: 10px;
      margin: 10px 0;
      text-align: left;
    }

.button {
  border: none;
  background-color: rgb(60, 125, 134);
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn1 {
  width:150px;
}

.btn1:hover {
  content: url("images/maeicon_hover.png");
}

.btn2 {
  width:150px;
}

.btn2:hover {
  content: url("images/jackicon_hover.png");
}

.btn3 {
  width:150px;
}

.btn3:hover {
  content: url("images/maffyicon_hover.png");
}

.btn4 {
  width:150px;
}

.btn4:hover {
  content: url("images/rosemaryicon_hover.png");
}

.btn5 {
  width:150px;
}

.btn5:hover {
  content: url("images/ligmundicon_hover.png");
}

.btn6 {
  width:150px;
}

.btn6:hover {
  content: url("images/peteicon_hover.png");
}

.btn7 {
  width:150px;
}

.btn7:hover {
  content: url("images/metooicon_hover.png");
}

.btn8 {
  width:150px;
}

.btn8:hover {
  content: url("images/sjicon_hover.png");
}

.btn9 {
  width:150px;
}

.btn9:hover {
  content: url("images/jayicon_hover.png");
}

.btn10 {
  width:150px;
}

.btn10:hover {
  content: url("images/snowicon_hover.png");
}