@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css);
@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/MERCY.ttf") format("truetype"); }
@font-face { font-family: 'PixelOperator'; src: url("assets/PixelOperator.ttf") format("truetype"); }


:root {
  /* Colours */
  --palette-black: black;
  --palette-orange: #FDCC05;
  --palette-yellow: yellow;
  --palette-brown: brown;
  --palette-shadow: #3b18317d;
  --palette-white: white;

  /* Fonts */
  --font-dtm: 'DTM-sans', monospace;
  --font-bungee: 'Bungee', monospace;
  --font-pixel: 'PixelOperator', monospace;
  --font-mercy: 'Mercy', monospace;

  /* Images */
  --bg-img: url("img/ezgif-76a8c866a06357.webp");
}

body {
  margin: 0;
  background-image: var(--bg-img);
  background-color: #9c3d7d;
  font-family: var(--font-dtm);
  font-size: 20px;
  font-weight: 100;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
}

/* === Scrollbar === */
*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-track { background: var(--palette-black); border: 1px solid var(--palette-black); }
*::-webkit-scrollbar-thumb { border: 1px solid var(--palette-black); background: var(--palette-orange); }

/* === Text Selection === */
::-moz-selection { color: var(--palette-black); background: var(--palette-orange); } 
::selection      { color: var(--palette-black); background: var(--palette-orange); }

/* === Text CSS === */
h1 { font-family: var(--font-bungee); font-size: 40px; color: var(--palette-white); font-weight: 100; text-shadow: 3px 3px var(--palette-shadow); }
h2 { font-family: var(--font-bungee); color: var(--palette-white); font-size: 30px; margin: 0; font-weight: 100; text-shadow: 3px 3px var(--palette-shadow); }

/* === Lists === */
ul li::marker { content: "*"; font-family: var(--font-dtm); }
li { font-family: var(--font-pixel); margin: 5px 0; }

/* === Navbar, Buttons & Links === */
nav { background: var(--palette-black); display: flex; align-items: center; justify-content: space-evenly; padding: 5px 0; flex-wrap: wrap; }
nav img { height: 25px; }
nav a { font-family: var(--font-bungee); text-decoration: none; color: var(--palette-white); font-size: 20px; text-shadow: 2px 2px var(--palette-shadow); transition: 0.2s; }
nav a:hover { color: var(--palette-yellow); }
nav a:active  { color: var(--palette-brown); }

button { font-family: var(--font-mercy); font-size: 20px; color: var(--palette-orange); background: var(--palette-black); border: 2px solid; padding: 5px; transition: 0.2s; }
button:hover  { color: var(--palette-yellow); }
button:active { color: var(--palette-brown); padding: 5px 4px; }

a        { color: var(--palette-orange); }
a:hover  { color: var(--palette-yellow); }
a:active { color: var(--palette-brown); }
b { font-family: var(--font-dtm); letter-spacing: 1px; }
p { margin: 15px 0; }

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

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

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

.box-group { display: flex; width: 100%; justify-content: space-between; align-items: flex-start; }
.box-group .content-box { max-width: 300px; }

/* === Page Specific === */
/* index.html */
#aboutmiles     { flex-direction: row; }
#aboutmiles img { width: 100%; }
#aboutmiles p { font-family: var(--font-pixel); }

#fanartshowcase { flex-direction: column; display: flex; align-items: center; }
#fanartshowcase p { margin-bottom: 0; }
#fanartshowcase .content-box { padding: 30px; flex-direction: column; }
#fanartshowcase img { width: 250px; border-radius: 15px; }

#fanartshowcase h2 {
  font-family: var(--font-bungee);
  color: var(--palette-white);
  font-size: 30px;
  margin: 0;
  font-weight: 100;
  -webkit-text-stroke: 1.55px var(--palette-black);
}

#followus { display: flex; width: 100%; flex-direction: column; align-items: center; }
#followus p { margin: 0; font-family: var(--font-pixel); }
#followus .container { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 5px; }
#followus .fa-brands { font-size: 50px; width: 60px; text-align: center; height: 60px; transition: 0.2s; }

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

#downloadgame   { background: var(--palette-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: var(--font-mercy); text-decoration: none; transition: 0.2s; }
#downloadgame a:hover { color: var(--palette-yellow); }

/* characters.html */
.about-character { display: flex; gap: 15px; align-items: center; }
.about-character .content-box { margin-top: 0; }
.about-character img { height: 100%; max-height: 600px; filter: drop-shadow(5px 5px 0px var(--palette-shadow)); }
.about-character p { width: 100%; font-family: var(--font-pixel); margin: 10px 0; }

/* team.html */
.team-container { display: flex; justify-content: flex-start; margin: 15px 0; gap: 15px; width: 100%; align-items: center;} 
.team-icon { width: 150px; height: 150px; color: white; display: flex; align-items: center; justify-content: center; border-radius: 25px; }
.team-icon img { width: 150px; height: 150px; border-radius: 25px; }
.contributor-container p { font-family: var(--font-pixel); }

/* === Misc === */
#MMMLogo { width: 100%; max-width: fit-content; filter: drop-shadow(5px 5px 0px var(--palette-shadow)); content: url(img/MMM_logo_small.png) }

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

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

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

h1 { font-size: 30px; }
h2 { margin: 0; font-size: 25px; line-height: 25px; }

footer { flex-wrap: wrap; justify-content: center; text-align: center; gap: 15px; }

.content-box h2 { margin: 10px 0; font-size: 25px; line-height: 25px; }
.box-group { display: flex; flex-direction: column; align-items: center; width: 100%; }
.box-group .content-box { max-width: none; }

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

/* index.html */
#aboutmiles     { flex-wrap: wrap; flex-direction: column-reverse; }
#aboutmiles img { max-width: 300px; }
#downloadgame p { font-size: 40px; }
#downloadgame a { font-size: 50px; }

/* characters.html */
.about-character { align-items: center; flex-direction: column-reverse; gap: 0; }
.about-character:nth-child(even) { flex-direction: column; }
.about-character img { max-height: 300px; }

}