:root{
  --ac-black: #0f101a;
  --ac-dark-blue: #161827;
  --ac-mid-blue: #1e2034;
  --ac-light-blue: #3a3b55;
  --ac-dark-lilac: #746977;
  --ac-light-lilac: #a7a2a0;
  --ac-dark-lime: #bbd1aa;
  --ac-light-lime: #cfffb3;
}

@font-face {
  font-family: 'jetbrains_monoregular';
  src: url('https://acanieve.neocities.org/font/jetbrains_mono/jetbrains-mono.regular-webfont.woff2') format('woff2'),
  url('https://acanieve.neocities.org/font/jetbrains_mono/jetbrains-mono.regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html, body, .wrapper, .main{
  height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body{
  background-color: var(--ac-dark-blue);
  color: var(--ac-dark-lilac);
  font-family: "jetbrains_monoregular", Verdana, Calibri, sans-serif;
  }
  


.wrapper{}

.heading, .textbox{
  display: block;
  float: left;
  padding: 4px;
  word-wrap: break-word;
  background-color: var(--ac-light-blue);
  color: var(--ac-light-lilac);  
  background-color:green;
  }
  
.heading h4{
  margin: 0;  
  display: block;
  float: left;
  max-width: 80%;
  font-size: 16px;
}

.heading h5{
  margin: 0;
  display: block;
  float: right;
  max-width:20%;
  font-size: 16px;
}

.box .textbox{
  background-color: blue;
}

.nav{
  margin: 10px;
  max-width: 10%;
  position: fixed;
  right: 0px;
  top: 0px;
  outline: 4px solid var(--ac-black);
  border: 4px solid var(--ac-light-lilac);
  background-color: var(--ac-dark-blue);
  font-size: 14px;
  }

.main{
  margin: 0 10%;
  padding:16px;
  text-align: center;
  background-color: var(--ac-mid-blue);
  }
  
.box{
  margin: 10px;
  max-width: 50%;
  outline: 4px solid var(--ac-black);
  padding: 10px;
  background-color: var(--ac-dark-lilac);
  color: var(--ac-black);
  }