/*General*/
body {
    margin: 0;
    color: #222222;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
}

h1{
    margin-bottom: 10px;
    margin-top: 0;
    font-weight: 600;
    font-size: 36px;
}

h2{
    margin-bottom: 10px;
    margin-top: 0;
    font-weight: 600;
    font-size: 28px;
}

a:visited{
  color:blue;
}

/*Content around grids*/
.thumbnailParagraph{
	margin-top: 40px;
}

.contentsHeader{
	margin-top: 80px;
}

/*Vote*/
.voteLink{
 cursor: pointer;
}

.vote{
 height: 16px;
 width: 16px;
 margin-left: 10px;
 margin-right: 10px;
}

/*Logo*/
@font-face {
    font-family: Quantico-Bold;
    src: url(fonts/Quantico-Bold.ttf);
} 

@font-face {
    font-family: Quantico;
    src: url(fonts/Quantico.ttf);
} 

@font-face {
    font-family: PublicPixel;
    src: url(fonts/PublicPixel-z84yD.ttf);
} 

.pixel {
    font-family: PublicPixel;
/*    font-family: Quantico-Bold;*/
	font-size: 36px;
	padding-left: 10px;
	padding-right: 10px;
}

.inversion {
	color:#FFFFFF;
    font-family: PublicPixel;
/*    font-family: Quantico;*/
	/*background-color:#000000;*/
	background: linear-gradient(90deg, black, green, red, blue);
	font-size: 36px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	white-space: nowrap;
}

.mirror {
	transform: scale(-1, 1) translateX(5px);
	display: Inline-block;
}


/*Footer*/
.footerLine{
    background: -webkit-linear-gradient(0deg, #8490ff 0%, #62bdfc 100%);
    padding: 10px 0;
}

.footerBottom{
    color: #777777;
    padding: 30px;
    background-color: #04091e;
}

/*Main content*/
.mainContent{
    padding-top: 40px;
    padding-bottom: 30px;
    padding-right: 30px;
    padding-left: 30px;
}

/*Navigation*/
.navDiv {
    padding: 20px;
}

.navInnerDiv{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between !important;
}

.navList {
    margin-top: 0;
}

.navItem {
    list-style: none;
    position: relative;
    float: left;
    white-space: nowrap;
    margin-left: 10px;
    margin-top: 0;
}

.navItem:hover > a {
  color: #8490ff !important;
}

.navLink {
    transition: all 0.3s ease 0s;
    padding: 0 8px 0px 8px;
    text-decoration: none;
    color: #222222;
    font-weight: 500;
    font-size: 14px;
}

.navLink:visited {
    color: #222222;
}


/*Grids*/

.sample {
  height: 160px;
  width: 160px;
}

.offsetTable {
  padding: 0;
  margin: 0;
  border-spacing: 0px;
}

.offsetCell{
  padding: 0px;
  margin: 0px;
}

.spacerCell{
  padding: 0px;
  margin: 0px;
  width: 4px; /*This must be an even number for the offsets to work properly*/
}

.b2x4x6 {
  background-size: 48px 96px;
  background-position: 
    0px 24px, 24px   0px, /*1, 1*/
   24px 24px, 48px   0px, /*2, 1*/
    0px 48px, 24px  24px, /*1, 2*/
   24px 48px, 48px  24px, /*2, 2*/
    0px 72px, 24px  48px, /*1, 3*/
   24px 72px, 48px  48px, /*2, 3*/
    0px  0px, 24px  72px, /*1, 4*/
   24px  0px, 48px  72px; /*2, 4*/
}

.b2x4 {
  background-size: 2px 4px;
  background-position: 
   0px 1px, 1px  0px, /*1, 1*/
   1px 1px, 2px  0px, /*2, 1*/
   0px 2px, 1px  1px, /*1, 2*/
   1px 2px, 2px  1px, /*2, 2*/
   0px 3px, 1px  2px, /*1, 3*/
   1px 3px, 2px  2px, /*2, 3*/
   0px 0px, 1px  3px, /*1, 4*/
   1px 0px, 2px  3px; /*2, 4*/
}

.b4x2x6 {
  background-size: 96px 48px;
  background-position: 
   0px 24px, 24px  0px, /*1, 1*/
  24px 24px, 48px  0px, /*2, 1*/
  48px 24px, 72px  0px, /*3, 1*/
  72px 24px,  0px  0px, /*4, 1*/
   0px 48px, 24px 24px, /*1, 2*/
  24px 48px, 48px 24px, /*2, 2*/
  48px 48px, 72px 24px, /*3, 2*/
  72px 48px,  0px 24px; /*4, 2*/
}

.b4x2 {
  background-size: 4px 2px;
  background-position: 
  0px 1px, 1px 0px, /*1, 1*/
  1px 1px, 2px 0px, /*2, 1*/
  2px 1px, 3px 0px, /*3, 1*/
  3px 1px, 0px 0px, /*4, 1*/
  0px 2px, 1px 1px, /*1, 2*/
  1px 2px, 2px 1px, /*2, 2*/
  2px 2px, 3px 1px, /*3, 2*/
  3px 2px, 0px 1px; /*4, 2*/
}