@font-face {
  font-family: 'Alagard'; /* Choose a name to use later in your CSS */
  src: url('fonts/alagard.ttf') format('truetype'); /* Path relative to your CSS file */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent invisible text while loading */
}


.title {
    color: #b97474;
    font-family: 'alagard', sans-serif;
    font-size: xxx-large;
    margin-bottom: 5px;
    margin-top: 15px;
}



body {
    color: #b88787;
    font-family: 'Georgia', serif;
    background-image: url("/images/bg.png");
    background-size: 20%
}

.h2 {
    color: #b97474;
    font-family: 'alagard', sans-serif;
    font-size: xx-large;
    
}

#main {
            background-color:#261414;
            border: 1px solid;
            border-color:#000000;
            color:#ae7474;
            padding: 18px 20px 20px 20px;
            width: 70%;
            height:auto;
            margin-left: 12%;
            margin-right: 12%;
    
                }                

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 3px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 100%;
  padding: 5px;
}


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

#links {
  color: #823e3e;
  font-family: 'alagard', sans-serif;
  font-size:27px;
  
  flex: 25%;
  max-width: 100%;
  padding: 7px;
  
}

.horizontal-menu {
  list-style-type: none; /* Removes default bullet points */
  margin: 8;
  padding: 2%;
  align-content: center;
  background-color: #ae7474;
}

.horizontal-menu li {
  display: inline-block; /* Aligns list items horizontally and allows padding/margins */
}

.horizontal-menu li a {
  font-family: 'alagard', sans-serif;
  font-size:x-large;
  text-align:center;
  color: #261414;
  padding: 14px 16px;
  text-decoration: none; /* Removes default underlines from links */
}

.horizontal-menu li a:hover {
  background-color: white; /* Adds a hover effect */
}

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

/* 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 {
    flex: 100%;
    max-width: 100%;
  }
}