@font-face { font-family: 'Bungee'; src: url("assets/Bungee-Regular.ttf") format("truetype"); }
@font-face { font-family: 'DTM-sans'; src: url("assets/DTM-Sans.ttf") format("truetype"); }
@font-face { font-family: 'Mercy'; src: url("/assets/fonts/MERCY.ttf") format("truetype"); }
@font-face { font-family: 'PixelOperator'; src: url("assets/PixelOperator.ttf") format("truetype"); }

*::-webkit-scrollbar { width: auto; }
*::-webkit-scrollbar-track { background: black; border: 1px solid black; }
*::-webkit-scrollbar-thumb { border: 1px solid black; background: #FDCC05; }

body {
  margin: 0;
  background-image: url("img/test.png");
  background-color: #614d82;
  background-repeat: repeat-x;
  font-family: 'DTM-sans';
  font-size: 18px;
  font-weight: 100;
  background-attachment: fixed;
  background-position: bottom
}

nav {
  background: black;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 5px 0;
  flex-wrap: wrap;
}

nav img { height: 25px; }

nav a {
  font-family: 'Bungee';
  text-decoration: none;
  color: white;
  font-size: 20px;
  text-shadow: 2px 2px #834d73;
  transition: 0.2s;
}

nav a:hover { color: yellow; }

footer {
  color: #c0c0c0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: black;
  text-align: right;
  padding: 5px 0;
  line-height: 20px;
}

.center-content {
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px auto;
}

.content-box {
  background: black;
  color: white;
  border: 8px solid #FDCC05;
  padding: 0 15px 15px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.content-box h2 { font-family: 'Bungee'; font-size: 40px; margin: 10px 0px; text-shadow: 2px 2px #834d73; font-weight: 100; line-height: 40px; }

#aboutmiles { flex-direction: row; }
#aboutmiles img { width: 100%; }

.box-group {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
}

.box-group .content-box { max-width: 300px; }

#fanartshowcase { flex-direction: column; display: flex; align-items: center; }
#fanartshowcase p { margin-bottom: 0; }
#fanartshowcase .content-box { padding: 30px; flex-direction: column; }
#fanartshowcase img { image-rendering: pixelated; width: 120px; }

#fanartshowcase h2 {
  font-family: 'Bungee';
  color: white;
  font-size: 30px;
  margin: 0;
  font-weight: 100;
  -webkit-text-stroke: 1.55px black;
}


#followus { display: flex; width: 100%; justify-content: space-evenly; align-items: center; }
#followus p { margin: 0; font-family: 'pixeloperator'; }

#followus .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 5px;
}


#updatesbox ul { 
  overflow: auto;
  max-height: 200px;
  margin-top: 0;
}

ul li::marker { content: "*"; font-family: 'DTM-sans'; }

li {
    font-family: 'PixelOperator';
    margin: 5px 0;
}

.gold {
  filter: drop-shadow(1px 1px 0px #4C4C00);
  background: -webkit-linear-gradient(#FFFFA8 25%, #FFFF0E);
  font-family: 'DTM-sans';
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  padding: 5px 0;
}

#downloadgame { 
  background: black;
  width: 100%;
  text-align: center;
  max-width: 850px;
  padding: 15px 0;
}

#downloadgame p { font-size: 80px; margin: 0; }
#downloadgame a { font-size: 100px; margin: auto; color: #C0C0C0; font-family: mercy; text-decoration: none; }

@media only screen and (max-width: 700px) {

.content-box { }
.content-box h2 { margin: 0; font-size: 25px; }

nav a { padding: 0 5px; font-size: 18px; }

#aboutmiles { flex-wrap: wrap; flex-direction: column-reverse; }
#aboutmiles img { max-width: 300px; }

.box-group { display: flex; flex-direction: column; align-items: center; width: 100%; }
.box-group .content-box { max-width: none; }

#downloadgame p { font-size: 40px; }
#downloadgame a { font-size: 50px; }



}