/* You can either copy the below and paste it between style tags on your HTML page, OR you can copy this to a file and name it .css and link it from your HTML page. */

:root {
  --body-bg:#B52A0B; /* dark red */
  --nav-button-bg:#141301; /* charcoal */
  --content-bg:#FFFFFC; /* just off white */
  --accent-dark-one:#B52A0B; /* same dark red */
  --accent-dark-two:#3066BE; /* blue */
  --accent-light-one:#A3B0DD; /* light blue - to change soon*/ 
  --accent-light-two:#F9B3CF; /* light pink - to change soon*/
  --bg-goodchar:#A1CDF4;
  --bg-evilchar:#FFC3C3;
  --bg-trav:#D9A6DE;
  
}

@font-face {                  
font-family: 'Fungis';
src: url(https://humantooth.neocities.org/fonts/FUNGIS-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

@font-face { 
font-family: 'PicNic';
src: url(https://schnauzerclub.neocities.org/fonts/PicNic-Regular.woff) format('woff2');
font-weight: normal;
font-style: normal;
} 

html, body {
  margin:0;
  font-family:'Fungis';
  font-size:16px;
}


body {
  background-color:var(--body-bg);
}

.header-container {
  display: flex;
  justify-content: space-evenly;
  align-content: center;  
  align-items: baseline;
  font-family:'PicNic';
  font-size:56px;
  color:white;
  }

.intro-container {
  background-color:var(--content-bg);
  box-shadow: -0.3em 0 .5em black;
  display:flex;
  flex-wrap:wrap;
  margin-top:-3px;
  max-width:100%;
  }
  
  
.token-good {
  float: left;
  background-color:var(--bg-goodchar);
  max-width:20%;
  padding:10px 10px 10px 10px;
  }
  
  
/* This changes behaviour on floating elements. Code nicked from https://www.w3schools.com/css/css_float_clear.asp */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}