:root {
  --bg-color: #000000;
  --primary-color: #7EB692; 
  --secondary-color: coral;
  --post-bg-color: #000000;
  --nav-item-color: #73C18F;
  --link-color: #9AC000;
  --link-visited-color: #003A3D;
}

body {
  color: var(--primary-color);
  background-color: var(--bg-color);
  font-family: "booty"
}

@font-face {
  font-family: title; 
  src: url(/webfonts/Basteleur-Bold.woff);
}

@font-face {
  font-family: nav; 
  src: url(/webfonts/Basteleur-Moonlight.woff); 
}

@font-face {
  font-family: booty; 
  src: url(/webfonts/CourierPrime-Regular.ttf); 
}

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

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

h1, h2, h3 {
 font-family:nav;
}

h3 {
  font-family:booty;
}  
  
.nav-item a,
.nav-item a:visited,
.nav-item a:hover,
.nav-item a:active {
  color: var(--primary-color);
}

.desc {
  font-family:booty;
  line-height: 10px;   
  text-align:center;
  font-size:16px;
}

.title {
  line-height: 10px; 
  font-family:nav; 
  text-align:center; 
  font-size:58px;
}

* {
  box-sizing: border-box;
}

.nav-container {
  display: flex;
  flex-wrap: wrap;
}

.nav-item {
  text-align: center;  
  font-size: 22px;
  font-family: nav;
  flex: 25%;
  line-height: 60px; 
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.flex-item {
  padding: 8px;
  text-align: center;  
  font-size: 18px;
  flex: 50%;
}

.flex-item p {
  margin-top: 0;
}

@media (max-width: 600px) {
  .flex-item {
    flex: 100%;
  }
}

.header {
  width:95%;
  max-width:600px;
  margin:auto; 
}

.post {
  border-style: solid;
  border-color: coral;
  border-width: thin;
  width:100%;
  max-width:800px;
  margin:auto;
  padding: 5px 5px 5px 5px;
  background-color: var(--post-bg-color); 

}

.post-title {
  font-family:nav;
  color: var(--secondary-color);
  font-size: 20px; 
  font-weight: bold;
  text-align:center; 
  line-height: 1px;
}

.post-p {
  font-family:booty;
  font-size: 18px;
  text-align: left; 
  text-justify: inter-word;
}

.solid {
  border-top: 1px solid var(--secondary-color);
  max-width:800px;
}

/* EXPERIMENTAL */


.image-collection {
    display: block;
    width: 300px;
    text-decoration: none;
    position: relative;
    left: 20px;
}

.thumbnails {
    position: relative;
    height: 200px;
}

.thumbnails img {
  
    position: absolute;
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 3px solid white;
    box-sizing: border-box;
    text-align: center;
}



.thumbnails img:nth-child(1) {
    left: 0;
    top: 0;
    z-index: 3;
}

.thumbnails img:nth-child(2) {
    left: 30px;
    top: 15px;
    z-index: 2;
}

.thumbnails img:nth-child(3) {
    left: 60px;
    top: 30px;
    z-index: 1;
}

.image-count {
    position: absolute;
    left: 22%;
    top: 50%;
    z-index: 10;

    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 5px 8px;
    font-size: 20px;
    font-family:booty;
}