@font-face {
  font-family: "fnaf";
  src:
    url("/fonts/FiveFontsAtFreddys.woff2") format("woff2"),
    url("/fonts/FiveFontsAtFreddys.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "shlop";
  src:
    url("/fonts/shlop.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

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

:root {
  --spacing: 1rem;
  --main-bg: #011f1a;
  --main-text: #91ff75;
  --box-bg: #000000;
  --box-text: #8aff54;
  --box-border: 1px solid #12f3ff;
  --link: #00ffb3;
  --link-hover: #12f3ff;
}

body, html {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  margin: 0;
}

body {
  background-color: var(--main-bg);
  color: var(--main-text);
  font-family: "fnaf", "Courier New", monospace;
}

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

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

.container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.container-all {
  width: calc(100% - var(--spacing));
  margin: auto calc(var(--spacing) / 2);
  padding: calc(var(--spacing) / 2);
}

.string {
  display: flex;
  list-style-type: none;
  flex-direction: row;
  margin: 0;
  padding: 0;
  gap: calc(var(--spacing) / 2);
  flex-wrap: wrap;
}

.string-links {
  justify-content: space-around;
}

.string li {
  margin: 0;
  padding: 0;
}

.box {
 padding: var(--spacing); 
 background-color: var(--box-bg);
 color: var(--box-text);
 border: var(--box-border);
}

.title {
 text-transform: uppercase; 
}

.title-main {
 width: max-content;
 margin: 0;
 font-family: "shlop", "Courier New", monospace;
 font-size: 3rem;
 letter-spacing: 0.5rem;
 background: #1dff00;
 background: linear-gradient(155deg, rgba(0,230,255,1) 8%, rgba(29,255,0,1) 45%, rgba(243,255,0,1) 96%);
 background-size: cover;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
}

@media (min-width: 800px) {
  .container-all {
    width: 80%;
    max-width: 1000px;
    margin: auto;
  }
  
  .container-main {
    flex-direction: row;
  }
  
  .box-sidebar {
    max-width: 250px;
    width: 30%;
  }
  
  .box-main {
   flex: 1; 
  }
}