@font-face {
  font-family: 'Trattatello';
  src: local('Trattatello'), url('fonts/Trattatello.ttf'), format('ttf');
}

body {
  background-color: black;
  margin: 0;
  font-family: 'Trattatello';
}

footer {
  font-family: 'Open Sans', sans-serif;
  font-size: medium;
  position: absolute;
  bottom: 0;
  width: 100%;
  /*height: 32px;*/
  text-align: center;
  background-color: #f0f0f0;
}

#heading {
  position: fixed;
  width: 100%;
  padding: 32px;
}

.border {
  background: linear-gradient(90deg, gray, 90%, black);
  height: 2px;
  width: 80vw;
  margin-top: 2px;
}

h1 {
  /*color: rgb(215, 215, 215);*/
  color: rgb(80, 79, 78);
  font-size: 2em;
  margin: 0px;
  font-weight: 100;
}

div {
  color: rgb(80, 79, 78);
}

.container {
  display: flex; /* Använd flexbox för layout */
  flex-wrap: wrap; /* Tillåt kolumner att bryta ner på mindre skärmar */
}

.column {
  font-size: 1.0em;
  flex: 1 1 0; /* Låt kolumnerna ta upp lika mycket plats */
  padding: 5px;
  border: 0px solid #ccc; /* Valfri kantlinje för att visualisera kolumnerna */
  box-sizing: border-box; /* Inkludera padding och border i kolumnens bredd */
}

/* Anpassa layouten för mindre skärmar */
@media (max-width: 768px) {
  .column {
    flex: 1 1 100%;
    font-size: 0.9em;
  }
  h1 {
	font-size: 1.25em;
  }
}

a {
  color: rgb(80, 79, 78); /* Default link color */
  text-decoration: none; /* Removes underline */
}
a:hover {
  color: blue; /* Default link color */
  text-decoration: underline; /* Adds underline on hover */
}

#progress-container {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#progress {
  font-size: 2.5em;
  color: #e4ede7;
}