@font-face {
  font-family: C64;
  src: url(fonts/C64_Pro_Mono-STYLE.woff2);
}
@font-face {
  font-family: unifont;
  src: url(fonts/unifont-17.0.05.woff);
}

@font-face {
  font-family: jacquard;
  src: url(fonts/jacquard.woff);
}

body {
background-color: #000000;
background-size: cover;
image-rendering: crisp-edges;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;

}

h1 {
  color: #FFFFFF;
  font-family: "Jacquard";
  font-size: 800%;
  }
h2 {
  color: #FFFFFF;
  font-family: "Jacquard";
  font-style: normal;
  font-size: 400%;
  line-height: 0.2;  
}
  
p {
font-family: "unifont";
font-size: 200%;
  }

ul {
font-family: "unifont";
font-size: 130%;
}

.smooth {
image-rendering: smooth;
}


.container {
  display: flex;
  align-items: stretch;

  gap: 20px;
  min-height: 95vh;
}

@media screen and (min-width: 800px) {
.container {
flex-direction: row;
}
}

@media screen and (max-width: 800px) {
.container {
flex-direction: column;
}
}

.container > div {
border: 8px solid transparent;
border-image-source: url("img/white-border.png");
border-image-slice: 8;
border-image-repeat: round;
}

.content {
background-color: #000000;
border: 2px solid;
border-color: #FFFFFF;
padding: 10px;

color:#FFFFFF;
flex: 60%;
}

.sidebar {
background-color: black;
border: 2px solid;
border-color: #FFFFFF;
padding: 10px;

flex: 40%;
}

#map {
width: 100%;
}

.head {
display: block
width: 60%;
margin-left: 20%;
margin-right: 20%;
}

.head > img {

}