:root {
  --bg:          #000000;
  --text:        #EEEEEE;
  --text-muted:  #888888;
  --link:        #FB3333;
  --link-hover:  #FF79C6;
  --hr:          #BB3333;
}

@font-face {
  font-family: 'IBM VGA';
  src: url('/assets/fonts/WebPlus_IBM_VGA_8x14.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "IBM VGA";
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

main {
  max-width: 900px;
  margin: 0 10% 10% 10%;
}

main p {
  margin: 20px 0 20px 0;
}

main ul {
  margin-left: 30px;
}

.logo {
  width: 200px;
}

.webring a {
  color: var(--link);
  font-size: 15px;
}

.webring {
  color: var(--hr);
  font-size: 15px;
}

#keepandroidopen,
#keepandroidopen a {
  display: flex;
  color: var(--link);
  margin-top: 20px;
}

.code {
  border: 1px solid var(--hr);
  padding: 10px;
  color: red;
}

pre.text, pre.code {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
  padding: 10px;
}

a {
  color: var(--link);
}

hr {
  margin: 10px;
  color: var(--hr);
}

@media (max-width: 600px) {
  .title {
    font-size: 4px; 
    letter-spacing: 0px;
    line-height: 1.1;
    text-align: center;
  }

  .logo {
    width: 120px;
  }

  .links {
    flex-direction: column;
    gap: 8px;
  }
}