body, html {
  height: 100%;
  margin: 0;
  background-color: #000000;
  font-family: Arial, sans-serif;
  cursor: url(/images/cursor1.png) 0 2, auto;
}
@font-face { 
    font-family: 'CustomFont'; src: url("/fonts/GoldenRanger.ttf");
}
 
 h1{
    font-family: 'CustomFont', Arial, sans-serif; font-weight:normal; font-style:normal; font-size: 60pt;
}
 
.bg {
  /* The image used */
  background-image: url("/images/bg.webp");
  background-color: #ffffff;
  

  /* Full height */
    height: 100%; 
    width: 48%;
    margin-left:25.5%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

button:hover, .tab button:hover  {
  cursor: url(/images/cursor2.png) 2 14, auto;
}

/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: white;
  cursor: url(/images/cursor2.png) 2 14, auto;
}

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

a {
    text-decoration: none;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 24%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 98%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 48%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

p {
    color: white;
}